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アナリティクスタグは流用しないで下さい。