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

スクロールしてビューポートに要素が表示された時に、さまざまなアニメーションを適用するjQueryのプラグインを紹介します。

スクリプトは外部ファイルを加えるだけで、アニメーションはHTMLに記述する簡単実装です。アニメーション用に他のJSやCSSは必要ありません。

サイトのキャプチャ

ScrollMe
ScrollMe -GitHub

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に移行するまでの距離の軸

sponsors

top of page

©2018 coliss