背景・レイアウト
【scrollReveal.js】スクロール時にオブジェクトが流れるようなアニメーションを実装するスクリプト

data-scrollrevealでアニメーションを制御します。
JavaScriptやスタイルシートに記述するのではなく、data-scrollrevelにルールに沿った文字列を記述します。

Lisence

MITライセンス

※ライセンスが変更される可能性がありますので、使用される際は必ずご自身でご確認ください。

Browser

01.Firefox02.Chrome03.Opera04.Safari09.InternetExplorer10

Tag

アニメーションスクロール

設置方法などの参考ページ

[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js

http://coliss.com/articles/build-websites/operation/javascript/js-scrollreveal.html

スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざま

スクロールで表示範囲に入った際のアニメーションをコードレスで簡単に記述できる「scrollReveal」:phpspot開発日誌

http://phpspot.org/blog/archives/2014/02/scrollreveal.html

PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け

scrollReveal.js - data要素で制御するシンプルなアニメーションライブラリ

http://www.moongift.jp/2014/01/scrollreveal-js-data%E8%A6%81%E7%B4%A0%E3%81%A7%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3/

scrollReveal.js - data要素で制御するシンプルなアニメーションライブラリの使い方、日本語情報はMOONGIFTでチェック。CSS3やJavaScriptによってWebベースのアニメーションは実装しやすくはなっていますが、だからといって誰でも簡単にできるものではありません。単純に右から左へ動かすならまだしも、雰囲気のいい感じに流れていくとなれば細かな制御が必要になります。!。MOONGIFTはオープンソース・ソフトウェアを毎日紹介

Page Top