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

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

コラム

今回のjQueryプラグインの紹介は「ScrollME」です。
ScrollMEは縦に長いページに組み込むとオシャレに見えてくる機能を持っています。
縦に長いページを下にスクロールすると、新しく出てくるコンテンツがアニメーションの動作をして表示してくれます。
アップルのiPhoneのページ(プロダクトタイプのページ)で同じような機能で動作してたこともありますね。
最近はこのようなアニメーション動作を見なくなった気がしますが、そんな感じでオシャレに見えてきます。
数少ない画像やコンテンツにインパクトを持たせるには、便利なjQueryかもしれません。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

ScrollMEサイトイメージ
ScrollMEとは?
ScrollMEとは、jQueryを使ってコンテンツをオシャレに見せるためのjavascript

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

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

ScrollMEの本家サイトと配布サイト
ダウンロードと組み込みサンプル
ScrollME組み込み済みファイルのダウンロード

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

phptemp_scrollme_151030.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

ScrollMEファイルの移動とjQueryファイルの指定

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

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

htmlソースに指定のソース記述

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

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

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP