スクロールするとパララックスする方法【skrollr.js】 DAD UNION

skrollr.jsを使ってスクロールすると円が弧を描いて移動する、パララックスする方法をご紹介します。

Contents

スクロールすると円が弧を描いて移動するCSSの記述
スクロールすると円が弧を描いて移動するHTMLの記述
skrollr.jsを使ってスクロールすると円が弧を描いて移動するJavaScriptの記述
skrollr.jsを使ってスクロールすると円が弧を描いて移動するパララックスデモページ
ソース元：skrollr

スクロールすると円が弧を描いて移動する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>