[JS]シンプルでかっこいいスクロールエフェクトを簡単に実装できるスクリプト -ScrollMe

Post on:2014年6月12日

ScrollMeのデモ

ページ全体がデモになっており、その半分ほどをアニメーションgifにしてみました。
要素がビューポートに入った時、全部が入った時、入っている間中などをトリガーにアニメーションが設定できます。

デモのアニメーション

ヘッダと打ち出しはスクロールするとフェードしながらスライド、Aboutでは各サムネイルがさまざまなアニメーションで表示、Usageではパネルがフェードしながらスライドして表示されています。
Usageより下のコンテンツにもさまざまな楽しいアニメーションが適用されています。

ScrollMeの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部スクリプトとして記述します。

<head>
  ...
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
  <script src='js/jquery.scrollme.js'></script>
</head>

Step 2: スクロールの設定

スクロール時にアニメーションさせる要素に「.animateme」を加え、エフェクトを設定します。

<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>

class: 「.animateme」は必ず設定します。
data-when: アニメーションをいつ始めるか; Enter: ビューポートに入った時、Exit: 全部入った時、View: 入った時から出る時まで
data-from, data-to: アニメーションが始まってから終了する時までのポジション
data-opacity: toに移行するまでの不透明度
data-scale: toに移行するまでのサイズ
data-rotatex, data-rotatey, data-rotatez: toに移行するまでの回転軸
data-translatex, data-translatey, data-translatez: toに移行するまでの距離の軸