背景・レイアウト
【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等の最新技術情報をお届け

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/

Page Top