問題 × 解決策

【jQuery × css3】スクロールに合わせて要素を「ふわっと」フェードインさせる、シンプルな方法

問題

スクロールに合わせて要素を「ふわっと」フェードインさせたい

解決策

フェードイン前とフェードイン後の2種類のクラスを用意し、jQuery側でクラスを切り替える

 

はじめに

スクロールに合わせて要素をフェードインさせる手法で調べると、プラグインなどが出てきて取っつきにくいですが、今回の方法は「jQuery × css3」で、とてもシンプルに構築する方法を紹介します。

フェードインさせる要素に、特定のクラスを設定します。

まず、マークアップを行います。
フェードインさせる要素に、特定のクラスを設定します。
※ここでは例としてクラス「scrollfade」を設定します。

<section class=“scrollfade”>
…
</section>
<section class=“scrollfade”>
…
</section>
<section class=“scrollfade”>
…
</section>

次にフェイドイン用のクラスを2つ用意し、CSSを構築していきます。

フェイドイン前のクラスとフェイドイン時のクラスを2つ、用意します。

  • ここでは例として、フェイドイン前のクラスを「fadein_before」、フェイドイン時のクラスを「fadein_do」と設定します。

フェードイン前のクラス「fadein_before」

.fadein_before {
opacity : 0.0; /* ① */
-webkit-transform : translate(0, 50px);
-moz-transform : translate(0, 50px);
-o-transform : translate(0, 50px);
-ms-transform : translate(0, 50px);
transform : translate(0, 50px); /* ② */
-webkit-transition : all 500ms;
-moz-transition : all 500ms;
-o-transition : all 500ms;
-ms-transition : all 500ms;
transition : all 500ms; /* ③ */
}
  • 事前に「opacity: 0;」により、透明にします。
  • 「ふわっと」フェードインさせるために、「transform: translate(0, 50px;」で事前に下に下げておきます。
  • 「transition: all 500ms;」でCSSのプロパティに変化が起きた時、500ms(0.5秒)掛けて変化するようにします。

フェードイン時のクラス「fadein_do」

.fadein_do {
opacity : 1; /* ① */
-webkit-transform : translate(0, 0);
-moz-transform : translate(0, 0);
-o-transform : translate(0, 0);
-ms-transform : translate(0, 0);
transform : translate(0, 0); /* ② */
}
  • 「opacity: 1;」により、不透明に戻します。
    「transition: all 500ms;」 の設定により、0.5秒掛けて透明から不透明に戻ることになります。
  • 「transform: translate(0, 0;」で元の位置に戻します。「transition: all 500ms;」 の設定により、0.5秒掛けて下から上に上がることになります。

最後にJavascriptを構築します。

最後に、先ほど作った2つのクラスを操作するためのJavascriptを構築します。

$(function(){ 

var items =Array( "scrollfade" ); // 「scrollfade」クラスに「fadein_before」クラスを付与させる 

for(var i=0; i<items.length; i++){ 
$(items[i]).addClass('fadein_before'); 
} 

// スクロールに合わせてフェードインさせる関数 
function scollfade(){ 
$('.fadein_before').each(function(){//「fadein_before」クラスの要素一つ一つに対して、処理を行う 
var ptop = $(this).offset().top; // この要素の現在のスクロール位置 
var scroll = $(window).scrollTop(); // ブラウザ画面の現在のスクロール位置 
var windowHeight = $(window).height(); // ブラウザ画面の高さを取得 
if (scroll > ptop - windowHeight + 100){; // ブラウザ画面のスクロール位置がこの要素のスクロール位置+100pxを超えたら 
$(this).addClass(‘fadein_do’); // 「fadein_do」クラスをこの要素に付与する 
} 
}); 
} 

scollfade(); // ページ読み込み時に処理を実行させる 

$(window).scroll(function (){ 
scollfade(); // スクロールする度に処理を実行させる 
});
  • 最初に「scrollfade」クラスに「fadein_before」クラスを付与します。
    ここで最初の配列の中に指定したクラスを全てフェードイン処理の対象とすることができます。
  • 次にスクロールに合わせてフェードインを行うメイン処理の関数「scrollfade」を作ります。
    この中の「+100」を調整することでフェードインさせる位置を調整できます。
  • ページ読み込み時とスクロール時にこの関数を呼び出すことで、スクロールに合わせて要素をフェードインさせます。

DEMOはこちら

ブロック①

ブロック①です。ふわっとフェードインします。

ブロック②

ブロック②です。ふわっとフェードインします。

ブロック③

ブロック③です。ふわっとフェードインします。

最後に

いかがでしたでしょうか。
ものすごい凝ったアニメーションは望まず、「ふわっと」フェードインさせる手法としてはとてもお手軽なので、皆さんもぜひ、お試しください。

→こちらのページを参考にしました。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × one =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧