要素までスクロールするたびに読み込みアニメーションを追加するにはどうすればよいですか? 初期パラメータを追加する要素上の画像のアニメーションを例に、左右のコンテナを 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
ページが下までスクロールすると、表示アニメーションがトリガーされ、ページが再び上までスクロールすると、非表示アニメーションがトリガーされます。 コンポーネントマウント() { 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を応援してください。 |
>>: Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順
目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...
ストアド関数ストアド関数とは: SQL コードの一部をカプセル化し、特定の関数を完了して、結果を返し...
この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...
この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...
MySQL 5.7 バージョン:方法1: SET PASSWORDコマンドを使用するフォーマット: ...
フロントエンドテクノロジー層 (写真は少し極端ですが、参考までに) Javascript と DOM...
目次アイデアホスト構成confを変更する再起動テストスレーブ 1 の構成スレーブ2の構成マスターとス...
目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...
使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...
1. HTMLファイルでechartをインポートする <!-- echarts をインポート ...
目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...
同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...
問題: MySQL データベースが予期せずクラッシュしたため、データベースを起動できませんでした。エ...
CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...