もくじ
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サイトに動きやアクセントを加えることができ、ユーザーの注目を集めやすくなります。
ぜひご自身のサイトや制作物に取り入れて、より魅力的なデザインを目指してみてください。
リンク
リンク
