この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 実装のアイデア1. setIntervalタイミング関数を主に使用 コードサンプル<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>アニマメイトアニメーション</title> <スタイル> * { マージン: 0; パディング: 0; } 。コンテンツ { 幅: 1000ピクセル; マージン: 0 自動; } ボタン { パディング: 5px; マージン: 60px 10px; 境界線: 1px 実線 #666; アウトライン色: 淡いバイオレットレッド; } 。両方 { 背景色: ピンク; 色: #fff; 背景色: 淡い紫赤; } 。箱 { 位置: 相対的; 高さ: 210px; マージン: 0px 自動; 背景色: #191b28; } .yutu{ 位置: 絶対; 上: 0; 左: 0; 幅: 180ピクセル; 高さ: 210px; } .qiaojingjing 位置: 絶対; 上: 0; 左: 820ピクセル; 幅: 180ピクセル; 高さ: 210px; } .word1 { 表示: なし; 位置: 絶対; 上: -50px; 左: 45%; } .word2 { 表示: なし; 位置: 絶対; 上: -30px; 左: 50%; } </スタイル> </head> <本文> <div class="content"> <button class="btn1">道を進む</button> <button class="btn2">喬静静が前進</button> <button class="both">両方向に走る</button> <button class="btn3">帰り道</button> <button class="btn4">喬静静が戻る</button> <div class="box"> <img src="images/于途.png" alt="" class="yutu"> <img src="images/乔晶晶.png" alt="" class="qiaojingjing"> <span class="word1">どうぞ、生涯のご指導を賜りますようお願い申し上げます。 </span> <span class="word2">どうぞ、生涯のご指導を賜りますようお願い申し上げます。 </span> </div> </div> <スクリプト> var btn1 = document.querySelector('.btn1'); var btn2 = document.querySelector('.btn2'); var btn3 = document.querySelector('.btn3'); var btn4 = document.querySelector('.btn4'); var both = document.querySelector('.both'); var yutu = document.querySelector('.yutu'); var qiaojingjing = document.querySelector('.qiaojingjing'); var word1 = document.querySelector('.word1'); var word2 = document.querySelector('.word2'); btn1.addEventListener('クリック', 関数() { アニメーション(yutu, 340, 関数() { word1.style.display = 'ブロック'; }); }); btn2.addEventListener('クリック', 関数() { アニメーション(qiaojingjing, 520, function() { word2.style.display = 'ブロック'; }); }); btn3.addEventListener('クリック', 関数() { アニメーション(yutu, 0, 関数() { word1.style.display = 'なし'; }); }); btn4.addEventListener('クリック', 関数() { アニメーション(qiaojingjing, 820, function() { word2.style.display = 'なし'; }); }); both.addEventListener('click', 関数() { アニメート(yutu, 340); アニメート(qiaojingjing, 520); word1.style.display = 'ブロック'; word2.style.display = 'ブロック'; }); // アニメーション関数 obj アニメーションオブジェクト、ターゲット ターゲットの左オフセット、コールバック コールバック関数 function animate(obj, target, callback) { // 前のアニメーションをクリアします clearInterval(obj.timer); obj.timer = setInterval(関数() { // 各移動の距離を計算します var step = (target - obj.offsetLeft) / 20; // ステップ数を丸めます step = step > 0 ? Math.ceil(step) : Math.floor(step); obj.style.left = obj.offsetLeft + ステップ + 'px'; obj.offsetLeft == ターゲットの場合 { // アニメーションを停止します clearInterval(obj.timer); // コールバック関数がある場合は、コールバック関数を実行します。if (callback) { 折り返し電話(); } } }, 30); } </スクリプト> </本文> </html> アニメーション効果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL でレプリケーション フィルターを動的に変更する方法
>>: Docker データボリュームの一般的な操作コードの例
いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...
1. 概要1.1 基本概念: Docker は、Go 言語をベースにしたオープンソースのアプリケーシ...
この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介しま...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...
目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....
目次1. ページレイアウト2. 画像のアップロードと表示3. キャンバスを初期化する4. テンプレー...
この記事では、WebSocketを使用して簡単なチャットルームの会話を実装するための具体的なコードを...
この記事の例では、vue検証コードコンポーネントで使用される具体的な実装コードを参考までに共有してい...
基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...
最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...
インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...
<br />前の記事:Webデザインチュートリアル(5):Webビジュアルデザイン。 1...
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
1. 仮想環境virtualenvのインストール1. virtualenvをインストールするpip3...