HTML要素にスクロールエフェクトを実装するなら「ScrollMe」は簡単

画面のスクロールとともに、手軽にエフェクト動作を指定できる「ScrollMe」というjQueryプラグインが便利だったので紹介です。

こんな感じのスクロールエフェクトを手軽に実装することができます。

ScrollMeとは

ScrollMeは、WEBページにシンプルなスクロールエフェクトを実装するjQueryプラグインです。

ScrollMeの利用方法はとても簡単で、1行のJavaScript（jQuery）コードも必要とせずに、倍率、回転、移動、透明度などを利用するアニメーションエフェクトを実装することができます。

基本的に、スクリプトさえ読み込んでしまえば、以下のようなデータ属性を用いたマークアップをするだけで、HTML要素にスクロールエフェクトを付加することができます。

<!-- scrollmeクラスで囲む -->
<div class="scrollme">
  <!-- animatemeクラスを指定してデータ属性の設定 -->
  <div
    class="animateme"
    data-when="enter"
    data-from="0.5"
    data-to="0"
    data-opacity="0"
    data-translatex="-200"
    data-rotatez="90"
>
    HTML要素に設定を書くだけ。
  </div>
</div>

上記コードを書き込んだ動作が上のようになります。

ScrollMe利用の主な手順

ScrollMeは、主に以下の手順で利用することができます。

ScrollMeスクリプトのダウンロード＆設置
スクリプトを呼び出す
アニメーションを追加するHTMLを記入する

たったこれだけです。思った以上に簡単でした。

以下で、それぞれの手順について説明します。

ScrollMeスクリプトのダウンロード＆設置

まずは、scrollmeからZIPファイルをダウンロードします。

「scrollme-master.zip」というファイルがダウンロードされるので解凍します。

そして、中にある以下のファイルを

jquery.scrollme.min.js

以下のような場所に設置します。

プロジェクトフォルダ/js/jquery.scrollme.min.js

WordPressで利用する場合は、子テーマの中にjsフォルダを作成してスクリプトファイルを設置してください（※設置位置はあくまで一例です）。

スクリプトを呼び出す

通常サイトで利用する場合は、以下のようにフッターの</body>タグ手前あたりにjQueryライブラリとともに以下のように呼び出してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src='path/js/jquery.scrollme.js'></script>
</body>

WordPress子テーマで呼び出すとき

WordPressから利用する場合は、</body>タグ手前あたりに以下のように書きます。

<!-- jQueryが使われていないテーマのときコメントを解除 -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.scrollme.min.js"></script>

親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()の代わりに、get_template_directory_uri()を使用してください。

WordPressの作法に則って、厳密に書くのであれば、functions.phpに以下のように書いても良いかもしれません。

function ex_enqueue_scripts() {
  //jQueryの読み込み
  //wp_enqueue_script('jquery');
  //ScrollMeスクリプトの呼び出し
  wp_enqueue_script( 'scrollme-js', get_stylesheet_directory_uri() . '/js/jquery.scrollme.min.js', array( 'jquery' ), false, true );
}
add_action( 'wp_enqueue_scripts', 'ex_enqueue_scripts' );

アニメーションを追加するHTMLを記入する

あとは、以下のようなコードをコンテンツ内に書いていけばOKです。

透過度のエフェクト例

<div class="scrollme">
  <div class="animateme" 
       data-opacity="0"
       data-to="0"
       data-from="0.5"
       data-when="enter">透過度のエフェクト</div>
</div>

スケールのエフェクト例

<div class="scrollme">
  <div class="animateme"
       data-scale="0"
       data-to="0.05"
       data-from="0.55"
       data-when="enter">スケールのエフェクト</div>
</div>

回転のエフェクト例

<div class="scrollme">
  <div class="animateme"
       data-rotatez="-90"
       data-rotatey="90"
       data-rotatex="-90"
       data-to="0.1" data-from="0.6"
       data-when="enter">回転のエフェクト</div>
</div>

移動のエフェクト例

<div class="scrollme">
  <div class="animateme"
       data-translatey="400"
       data-translatex="400"
       data-to="0.15"
       data-from="0.65"
       data-when="enter">移動のエフェクト</div>
</div>

scrollmeクラスの指定

animatemeクラスは、scrollmeクラスでラップせずに同階層にクラス指定しても利用することができます。

<div class="scrollme animateme" data-xxx="xxx"></div>

scrollmeクラスと、animatemeクラスは、必ず2つ指定されていないと利用できません。

ScrollMeオプション

ScrollMeは、HTMLの属性にdata-xxxxといったような属性を追加することで利用できます。

主なオプションは以下になります。

when

スクロールの開始と、終了時を指定します。

enter:コンテナがビューポートに入ったとき
exit:コンテナのボトムがビューポートに入ったとき
view:ビューポートに入った時から出る時まで（ページ上部で最初から表示されている時に利用）
span:コンテナがビューポートに入った時からボトムが出るまで

from & to

アニメーション開始時と、終了時のポジションです。

0～1の値を指定します。

easing

アニメーションのイージング機能の利用。

easeout:ゆっくり終わる（デフォルト）
easein:ゆっくり始まる
easeinout:ゆっくり始まってゆっくり終わる
linear:イージングを利用しない（一定）

opacity

アニメーション開始前の要素の透明度を設定します。

0～1の値を指定します。

scale, scalex, scaley & scalez

アニメーション開始前の要素の拡大や縮小度合いを設定します。

rotatex, rotatey & rotatez

アニメーション開始前の要素の回転角度を設定します。

角度を数字で入力します。

translatex, translatey & translatez

アニメーション開始前の要素の移動位置を設定します。

まとめ

ScrollMeを利用すると、スクロールインなどをイベントとして、アニメーションエフェクトをかなり手軽に実装できます。

アニメーションを利用すると、当サイトのような読み物系のブログなどでは、アニメーション終了まで文字が読めなくなるので、あまり適さないかもしれません。

ただ、インパクトが重要な、おしゃれ系のサイト等で効果的に使うと、印象の強いサイトが作れるかもしれません。

サイト ScrollMe

ダウンロード nckprsn/scrollme – GitHub