プログラミング

【PR】を含みます。

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

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

この記事では、JavaScriptでスクロールに合わせて要素がその場でふわふわ動くアニメーションの実装方法を紹介します。

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

サンプル

実装コード

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

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

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

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

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

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

サンプル

実装コード

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

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

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

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

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

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
アイコン画像

もみじ

HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。

講座内容は実践で使用するものが多く、実務でも役立つ内容でした。

講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。
アイコン画像

もみじ

JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。

初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-