jQueryを使ってスクロールに合わせて要素をフェードインさせる方法
スクロールに合わせて、要素をフェードインさせるサイトが増えています。
このような動きをもたせると、スクロール量が増えてもユーザーを飽きさせずにスクロールしてもらえる効果があると言われています。
ここでは左右と下方向からフェードインさせる方法を紹介しておきます。
実装サンプルと基本となるコード
まずはサンプルからといっても、ここに埋め込めないのでデモページを用意しました
今回のサンプルはスクロールしていくと表示されるようになっています
表示する仕組みは、スクロール量を監視し、該当する要素がウィンドウの下から50pxの位置に到達したらクラス「active」を付与していくことで表示させます
サンプルのHTML
HTMLは見た目用のクラス「container」とアニメーション用の「bottom」「left」「right」を用意しました。
クラス「wrap」で囲んでいるところは、アニメーション用に用意したcssで、要素がウィンドウからはみ出た位置にいき、横スクロールが出ないように調整するために使います
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="wrap"> <div class="container bottom"> <div class="headline">下から出てくる要素</div> <p>ユーザーのスクロール量によってアニメーションさせています。</p> <p>ここのブロックは下からホワっと出てくるようにしてみました</p> </div> </div> <div class="wrap"> <div class="container right"> <div class="headline">右から出てくる要素</div> <p>ユーザーのスクロール量によってアニメーションさせています。</p> <p>ここのブロックは右からシュッと出てくるようにしてみました</p> </div> </div> <div class="wrap"> <div class="container left"> <div class="headline">左から出てくる要素</div> <p>ユーザーのスクロール量によってアニメーションさせています。</p> <p>ここのブロックは左からシュッと出てくるようにしてみました</p> </div> </div> |
サンプルのcss
「bottom」「left」「right」は、要素の高さを維持しつつ非表示にしたいので「opacityプロパティ」を操作して非表示にしつつ、位置をずらしておきます。
前述したとおり、クラス「active」が付与されるタイミングでアニメーションを伴い表示していく形を取るので、HTMLには現状存在しないクラス「active」へのスタイルも用意してあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.wrap { overflow: hidden; } .bottom{ opacity: 0; bottom: -40px; } .bottom.active { opacity: 1; bottom: 0; transition:1s; } .left{ opacity: 0; left: -20%; } .left.active { opacity: 1; left: 0; transition:1s; } .right{ opacity: 0; right: -20%; } .right.active { opacity: 1; right: 0; transition:1s; } .container { width: 600px; padding: 30px 10px; margin: 0 auto 300px; background-color: #d3d3d3; position: relative; } .headline { font-size: 20px; font-weight: bold; margin-bottom: 20px; } .container p { margin-bottom: 10px; } .container p:last-child { margin-bottom: 0; } |
ここまでのコードでプレビューすると、何も表示されない状態になると思いますが、これで準備完了です。
jQueryのコード
今回のサンプルでは以下のコードを使ってアニメーションさせています。
eachメソッドを使えば、対象となる要素が複数あってもそれぞれに対して処理ができるので今回のようなケースでは便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(function() { var $bottom = $('.bottom'); var $left = $('.left'); var $right = $('.right'); var $win = $(window); $win.on('load scroll', function() { var hSize = window.innerHeight; var scroll = $win.scrollTop(); $bottom.each(function() { if (scroll > $(this).offset().top - hSize + 50) { $(this).addClass('active'); } }); $right.each(function() { if (scroll > $(this).offset().top - hSize + 50) { $(this).addClass('active'); } }); $left.each(function() { if (scroll > $(this).offset().top - hSize + 50) { $(this).addClass('active'); } }); }); }); |
スクロール量を調べる
フェードインさせるには、スクロール量を監視する必要があります。
スクロール量は、windowオブジェクトに対してscrolTopメソッドを使うことで取得できるので、こちらを使います。
|
1 |
var scroll = $win.scrollTop(); |
表示したい要素の位置を調べる
要素までのスクロール量は、offsetメソッドとtopプロパティを組み合わて取得できます。
ですが、要素までのスクロール量は、要素がウインドウ最上部に来るときのスクロール量なので、少し加工が必要になります。
今回のサンプルでは、要素がウィンドウの下から50pxのいちに来た時に動かし始めたいのです
ウィンドウの一番上までのスクロール量は取得できているので、取得した値からウィンドウの高さ分引いて、50プラスすればうまくいきます。
if分の条件式に入れてスクロール量と比較し、条件分岐させましょう
|
1 2 3 |
if (scroll > $(this).offset().top - hSize + 50) { $(this).addClass('active'); } |
クラス「active」が付与されたらアニメーションが始まるので完成。
紹介したコードは少しだけ脆弱なところがあり、ユーザーがJSを切っていたら、cssで非表示にしているので一生表示できません
もう少し確実性を出すのであれば、非表示にする部分はJS側から操作したり、表示するところもJSから操作するとなお良いと思います。
