skrollr.jsを使ってスクロールすると円が弧を描いて移動する、パララックスする方法をご紹介します。
Contents
スクロールすると円が弧を描いて移動するCSSの記述
※fixed-positioning.cssファイルを読み込みます。スクロールで移動する円(#thing)を用意しました。必要に応じて変更して下さい。
<link href="fixed-positioning.css" rel="stylesheet" type="text/css" /> <style type="text/css"> h1{ text-align: center; font-size: 18px; padding: 20px 0; } #thing { width:80px; height:80px; border-radius:40px; background:#00A3D9; } </style>
スクロールすると円が弧を描いて移動するHTMLの記述
※スクロールで移動する円(id=”thing”)を用意し、キーフレーム(data-0~data-10000)間のスクロールした時の値を設定します。必要に応じて変更して下さい。
<h1>下にスクロールすると青い円が弧を描いて移動します。一番下まで移動するとページ上部に戻ります。</h1> <div id="thing" data-0="left[cos]:10%;top[sin]:10%;" data-10000="left:90%;top:90%;"></div>
skrollr.jsを使ってスクロールすると円が弧を描いて移動するJavaScriptの記述
※skrollr.jsファイルを読み込みます。skrollr.init({オプション})を記述します。id=”thing”が弧を描く様にsin・cosで処理します。ページの一番下までスクロールするとページトップに移動します。
<script type="text/javascript" src="skrollr.js"></script> <script type="text/javascript"> skrollr.init({ easing: { sin: function(p) { return (Math.sin(p * Math.PI * 2 - Math.PI/2) + 1) / 2; }, cos: function(p) { return (Math.cos(p * Math.PI * 2 - Math.PI/2) + 1) / 2; }, }, render: function(data) { //Loop if(data.curTop === data.maxTop) { this.setScrollTop(0, true); } } }); </script>
skrollr.jsを使ってスクロールすると円が弧を描いて移動するパララックスデモページ
skrollr.jsを使ってスクロールすると円が弧を描いて移動するパララックスデモページ
ソース元:skrollr
以下がソース元です。
skrollr – parallax scrolling for the masses
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告