スクロールの判定とCSSアニメーションを使ってみる
2018.02.26 Posted by Coding_team
こんにちは、ウェブラボ技術メモです。
今回はjsでスクロールの判定を行い、それに応じてCSSでアニメーションしてみます。
それでは実際に実装していきましょう。
まず、HTMLのbody内でアニメーションを効かせたい要素にクラスを与えます。
■HTML body内
1 |
<div class="animation"><img src="<!--画像ファイル-->"></div> |
次にhead内でjquery本体を読み込ませ、スクロールの判定を行うjsを記述します。
■HTMLhead内
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(window).scroll(function (){ $(".animation").each(function(){ var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 var scroll = $(window).scrollTop(); //スクロールの位置を取得 var windowHeight = $(window).height(); //ウインドウの高さを取得 if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき $(this).addClass('active'); //クラス「active」を与える } }); }); </script> |
これでスクロールの応じて、クラス「active」が与えられるようになりました。
最後にクラス「active」を得たとき、CSSでアニメーションさせるように記述します。
■HTMLhead内 CSS部分
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.animation{ opacity: 0; //不透明度0% -webkit-transform: translate3d(0, 100%, 0); //縦方向の位置を100%下げる transform: translate3d(0, 100%, 0); -webkit-transition: all 1s ease; //1秒間かけて変化させる transition: all 1s ease; } .animation.active{ opacity: 1; //不透明度100% -webkit-transform: translate3d(0, 0, 0); // 縦方向の位置を戻す transform: translate3d(0, 0, 0); } |
対応ブラウザについて確認してみました。
◯ Google Chrome
◯ Firefox
◯ Safari
◯ Opera
◯ Internet Explorer 10+
× Internet Explorer 7、8、9
以上、技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
ノーコードツールとは?Web制作の新常識と活用事例について徹底解説!
2024.08.23
2022.07.28
Webサイト更新時に修正が反映されない時は?キャッシュ削除での解決方法
2022.05.19