HTML要素にスクロールエフェクトを追加できるjQueryプラグイン「ScrollMe」

HTML要素にスクロールエフェクトを追加できるjQueryプラグイン「ScrollMe」

HTML要素にスクロールエフェクトを追加できるjQueryプラグイン「ScrollMe」

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 エフェクト開始前の要素の表示位置

公式サイトにも説明がありますので、参考にしてください。

あとがき

とても簡単にスクロールエフェクトを仕掛けることができますね。

動きを加えて楽しいサイトにしたい時は、ぜひ導入を検討されてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です