jQueryプラグイン「Scroll me」を使用したスライドエフェクトを試してみた話

はじめに

Scroll me」とは、Webページに単純なスクロール効果の追加ができるjQueryプラグインです。

プラグインの設置をした後はhtmlファイルで挙動の調整ができる(jQueryを編集する必要が無い)ので、非常に操作がしやすいのが特徴です。

今回は画像を右から左へスライドさせるエフェクトに特化して試していますが、スライド以外にも「透過度を変更させる」「拡大・縮小させる」「回転させる」等のエフェクトを実装することができます。

やりたいこと

  • 「Scroll me」を使用したスライドエフェクトの実装
  • オプション値を変更させた際の挙動変化の確認

「Scroll me」の実装手順は以下のとおりです。

「Scroll me」のダウンロード

画像

Scroll me」へアクセスして、右上の「Download on GitHub」をクリック。

画像

GitHubの「Code」をクリックして、「Download ZIP」からファイルをダウンロードします。

「Scroll me」ファイルの格納

画像

ダウンロードした「scrollme-master」のファイル一覧です。
必要になるのは、この中の「jquery.scrollme.min.js」です。

画像

jquery.scrollme.min.js」を(一般的には)jsフォルダ内に格納します(上の画像は私のサイトではこのような構造にしています)。

htmlファイルに「Scroll me」を読み込ませる

格納したjquery.scrollme.min.jsを呼び出すため、htmlファイルに以下を追記します。
追記する場所は、</head>の上の行か、</body>あたりに挿入します。

HTML

・・・・・・
<script src="js/jquery.scrollme.js"></script>
</head>

jQueryライブラリを読み込ませていない場合は、jQueryライブラリも挿入して下さい(以下のようになります)。

HTML

・・・・・・
<script src="js/jquery.scrollme.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

htmlへ書き込んで挙動を制御する

ここまでできれば準備完了です。あとはhtmlのエフェクトを掛けたい箇所に書き込んでいくだけです。

HTML(例)

<div class="scrollme">
    <div class="animateme" 
    data-translatex="-770"
    data-from="1"
    data-to="0"
    data-when="enter"><p>テキストテキスト</p>
    </div>
</div>

「scroll me」の仕様として、エフェクトをかけたい箇所にはdiv class="scrollme"div class="animateme"で囲む必要になります。

それ以下のdata-translatex等は挙動を制御するオプションになります。
例えば、テキストをスライドさせたい場合はdata-translatex="1060"のように記述します。

デモはこちら

スライドエフェクトをさせるオプション

「Scroll me」のエフェクトには様々なオプションがありますが、今回は対象をスライドさせる方法のみ紹介します。

対象をスライドさせたい時はdata-translatexを使います。

data-translatex="-770"のように書き、数値はピクセルになります。
この場合は、スクロールすると、対象物が-770ピクセル移動する事になります。

数値が正の場合は下にスクロールするごとに右方向へスライドし、負の場合は左方向へスライドします。

デモはこちら

アニメーションの開始・終了位置に関するオプション

アニメーションの開始・終了位置を制御する場合はdata-whenを使用します。

対象となるコンテナが、ビューポートのどの部分に入った時に挙動を開始するかを制御します。

data-when="enter" コンテナの上部がビューポートに入るときから出るときまで
data-when="exit" コンテナの下部がビューポートに入るときから出るときまで
data-when="span" コンテナの上部がビューポートに入るときから下部が出るときまで

公式サイトではこのように書かれていましたが、文章だけではピンと来なかったのでそれぞれのデモを作ってみました。

デモはこちら

スクロール境界内の開始・終了位置に関するオプション

スクロール境界内の開始・終了位置に関するオプションはdata-fromdata-toを使います。

公式サイトでは、「アニメーション化されたプロパティは、そのfrom位置までデフォルト値に設定され、スクロールがそのto位置に進むにつれて、オプションで定義された値に遷移します。」と書かれています。

値は0~1を使って制御します。

data-fromは、1に近づけるほどエフェクトの開始位置が上(遅く)になり、data-to0に近づけるほどエフェクトの終了位置が下に(早く)なるようです。

つまり、data-fromが起点で、data-toが終点となるのですが、これも文章だけではピンと来なかったのでデモを作ってみました。

デモはこちら

イージング機能に関するオプション

エフェクトのイージングについてはさらっと紹介だけさせて下さい。

イージング機能に関するオプションは以下のとおりです。

data-easing="easeout" 突然開始し、段階的に停止します(デフォルト)
data-easing="easein" 徐々に開始し、突然停止します
data-easing="easeinout" 開始し、徐々に停止します
data-easing="linear" 緩和なし