視差効果(パララックス)を簡単に導入できるJavaScript「skrollr」

視差効果(パララックス)を簡単に導入できるJavaScript「skrollr」サンプル 昨今流行っている視差効果(パララックス)を導入してみたい人は多いのではないでしょうか。
Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。

使用方法 Prinzhorn/skrollrからファイル一式をダウンロード。
<script type="text/javascript" src="skrollr.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
<link href="skrollr.css" rel="stylesheet" type="text/css" />

あとはdivの中にdataで高さとエフェクトを指定していきます。
<div data-0="" //高さ0px
data-100="opacity:1;top:10%;transform:rotate(0deg);transform-origin:0 0;" //高さ100pxの時に表現
data-500="opacity:0;top:-10%;transform:rotate(-90deg);"> //高さ500pxの時の表現
</div>

サンプルがいろいろskrollr/examplesにありますので、エフェクトなどの参考にしてみて下さい。
背景も組み合わせると面白い表現ができると思います。

視差効果(パララックス)を簡単に導入できるJavaScript「skrollr」サンプル

sponsors

「視差効果(パララックス)を簡単に導入できるJavaScript「skrollr」」をシェアする

記事作成:
記事URL:

TOP > > > 視差効果(パララックス)を簡単に導入できるJavaScript「skrollr」