問題
スクロールに合わせて要素を「ふわっと」フェードインさせたい
解決策
フェードイン前とフェードイン後の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はこちら
ブロック①
ブロック①です。ふわっとフェードインします。
ブロック②
ブロック②です。ふわっとフェードインします。
ブロック③
ブロック③です。ふわっとフェードインします。
最後に
いかがでしたでしょうか。
ものすごい凝ったアニメーションは望まず、「ふわっと」フェードインさせる手法としてはとてもお手軽なので、皆さんもぜひ、お試しください。
→こちらのページを参考にしました。
コメント