フロントエンドの UI エフェクトを作成する場合、スクロール位置に応じて要素をアニメーション化することは非常に一般的なデザインです。通常、これを実現するにはサードパーティのプラグインまたはライブラリを使用します。このチュートリアルでは、純粋な JavaScript と CSS を使用してこれを行う方法を説明します。 まず効果をプレビューします。 アニメーションを実装するために CSS を使用し、必要なスタイルのトリガーを処理するために JavaScript を使用します。まずはレイアウトを作成しましょう。 レイアウトを作成するまず HTML を使用してページ レイアウトを作成し、次にアニメーション化する必要のある要素に共通のクラス名を割り当てます。後続の JavaScript は、このクラス名を使用してこれらの要素を見つけます。ここでは、スクロールに基づいてアニメーション化する必要がある要素にクラス名 js-scroll を割り当てます。HTML コードは次のとおりです。 <セクションクラス="スクロールコンテナ"> <div class="scroll-element js-scroll"></div> <div class="scroll-caption">このアニメーションは上からフェードインします。</div> </セクション> CSSスタイルを追加するまずは、シンプルなフェードイン アニメーション効果から始めましょう。 .js-スクロール{ 不透明度: 0; 遷移: 不透明度 500ms; } .js-scroll.scrolled { 不透明度: 1; } ページ上のすべての js-scroll 要素は非表示になり、不透明度は 0 になります。この要素領域までスクロールすると、.scrolled クラス名を追加して表示されるようになります。 JavaScript で要素を操作するレイアウトとスタイルが決まったら、要素がスクロールして表示されるときにクラス名を割り当てる JavaScript 関数を記述する必要があります。 ロジックを簡単に分解してみましょう。
対象要素を取得するページ上のすべての js-scroll 要素を取得するには、document.querySelectorAll() を使用します。 定数 scrollElements = document.querySelectorAll('.js-scroll') デフォルトでは、すべての対象要素をフェードアウトしますこれらの要素を反復処理し、すべてをフェードアウトして表示しないようにします。 scrollElements.forEach((el) => { el.style.不透明度 = 0 }) 要素がビューポート内にあるかどうかを確認する要素からページの上部までの距離がページの表示部分の高さよりも小さいかどうかを判断することで、要素がユーザーのビューポート内にあるかどうかを検出できます。 JavaScript では、要素とページの上部の間の距離を取得するために 上記のロジックを使用して const elementInView = (el) => { const 要素 Top = el.getBoundingClientRect().top 戻る ( 要素上端 <= (window.innerHeight || document.documentElement.clientHeight) ) } この関数を変更して、要素がページ内で x ピクセルスクロールしたかどうかを検出したり、スクロールされたページのパーセンテージを検出したりすることができます。 const elementInView = (el, scrollOffset = 0) => { const 要素 Top = el.getBoundingClientRect().top 戻る ( 要素トップ <= (window.innerHeight || document.documentElement.clientHeight) - スクロールオフセット ) } この場合、要素が scrollOffset の量だけページ内にスクロールされている場合、関数は true を返します。少し変更して、scrollOffset パラメータをパーセンテージに変更してみましょう。 const elementInView = (el, パーセンテージスクロール = 100) => { const 要素 Top = el.getBoundingClientRect().top 戻る ( 要素トップ <= (window.innerHeight || document.documentElement.clientHeight) * (パーセンテージスクロール / 100) ) } この部分では、特定のニーズに応じてロジックを定義できます。 注意:Intersection Observer API[2]を使用しても同じ効果が得られますが、IEはサポートされていません。 要素にクラス名を追加する要素がページにスクロールされたかどうかを検出できるようになったので、要素の表示を処理する関数を定義する必要があります。この場合は、scrolled クラス名を割り当てて要素を表示します。 const displayScrollElement = (要素) => { element.classList.add('スクロール') } 次に、前のロジックを displayScrollElement 関数と組み合わせ、forEach メソッドを使用してすべての js-scroll 要素でそれを呼び出します。 定数ハンドルスクロールアニメーション = () => { scrollElements.forEach((el) => { 要素がビュー内にある場合(el, 100) { 表示スクロール要素(el) } }) } さらに、要素が表示されなくなった場合は、デフォルトの状態にリセットする必要があります。これは、hideScrollElement を定義することで実行できます。 const hideScrollElement = (要素) => { element.classList.remove("スクロールされた"); }; 定数ハンドルスクロールアニメーション = () => { scrollElements.forEach((el) => { 要素がビュー内にある場合(el, 100) { スクロール要素を表示します(el); } それ以外 { スクロール要素を非表示にします(el); } } 最後に、上記のメソッドをウィンドウのスクロール イベント リスナーに渡して、ユーザーがスクロールするたびに実行されるようにします。 window.addEventListener('スクロール', () => { スクロールアニメーション処理() }) スクロールアニメーションの機能を全て実装しました。 完全な例記事の最初に戻ってレンダリングをご覧ください。これらの要素はさまざまなアニメーションで表示されます。これは、クラス名に異なる CSS アニメーションを割り当てることによって実現されます。この例の HTML は次のとおりです。 <セクションクラス="スクロールコンテナ"> <div class="scroll-element js-scroll フェードイン"></div> <div class="scroll-caption">フェードイン効果</div> </セクション> <セクションクラス="スクロールコンテナ"> <div class="scroll-element js-scroll フェードインボトム"></div> <div class="scroll-caption">トップカット効果</div> </セクション> <セクションクラス="スクロールコンテナ"> <div class="scroll-element js-scroll slide-left"></div> <div class="scroll-caption">左からカットイン</div> </セクション> <セクションクラス="スクロールコンテナ"> <div class="scroll-element js-scroll slide-right"></div> <div class="scroll-caption">右からカットイン</div> </セクション> ここでは、異なるアニメーション効果を持つ要素に異なる CSS クラス名を割り当てます。これらのクラスに対応する CSS コードは次のとおりです。 .スクロール.フェードイン{ アニメーション: フェードイン 1 秒、イーズイン アウト 両方; } .スクロールされたフェードインボトム{ アニメーション: フェードイン下部 1 秒、イーズインアウト両方; } .スクロール.左スライド{ アニメーション: 左にスライドイン、両方に 1 秒イーズインアウト。 } .スクロール.スライド右{ アニメーション: 右にスライドイン、1 秒ずつイーズインアウト、両方; } @keyframes スライドイン左 { 0% { 変換: translateX(-100px); 不透明度: 0; } 100% { 変換: translateX(0); 不透明度: 1; } } @keyframes スライドイン右 { 0% { 変換: translateX(100px); 不透明度: 0; } 100% { 変換: translateX(0); 不透明度: 1; } } @keyframes フェードインボトム { 0% { 変換: translateY(50px); 不透明度: 0; } 100% { 変換: translateY(0); 不透明度: 1; } } @keyframes フェードイン { 0% { 不透明度: 0; } 100% { 不透明度: 1; } } さまざまなアニメーション要素が追加されていますが、ロジックは同じままなので、JavaScript コードを変更する必要はありません。つまり、新しい関数を記述しなくても、ページに任意の数の異なるアニメーションを追加できるということです。 スロットルバルブによるパフォーマンスの向上スクロール リスナーに関数をバインドすると、ユーザーがページをスクロールするたびにその関数が呼び出されます。ページを 500 ピクセルスクロールすると、関数が少なくとも 50 回呼び出されます。ページに多くの要素を含めようとすると、ページの速度が著しく低下する可能性があります。 「スロットル関数」を使用することで関数呼び出しの回数を減らすことができます。スロットル関数は、指定された間隔内で渡された関数を 1 回だけ呼び出す高階関数です。 ユーザーがスクロールするすべてのピクセルを検出する必要がないため、スクロール イベントに特に便利です。たとえば、タイマーが 100 ミリ秒のスロットル関数がある場合、ユーザーが 100 ミリ秒スクロールするごとに関数が 1 回だけ呼び出されます。 スロットル機能は、次のように JavaScript で実装できます。 throttleTimer を false にする const スロットル = (コールバック、時間) => { if (throttleTimer) 戻り値 // 関数が繰り返し実行されないようにここでマークします throttleTimer = true タイムアウトを設定する(() => { // 指定された時間が来たら、渡されたコールバック関数 callback() を呼び出します スロットルタイマー = false }、 時間) } 次に、ウィンドウ オブジェクトのスクロール イベント リスナーを変更します。 window.addEventListener('スクロール', () => { スロットル(ハンドルスクロールアニメーション、250) }) これで、ユーザーがスクロールすると、handleScrollAnimation 関数が 250 ミリ秒ごとに呼び出されます。 以上がJavaScriptでページスクロールアニメーションを実装する方法の詳細です。JavaScriptページスクロールの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL がエラーを報告: ファイルが見つかりません: './mysql/plugin.frm' 解決策
>>: CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法
SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...
Docker-compose デプロイメント構成 Jenkins 1. Docker-compose...
目次Docker を使用する理由は何ですか? DockerのインストールROSイメージを取得するRO...
1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...
目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....
データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...
特記事項:この記事は、Chris Spooner の英語記事「Web デザイン用の Retina グ...
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
目次JSはFileReaderを通じて.txtファイルの内容を取得します。 .txtファイルの読み取...
mysqldump バックアップは、その独自の特性 (テーブルのロック、基本的に挿入スクリプトまたは...
目次事前準備実施方法: 1. 単一のデータを挿入する2. マージデータ挿入3. MySqlBulkL...
序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...
Linux システムでは、chmod コマンドと chown コマンドの両方を使用して権限を設定でき...
insert into employee values(null,'張三','...
効果効果は以下のとおりです実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...