【PR】を含みます。

フロントエンド

【JavaScript】スクロールに合わせて要素がふわふわ動くアニメーションの実装方法

JavaScript スクロールに合わせて要素がふわふわ動くアニメーションの実装方法

Webサイトにちょっとした動きを加えるだけで、訪れたユーザーの印象は大きく変わります。

特に、スクロールに合わせて要素がふわふわと動くアニメーションは、シンプルながらも目を引く効果的な演出です。

本記事では、JavaScriptを使ってスクロールに連動して要素が縦や横にふんわり動くアニメーションの実装方法を、初心者の方にも分かりやすく解説します。

スクロールに合わせて要素が縦にふわふわ動くアニメーションの実装方法

サンプル

実装コード

HTML
Copy
<div class="float-vertical-element">縦方向にふわふわ動かしたい要素</div>
CSS
Copy
.float-vertical-element {
  position: relative;
  transition: transform 1s ease-out;
  will-change: transform;
}
JavaScript
Copy
(function() {
  // 必要な変数や要素をスコープ内で定義
  const elements = document.querySelectorAll('.float-vertical-element');
  window.addEventListener('scroll', function() {
    requestAnimationFrame(function() {
      const scrollPosition = window.scrollY;
      elements.forEach(function(element, index) {
        // スクロール位置に基づいて縦方向の小刻みな揺れを加える
        const yOffset = Math.sin(scrollPosition * 0.1) * 10; // 縦方向の揺れ
        element.style.transform = 'translateY(' + yOffset + 'px)';
      });
    });
  });
})();

縦の揺れ幅を変更する方法

Math.sin(scrollPosition * 0.1) * 10;の* 10の値を変更することで縦の揺れ幅を調整できます。

掛ける値を大きくすると、縦の揺れ幅が大きくなります。

掛ける値を小さくすると、縦の揺れ幅が小さくなります。

スクロールに合わせて要素が横にふわふわ動くアニメーションの実装方法

サンプル

実装コード

HTML
Copy
<div class="float-beside-element">横方向にふわふわ動かしたい要素</div>
CSS
Copy
.float-beside-element {
  position: relative;
  transition: transform 1s ease-out;
  will-change: transform;
}
JavaScript
Copy
(function() {
  // 必要な変数や要素をスコープ内で定義
  const elements = document.querySelectorAll('.float-beside-element');
  window.addEventListener('scroll', function() {
    requestAnimationFrame(function() {
      const scrollPosition = window.scrollY;
      elements.forEach(function(element, index) {
        // スクロール位置に基づいて横方向の小刻みな揺れを加える
        const xOffset = Math.cos(scrollPosition * 0.1) * 10; // 横方向の揺れ
        element.style.transform = 'translateX(' + xOffset + 'px)';
      });
    });
  });
})();

横の揺れ幅を変更する方法

Math.cos(scrollPosition * 0.1) * 10;の* 10の値を変更することで横の揺れ幅を調整できます。

掛ける値を大きくすると、横の揺れ幅が大きくなります。

掛ける値を小さくすると、横の揺れ幅が小さくなります。

まとめ

本記事では、JavaScriptを使ってスクロールに合わせて要素がふわふわ動くアニメーションの実装方法を解説しました。

縦方向・横方向それぞれのサンプルコードや、揺れ幅の調整方法も紹介しました。

このアニメーションを活用することで、Webサイトに動きやアクセントを加えることができ、ユーザーの注目を集めやすくなります。

ぜひご自身のサイトや制作物に取り入れて、より魅力的なデザインを目指してみてください。

-フロントエンド
-