【CSS/jQuery】スクロールアニメーションを簡単に実装するためのテンプレートを作成した

投稿日:

#139 スクロールアニメーション実装のテンプレートを用意

今回はスクロールアニメーションを簡単に実装するためのテンプレを紹介。waypoints.jsを使用して、Webサイトでよく見かけるスクロールに反応して要素がフェードインするアニメーションを数行のコードで実装するためのテンプレートコードを掲載。

 

目次

 

内容

scrollAnimation

今回は上のgifのような、ユーザーのスクロールに反応して要素がフェードインするアニメーションを作成する。

 

使用ライブラリとバージョン

  • jQuery v2.1.4
  • jQuery Easing v1.3
  • Waypoints - 4.0.0 の jquery.waypoints.min.js

 

waypoints.jsとは

waypoints.js

http://imakewebthings.com/waypoints/

waypoints.jsは、要素のスクロール位置に反応して色々できるライブラリ。これで要素にクラスを付けたり取ったりしてCSSアニメーションを当てていく。

複数要素に対して同じクラスでアニメーションを当てることができる点で、今回は生JSではなくjQuery依存のライブラリを使用する。また、waypoints.jsはjQueryの他にzepto.jsというjQuery互換のスマホ向け軽量ライブラリにも対応しているが、今回はjQueryで行う。

 

 

流れ

全体の流れとしては、

  1. waypoints.jsのHPからファイルをダウンロード
  2. jQuery、jQuery EasingもjQueryサイトからダウンロード
  3. jquery.min.js、jquery.easing.1.3.js、jquery.waypoints.min.jsをscriptタグでセット
  4. アニメーション用のCSSをコーディング
  5. jQueryコーディング
  6. アニメーションさせたい要素にCSS設定したクラスを付与

ざっくりとこの流れ。コードは全部以下にテンプレートを用意しているのでコピペで大丈夫。

 

waypoint.jsのHPからファイルをダウンロード

http://imakewebthings.com/waypoints/

ここのDownloadをクリックもしくはGithubからファイルをダウンロードする

./lib/jquery.waypoints.min.jsがあるのでこれを使用する。

 

jQuery、jQuery EasingもjQueryサイトからダウンロード

jQuery:https://jquery.com/download/

jQuery Easing:https://github.com/gdsmith/jquery.easing

それぞれダウンロード。めんどくさければCDNで。

 

jquery.min.js、jquery.easing.1.3.js、jquery.waypoints.min.jsをscriptタグでセット

適当なディレクトリにindex.htmlを作成して以下をコピペ。

index.html

 

jQueryやらを読み込ませるのに加えて、これから作成するanimate.cssというCSSファイルとscrollAnimation.jsファイルも書いておいた。htmlもcssもjsも今回は全て同じ階層においているのでパスは「./」になっている。

 

アニメーション用のCSSをコーディング

index.htmlを作成したディレクトリにanimate.cssを作成して以下をコピペ。

animate.css

 

これはAnimate.css(https://daneden.github.io/animate.css/)というライブラリから今回必要な部分だけをパクってきている。本家を使えばさらに色々なアニメーションを加えられる。

 

jQueryコーディング

同様のディレクトリにscrollAnimation.jsを作成して以下をコピペ。

scrollAnimation.js

 

このコードで要素からクラスを付けたり取ったりして、CSSを変化させることでアニメーションが起こる。

 

アニメーションさせたい要素にCSS設定したクラスを付与

あとはindex.htmlで、アニメーションさせたい要素に対して

このような形で「animate-box」クラスと、「data-animate-effect」属性を指定するだけ。

最初のgifのやつをそのまま以下に載っける。

 

index.html

 

 

まとめ

Bootstrapで用意されていたアニメーションを参考にして、スクロールアニメーションの部分のみを取り出した。正直他にもライブラリはあるが、Animete.cssとかjQuery Easingとかwaypoint.jsは全て初見だったのでいろんなもんがあるんだなと思った。

以上ありがとうございました。

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.