ブラウザをスクロールすると各コンテンツがアニメーションするjQueryプラグイン「ScrollME」の組み込み

ブラウザをスクロールすると各コンテンツがアニメーションするjQueryプラグイン「ScrollME」の組み込み

ScrollMEとは、jQueryを利用してコンテンツの各部分にアニメーション動作をするようにするためのjavascriptです。
かなり細かい設定が出来、自由に好きなコンテンツ部分だけにアニメーション動作をするように指定出来ます。

アニメーションの内容は自由に決めることが出来ますが、ScrollMEの本家サイト内に指定出来るオプション項目がたくさんあります。
細かい設定については本家にてご確認下さい。

• ScrollME本家
• ScrollMEのGitHub

WEBサイトテンプレート（PHP）に組み込んだファイルをアップしていますので、ダウンロードしてお使い下さい。

phptemp_scrollme_151030.zip

WEBサイトテンプレート（PHP）のトップページに組み込んだサンプルページをアップ致しました。

• 組み込み済みサンプルページ

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. GitHubからダウンロードしたファイルの中の「 /jquery.scrollme.js 」をjsフォルダに移動させます。
2. htmlソースにjsファイルを読み込ませ、指定のソースコードを書き込みます。
3. それぞれのファイルをアップします。

ということで、上記の内容を以下で詳細解説致します。

本件で読み込ませるjsファイルは、「 /jquery.scrollme.js 」とjQueryファイルです。
サンプルindex.php内の28行目あたりに書き入れています。

その他に読み込ませるファイルはありません。
また、今回はCSSファイルを修正したりする必要もありません。

本家サイト内にあるサンプルを転載しますと、以下のコードをそのままコンテンツに充てがうような感じで書き込んで下さい。

<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="scrollme"で囲っている部分がアニメーションのかかるコンテンツ範囲となります。
ですので、この範囲を中途半端に囲ってしまうと、変なアニメーションになることがあります。

当サイトのサンプルページでは、classの指定にscrollmeとanimatemeを一緒に記述しています。
サンプルでは分けて書かれていますが、どちらのclassも同列に書いても問題なく動作します。

そうしましたら、jsファイルと当該のhtmlファイルをアップして下さい。
細かいCSS装飾やカスタマイズ性がないため、とても簡単に組み込めます。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_151020.zip 」です。
• 全ページ共通のフッター部分にもScrollMEのhtmlソースを書き込んでいますが、動作するのはjQueryを読み込ませているindex.phpのみです。
• スマートフォンからの閲覧では、うまくコンテンツサイズ調整をしなければブラウザバグが発生します。
  当サイトのサンプルをスマホから見ると若干のズレが出ますので、コンテンツサイズを調整、若しくはアニメーションの幅を調整して下さい。

WEBサイトテンプレート（PHP）を元に解説致しましたが、基本的にはどのようなサイトでもそのまま活用出来ると思います。
極端な話、WordPressのようなCMSにもすぐに組み込むことが出来ます。
WordPressなどを運営されている方は、これらの断片的な動的な要素を組み込むと、また一つ雰囲気が変わるのかもしれません。

そういえば、jQueryのようなファイルを読み込ませるとSEO的にネガティブだと言われてることがあるようです。
外部ファイルが異常に重かったり、読込量が多いことなどが原因で先述のことが語られているのだと思いますが、そのようなことは決してありません・・・と思います。
jQueryがSEO的にネガティブになるなんてことはありえないことと考えています。

もし、jQueryを組み込んで順位が落ちたという時は、jQueryに要因があるというよりサイトの状態が好ましい状態になってないということが原因になると思われます。
そんな時は、サイト内を見直して下さいね。
そして、出来る限りコンテンツが充実する方向に持っていきたいところですので、根気強く色々な挑戦をしてみて下さいね。

執筆 : 清水 隼斗