JavaScript

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

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

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>

skrollr.jsを使ってスクロールすると円が弧を描いて移動するパララックスデモページ

実際のデモを見たい方は、以下のリンクからアクセスしてください。実際の動きを確認し、自分のサイトにどのように応用できるかを考える良い機会です。

skrollr.jsを使ってスクロールすると円が弧を描いて移動するパララックスデモページ

skrollrのソースとドキュメント

skrollr.jsについてもっと詳しく知りたい方は、以下の公式ドキュメントをご覧ください。こちらではより詳細な情報や、さまざまな応用例が紹介されています。

skrollr – parallax scrolling for the masses

まとめ

この記事では、skrollr.jsを用いたパララックス効果の基本的な実装方法をご紹介しました。視覚的に魅力的なウェブサイトを作るための一歩として、是非この技術を活用してみてください。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。