ScrollMeは、HTML要素に対して、ズームや回転などのスクロールエフェクトを加えることができるjQueryプラグインです。
今回は、このScrollMeの使い方について解説したいと思います。スクロールエフェクトの動きについては、公式サイトでご確認ください。
ステップ1. ScrollMeのダウンロードと設置
まずは、GitHubからScrollMeをダウンロードして、サーバーに設置します。
必要なファイルは、jquery.scrollme.min.jsのみです。
ステップ2. jQueryとScrollMeの読み込み
</body>の直前で、jQueryとScrollMeのファイルを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/jquery.scrollme.min.js"></script>
jquery.scrollme.min.jsのパスは適宜変更してください。
ステップ3. HTMLのマークアップ
ファイルの設置と読み込みができたら、スクロールエフェクトを加えたいHTML要素を以下のようにマークアップします。
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that's all. </div> </div>
scrollmeというクラスで内包し、動かしたい要素にanimatemeクラスを追加します。
data属性については、以下の通りとなります。
| data-when | エフェクトの開始と終了 |
| data-from & data-to | エフェクト開始時と終了時のポジション |
| data-easing | エフェクトの滑らかさ |
| data-crop | 要素の表示範囲? |
| data-opacity | エフェクト開始前の要素の透過度 |
| data-scale, data-scalex, data-scaley & data-scalez | エフェクト開始前の要素の拡大・縮小 |
| data-rotatex, data-rotatey & data-rotatez | エフェクト開始前の要素の傾き |
| data-translatex, data-translatey & data-translatez | エフェクト開始前の要素の表示位置 |
公式サイトにも説明がありますので、参考にしてください。
あとがき
とても簡単にスクロールエフェクトを仕掛けることができますね。
動きを加えて楽しいサイトにしたい時は、ぜひ導入を検討されてみてください。