スクロールに連動して要素をアニメーションさせるTips

アニメーションといえばスクロール連動ですね。

画面をスクロールしていって、特定の要素が画面内に入った時にアニメーションが発生してくれると、いい感じです。

一見難しそうに感じますが、少し前に書いたスティキーヘッダーのTipsを参考に進めれば難しいことはありません。

スクロール連動してアニメーションさせる

アニメーションさせるには、クラスをつける

まずはやりたいことを整理します。

・スクロールし、特定の要素が画面内に入った時にクラスをつける
・クラス付与をトリガーに、要素をアニメーションさせる
・複数の要素のアニメーションに対応する

特定の要素が画面内に入った時にクラスをつける

この部分がメイン、jQueryで処理を書きます。

$(function(){
 $(window).on('scroll',function (){
   let triggerClass = $('.js-trigger');       //トリガーとなるクラス
       animateClass = ('is-show');

   $(triggerClass).each(function(){
     let scroll       = $(window).scrollTop(), //スクロール位置を取得
         triggerTop   = $(this).offset().top,  //指定要素のY座標
         windowHeight = $(window).height();    //ウィンドウの高さ
     // 要素が画面中央に来た時に発火
     if (scroll > triggerTop - windowHeight / 2){
       $(this).addClass(animateClass);
     }
   });
 });
});

スクロールした時に発生するscrollイベントを使います。

トリガーとする要素には、js-triggerというクラス名をつけておき、その要素をチェックしていきます。

js-triggerがついている全ての要素をチェックするには、eachメソッドを使い、ループをかけていく感じですね。

あとは、変数にそれぞれの値を取得し、準備完了。

     let scroll       = $(window).scrollTop(), //スクロール位置を取得
         triggerTop   = $(this).offset().top,  //指定要素のY座標
         windowHeight = $(window).height();    //ウィンドウの高さ

わかりやすいように、codepenでスクロールするとスクロール位置が表示されるようにしました。

実際にクラスを付与する処理はこちら。

     if (scroll > triggerTop - windowHeight / 2){
       $(this).addClass(animateClass);
     }

これで、要素が画面中央に来た時にクラスが付与されます。

windowHightは今開いているウィンドウの高さで、triggerTopは要素のY軸の位置です。

スクロール位置が「指定要素のY位置ー（ウィンドウの高さ/2）」より大きかった時、クラスを付与するというもの。

例えば、js-triggerの位置が1600だった場合、windowHeightの1/2を引かずに表示させるとこんな感じになります。

js-triggerの位置1600、スクロール量1600で、画面中央に要素が来た時にアニメーションしてくれません。

そこで、この例の場合ウィンドウの高さは500なので、250引いてあげると、1350。

スクロール量が1351を超えたら、クラスが付与されてアニメーションがかかるようになります。

こんな感じでちょうど画面の中央部分ですね。

console.logで確認するとわかりやすいので試してみてください。

クラス付与をトリガーに、要素をアニメーションさせる

重要なところはjQueryでやってしまっているので、CSSはアニメーションをかけるだけです。

個別にアニメーションの記述をしてもいいのですが、

アニメーション用のスタイルを予め用意しておいて、あとはクラス名を付け替えるだけの方が簡単です。

具体的には下記のような感じで、アニメーション用のスタイルを作ります。

/*  アニメーションスタイル
-------------------------------------------*/
// 右から左
.slide-left{
 position:relative;
 left:100vw;
 transition: left 860ms ease-in-out;
 &.is-show {
   left:0;
 }
}

// 左から右
.slide-right{
 position:relative;
 right:100vw;
 transition: right 860ms ease-in-out;
 &.is-show {
   right:0;
 }
}

// 下からふわっと表示
.slide-up{
 position:relative;
 top:10%;
 opacity:0;
 transition: top 860ms,opacity 1s;
 &.is-show {
   top:0;
   opacity:1;
 }
}

transitionでうまくアニメーションさせるといい感じになります。

【CSS3】Transition（変化）関連のまとめ - Qiita

あとは、js-triggerと一緒にクラスをつけるだけで完成。

  <div class="item item-1 slide-left js-trigger"></div>

具体的なサンプルを作ってみました。

最近案件で使ったのが、擬似要素に背景をつけて隠しておき、画面内に入ったらアニメーションさせながら内容を表示させるものや、

ボタン要素を目立たせる物など、色々使い道はあると思うので、色々試してみてください。