Googleページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト[ScrollReveal]を紹介します。以下の公式配布サイトのデモを見れば何が起きているのか一目瞭然ですね。http://scrollrevealjs.org要素がviewportに現れたタイミングで様々な表示処理を施すことができます。各エフェクトや表示のタイミングはオプション設定で詳細に指定可能です。[ScrollReveal]の使い方[ScrollReveal]の導入方法はカンタンです。GitHubから必要なファイルをダウンロードしてきます。ZIP」というボタンをクリックすればスグにダウンロードがはじまります。入手したzipファイルを解凍するとフォルダの中に「scrollreveal.min.js」が入っています。このjsファイルをHTMLの適当な箇所で読み込みます。src="/js/scrollreveal.min.js"></script>実は「ScrollReveal」はCDNでも配信されています。手抜きをしたいなら上記コードの代わりに以下のコードを使いましょう。src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.3/scrollreveal.min.js"></script>CDNで高速配信されるのでコチラの方が便利かもしれませんね。どちらの方法でも構いませんが、こうしてjsファイルを読み込ませたら、ついでに[ScrollReveal]を初期化するためのコードも記述してしまいましょう。以下のコードを書き加えればOKです。scrollReveal();sr.reveal('.sample');</script>ここではクラス名「class="sample"」を指定した要素に処理を施しています。HTMLは次のようになりますね。class="sample"></div>基本的にはこれで完了。コードで追記が必要ですが、ここまでの導入方法でも充分に活用できるクオリティです。http://scrollrevealjs.org最後に実はこのスクリプト、弊社のウェブサイト(2016年1月現在)でも所々で利用していますが、お気付きでしたでしょうか。非常に高機能で、jQuery不要で利用可能。動きもスムーズですので自信を持ってオススメできるプラグインです。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【PhotoShop】各ソーシャルメディア用PSDテンプレートが無料で配布されています。【JavaScript】ウィンドウを閉じるリンクを実装する方法。【iOS】Safariの表示領域を最大にする[minimal-ui]の設定方法。