jQuery とCSS を組み合わせてスクロールをしたら要素を動かす

jQuery とCSS を組み合わせて
スクロールをしたら要素を動かす

jQueryとCSSアニメーションを組み合わせてスクロールをしたら要素を動かす方法をご紹介します。

スクロールをしたら要素を動かす仕組み

HTML 内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け、jQuery 側で動くきっかけの動作（スクロールなど）をしたら、アニメーション用のCSS のクラス名が付与されるという指定を行う。

（例）スクロールをしたらふわっと出現させる
動くきっかけの起点となるクラス名「fadeUpTrigger」の位置までスクロールをしたら、「fadeUp」というアニメーション用のCSSのクラス名を付与して動かす。

See the Pen 「画面が読み込まれた後に動く場合」と「画面がスクロールされたら動く場合」の動くきっかけの指定をまとめる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

HTMLの準備

① HTML内の動きをつけたい要素に動くきっかけの起点となるクラス名を付与。

※Class名は自由に設定可能。今回はふわっと出てくる動きをつけたいのでfadeUpTriggerと指定。
※すでにClass名が記述されているものは前に半角スペースを入れて追加。

<div class="box fadeUpTrigger"></div>

② 自作のCSSをhead終了タグ直前に読み込む。（※ここでは仮にファイル名を3-2-3-1.cssとしています。）

<link rel="stylesheet" type="text/css" href="css/3-2-3-1.css">
</head>

③ jQuery本体と自作のJavaScriptファイルを</body>直前に読み込む。

まず、jQuery本体をコンテンツ・デリバリー・ネットワーク（CDN）を利用して</body>直前に読み込む。
ソースコードは（https://code.jquery.com/）から「minified」を選択してコピー。
※CDNを使うことで自分のPC にファイルをダウンロードしなくてもライブラリを利用することが可能になる。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</body>

次に自作のJavaScriptファイルをjQuery本体の下に設置する。（※ここでは仮にファイル名を3-2-3-1.jsとしています。）

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/3-2-3-1.js"></script><!--←本体の下に設置しないと動きません！-->
</body>

自作のJavaScriptファイル内に動きの指定を書く

クラス名 fadeUpTriggerの-50pxの位置までスクロールをしたら（ページ内リンクで別ページに飛んだ時のために、「画面が読み込まれたら」という記述も追加）fadeUpというクラス名を付与して動かすという記述を自作のJavaScriptファイル内に書く。

その際、動きのきっかけとなるアニメーション名を関数で定義（ここではfadeAnimeという名前で定義）。
関数でまとめることで、「ふわっ」と出現する以外の別の動きも追加でき、まとめて動かすことが出来る。

// 動きのきっかけとなるアニメーションの名前を定義
function fadeAnime(){

//ふわっと動くきっかけのクラス名と動きのクラス名の設定
$('.fadeUpTrigger').each(function(){ //fadeInUpTriggerというクラス名が
　　var elemPos = $(this).offset().top-50; //要素より、50px上の
　　var scroll = $(window).scrollTop();
　　var windowHeight = $(window).height();
　　if (scroll >= elemPos - windowHeight){
　　$(this).addClass('fadeUp');
　　// 画面内に入ったらfadeInというクラス名を追記
　　}else{
　　　$(this).removeClass('fadeUp');
　　// 画面外に出たらfadeInというクラス名を外す
　　}
　　});

//関数でまとめることでこの後に違う動きを追加することが出来ます
$('.fadeDownTrigger').each(function(){ //fadeInDownTriggerというクラス名が
　　var elemPos = $(this).offset().top-50; //要素より、50px上の
　　var scroll = $(window).scrollTop();
　　var windowHeight = $(window).height();
　　if (scroll >= elemPos - windowHeight){
　　$(this).addClass('fadeDown');
　　// 画面内に入ったらfadeDownというクラス名を追記
　　}else{
　　　$(this).removeClass('fadeDown');
　　// 画面外に出たらfadeDownというクラス名を外す
　　}
　　});


}//ここまでふわっと動くきっかけのクラス名と動きのクラス名の設定

// 画面をスクロールをしたら動かしたい場合の記述
  $(window).scroll(function (){
    fadeAnime();/* アニメーション用の関数を呼ぶ*/
  });// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
  $(window).on('load', function(){
    fadeAnime();/* アニメーション用の関数を呼ぶ*/
  });// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

※スクロールをさせて1度だけ動かしたい場合

スクロールをして何度も動かしたくない場合は jQuery内の指定の中にある else を削除すると1度だけ動くようになります。

【削除する場所】

else{
	$(this).removeClass('fadeUp');// 画面外に出たらfadeUpというクラス名を外す
}

See the Pen スクロールをしたら一度だけ動く by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

自作のCSSファイル内にアニメーション用のCSSを書く

①　ふわっと出現する動くきっかけの起点となるクラス名「fadeUpTrigger」に「透過0（opacity:0;）」の指定をする。
※「ふわっ」と出現する動きには、透過をあらかじめつけないと　一度表示→非表示→表示というカクカクした動きになる。

.fadeUpTrigger{
opacity: 0;
}

②　スクロールをしたらjQueryで付与されるアニメーション用のCSSのクラス名（fadeUp）に「透過していた要素を下から出現」する指定を行う。

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

まとめ：要素をスクロールをさせ、かつ画面が読み込まれた際に動かすサンプル例

おまけ：「最低限覚えておきたい現れ方」をスクロールをさせて動かすサンプル例

サイトで紹介をしている「最低限覚えておきたい現れ方（https://coco-factory.jp/ugokuweb/move02-cat/necessary/）」25パターンの動きをスクロールをさせて動かすサンプル例。
「ふわっ」と出現する動き以外の、別の動きも追記して、関数でまとめて動かしています。

See the Pen 4-14 スクロールをしたら「最低限覚えておきたい現れ方」で動くおまけのサンプル by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

その他の動きのきっかけ：クリックしたら要素を動かす

「動くきっかけの起点となるクラス名（例：zoomInClickTrigger）」をクリックするとアニメーションする
「CSS のクラス名（例：zoomIn）」が付与されるという記述を書く。
クリックすると、1度だけアニメーションが実行される。

何度もクリックしてアニメーションさせたい場合は、「クリックするとアニメーションするCSS のクラス名（例：zoomIn）」というクラス名が付与され、アニメーションが終了したらクラス名を取り除く、という処理を加える。

See the Pen クリックした要素を動かす場合 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

その他の動きのきっかけ：マウスが乗ったり外れたりしたら要素を動かす

「マウスが乗った時（mouseenter）にアニメーションするCSS のクラス名①を付け、アニメーションするCSS のクラス名②を外す」

「マウスが外れたら（mouseleave）アニメーションするCSS のクラス名②を付けてアニメーションするCSS のクラス名①を外す」という処理を行う。

スマートフォンにも対応する場合、mouseenterの後に「半角スペース＋touchstart」を、mouseleaveの後に「半角スペース＋touchend」を追記。

※簡単な動きはCSS のhover を使えば実現できますが、このやり方は複雑な処理をしたいときに活躍します。

See the Pen マウスが乗ったり外れたりしたら動く場合 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

その他の動きのきっかけ：クリックしたら、別の要素を動かす

「動くきっかけ」となる要素に「クラス名1（今回はbtn）」を付与し、クリックすると動く要素に「クラス名2（今回はhide_area）」を付与。※クラス名は自由に設定可能。

JavaScriptファイルの中に
「動くきっかけの起点となるクラス名1（btn）」をクリックすると、btn に「disp_none」というクラスが付与されて要素が消え、「クリックをされたら動く要素のクラス名2（hide_area）」に「fadeUp」というクラス名が付与されて出現するという記述を書く。

出現したり消えたりするアニメーションはCSSで指定し、制御する。

See the Pen クリックすると、別の要素が動く場合 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.