スクロールに連動して要素をアニメーションさせる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でうまくアニメーションさせるといい感じになります。
あとは、js-triggerと一緒にクラスをつけるだけで完成。
<div class="item item-1 slide-left js-trigger"></div>
具体的なサンプルを作ってみました。
最近案件で使ったのが、擬似要素に背景をつけて隠しておき、画面内に入ったらアニメーションさせながら内容を表示させるものや、
ボタン要素を目立たせる物など、色々使い道はあると思うので、色々試してみてください。
サポートいただければ嬉しいです。