bl6.jp

ScrollMeというjQueryプラグインを使えば、シンプルでスタイリッシュなスクロールエフェクトを実装することができます。スクロールと同時に要素に設定したアニメーションが連動するような感じになるので、ただ表示するだけでは物足りない時なんかに活用してみたいですね。

[ads_center]

ScrollMeの使い方

使い方はとても簡単で、jQuery本体とプラグインファイルを読み込んだ状態で、以下のようにHTMLをマークアップするだけです。タグ内にdata属性を設定していきます。

<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"
    >
        サンプル
    </div>
</div>

各data属性に色んな値を指定することで、スクロールエフェクトを実装していきます。その他のJSの設定なんかは特に必要としないので、HTML内で完結できる辺りがお手軽でいいですね。

スクロールに連動したアニメーションを取り入れたい時に覚えておきたいプラグインです。

ScrollMe