HTML+CSSは、要素の位置までスクロールして読み込みアニメーション効果を表示します。

HTML+CSSは、要素の位置までスクロールして読み込みアニメーション効果を表示します。

要素までスクロールするたびに読み込みアニメーションを追加するにはどうすればよいですか?

初期パラメータを追加する要素

上の画像のアニメーションを例に、左右のコンテナを 2 つ追加し、コンテナ内にコンテンツを配置します。

デフォルトの透明度が 0、左右に 100 ピクセル移動する初期データを追加します。

//左コンテナ.item-leftContainer {
    不透明度: 0;
    変換: translateX(-100px);
  }
  //右コンテナ.item-rightContainer {
    不透明度: 0;
    変換: translateX(100px);
  }

アニメーションデータの追加

less でアニメーションデータを追加します。ここでは から のみ設定します。手順 1 の初期パラメータ設定を省略し、アニメーション内で から を設定することもできます。

実行後、透明度が 0 から 1 に変わり、2 つのコンテナーが中央に 100 ピクセル移動して元の位置に戻ります。

//アニメーション @keyframes showLeft {
    に {
      不透明度: 1;
      変換: translateX(0px);
    }
  }
  @keyframes 右を表示 {
    に {
      不透明度: 1;
      変換: translateX(0px);
    }
  }
  @keyframes 左を非表示 {
    に {
      不透明度: 0;
      変換: translateX(-100px);
    }
  }
  @keyframes を右に非表示 {
    に {
      不透明度: 0;
      変換: translateX(100px);
    }
  }

アニメーションのトリガー

ページの読み込み/更新トリガー - componentDidMount で実行

ページがスクロールするとトリガーされます - componentDidMount と componentWillUnmount にページスクロール イベントのリスナー/ログアウトを追加します

現在のスクロールの高さと要素の位置の差を確認します。

window.pageYOffset (スクロール距離) + windowHeight (ウィンドウの高さ) > leftElement.offsetTop (要素の相対位置) + parentOffsetTop (親要素の相対位置) + 200

  • 実際のスクロール視覚位置 - window.pageYOffset (スクロール距離) + windowHeight (ウィンドウの高さ)
  • 親コンテナーは絶対配置を使用するため、ここでは上からの要素の高さ (leftElement.offsetTop + parentOffsetTop) が使用されます。通常のレイアウトの場合は、要素の現在の位置 leftElement.offsetTop を使用します。
  • 視覚的な体験を最適化するために、高さ 200 が追加されました。高さが200を超えるとアニメーションが起動します

ページが下までスクロールすると、表示アニメーションがトリガーされ、ページが再び上までスクロールすると、非表示アニメーションがトリガーされます。

コンポーネントマウント() {
        this.checkScrollHeightAndLoadAnimation();
        window.addEventListener('スクロール'、this.bindHandleScroll);
    }
    コンポーネントのマウントを解除します(){
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (イベント) => {
        this.checkScrollHeightAndLoadAnimation();
    }
    チェックスクロールの高さと読み込みアニメーション() {
        定数 windowHeight = window.innerHeight;
        parentEelement を document.getElementById("softwareUsingWays-container") として htmlElement に格納します。
        const parentOffsetTop = parentEelement.offsetTop;
        leftElement を (parentEelement.getElementsByClassName("item-leftContainer") として htmlCollectionOf<HTMLElement>)[0] にします。
        if (window.pageYOffset + windowHeight > leftElement.offsetTop + parentOffsetTop + 200) {
            leftElement.style.animation = "showLeft .6s forwards" //アニメーションを追加} else {
            leftElement.style.animation = "hideLeft 0s forwards" //アニメーションを非表示}
        rightElement を (parentEelement.getElementsByClassName(".item-rightContainer") として HTMLCollectionOf<HTMLElement>)[0] にします。
        if (window.pageYOffset + windowHeight > rightElement.offsetTop + parentOffsetTop + 200) {
            rightElement.style.animation = "showRight .6s forwards" //アニメーションを追加} else {
            rightElement.style.animation = "hideRight 0s forwards" //アニメーションを非表示}
    }

html+cssを使用して要素の位置までスクロールし、読み込みアニメーション効果を表示する方法についての記事はこれで終わりです。関連するhtml読み込みアニメーションコンテンツの詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

<<:  MySQL ソートの原則とケース分析

>>:  Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順

推薦する

MySQLデータクエリが多すぎるとOOMが発生するかどうかについての簡単な議論

目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...

MySQL ストアド関数(カスタム関数)の定義と使用方法の詳細な説明

ストアド関数ストアド関数とは: SQL コードの一部をカプセル化し、特定の関数を完了して、結果を返し...

JavaScriptは両端キューを実装する

この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...

MySQL 5.7 および MySQL 8.0 でルートパスワードを変更する方法の概要

MySQL 5.7 バージョン:方法1: SET PASSWORDコマンドを使用するフォーマット: ...

CSS と HTML とフロントエンド テクノロジーのレイヤー図

フロントエンドテクノロジー層 (写真は少し極端ですが、参考までに) Javascript と DOM...

MySQL 構成マスタースレーブサーバー (マスター 1 台とスレーブ複数台)

目次アイデアホスト構成confを変更する再起動テストスレーブ 1 の構成スレーブ2の構成マスターとス...

Nginx の負荷分散と動的および静的分離の原理と構成

目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

Vue で棒グラフを使用し、自分で設定を変更する方法

1. HTMLファイルでechartをインポートする <!-- echarts をインポート ...

Linuxサービスの監視と運用および保守

目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...

Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。

同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...

MySQLデータベースが予期せずクラッシュし、テーブルデータファイルが破損して起動できなくなる問題を解決します。

問題: MySQL データベースが予期せずクラッシュしたため、データベースを起動できませんでした。エ...

収集する価値のあるCSS命名規則(ルール) よく使われるCSS命名規則

CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...