skrollr.jsで実現！初心者でもできるスクロールに反応するパララックス効果の作り方｜DAD UNION

ウェブデザインは単なる情報の提示以上のものです。今日、私たちは skrollr.js を使って、訪問者を魅了する動的なパララックス効果を実現する方法をご紹介します。特に、スクロールに応じて円が弧を描いて移動するこのエフェクトは、あなたのウェブサイトに一味違う魅力をもたらします。

Contents

CSSを使った円の動きの基礎
HTMLの構造とキーフレームの設定
skrollr.jsでの円のアニメーション実装
skrollr.jsを使ってスクロールすると円が弧を描いて移動するパララックスデモページ
skrollrのソースとドキュメント
まとめ

CSSを使った円の動きの基礎

まず、スクロールすると円が動く基本的なCSSを設定します。fixed-positioning.cssファイルを読み込みます。
ここでは #thing というIDを持つ円を用意し、そのスタイルを定義します。円の大きさ、色、ボーダーの半径など、あなたのサイトに合わせて自由にカスタマイズできます。

<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の構造とキーフレームの設定

次に、HTMLの構造を確認しましょう。ここで重要なのは 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での円のアニメーション実装

このステップでは、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>