【jQuery】スクロール量に連動したアニメーションを追加する［ScrollMe］の使い方

ウェブサイトに「スクロール・エフェクト」を導入したい。

そんな要望を叶えるためのオススメのjQueryプラグイン［ScrollMe］を紹介します。

このプラグインをオススメする最大の理由は、わずか1行のJavaScriptのコードも必要なく機能すること。

基本的にはスクリプトファイルを読み込むだけで、あとはカスタムデータ属性によるマークアップで設定していきます。
ほんとうにJavaScriptのコードは1文字も書きません。

公式サイトにてサンプルと実装方法が紹介されていますね。

ScrollMe : http://scrollme.nckprsn.com

詳しい使い方は以下より。

［ScrollMe］のダウンロード

まずはGitHubからスクリプト本体ファイルをダウンロードします。

https://github.com/nckprsn/scrollme

上記サイトより、右上にある「Download ZIP」というボタンをクリックするとスグにダウンロードがはじまります。

ファイルを読み込む

入手した［jquery.scrollme.min.js］とjQueryの本体をHTMLの任意の箇所で読み込みます。
今回は手っ取り早くGoogleのCDNにホストされている［jquery.min.js］を使うことにしましょう。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='jquery.scrollme.js'></script>

こうして必要なファイルを読み込んでしまえば既に準備は終了。
あとはスクロール・エフェクトを効かせたい要素をマークアップしていけばOKです。

［ScrollMe］を効かせたい要素をマークアップする。

基本的には［ScrollMe］を効かせたい要素をclass="scrollme"で囲み、次に動かしたい要素に対してclass="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"
	>
	ここにコンテンツを挿入する
	</div>
</div>

コード内のdata-xxxの箇所が所謂「カスタムデータ属性」です。

オプション設定

以下、カスタムデータ属性で指定するオプション一覧になります。

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

設定方法も簡単ですね。初心者の方でも安心して使えると思います。

最後に

スクロール量に連動して好みのアニメーション処理を追加できる［ScrollMe］を紹介しました。
ぜひお試しください。

ScrollMe : http://scrollme.nckprsn.com