自然界には多種多様な蠕虫が存在します。 彼らはあらゆる生物を攻撃します...
ヴィトゥス・ベーリングの第二次カムチャツカ遠征の歴史を読んでいて気づいたのですが…
この組み合わせを使用する最も簡単な例は、このページのすぐ下にあります。 最も興味深いのは、この美しさ (スクロール アニメーション) が jQuery なしで動作することです。 このスクリプトにはすべての扉が開かれていることがわかりました...例として、下にスクロールしてください...大胆になってください...
自信を持って言えますが、現在、スクロールアニメーションは非常に人気があり、成功したインターネット起業家の販売ウェブサイトでこの効果をよく見つけることができます。 このような「トリック」はサイトを非常に活気づけ、訪問者の注意をサイトに集中させるのにも役立ちます。 重要な点、まず注目してもらいたいものです。
スクロールアニメーション：組み合わせ「WOW.js」と「Animate.css」
WordPress で...
* アニメーションを繰り返すには、ページをリロードします。
設定方法は?ステップ1
まず、これら 2 つのファイル (「WOW.js」と「Animate.css」) をダウンロードします。
更新 (2019 年 7 月 25 日):
wow.min.js v1.2.1 | animate.min.css v3.7.2
ステップ2
サイトのルートフォルダーに「wow-animation」フォルダーを置きます。 もちろん、ファイルへの正しいパスを指定している限り、どこにでも配置できます。 このフォルダーもルート フォルダーに配置することをお勧めします:index.html。 WordPress の場合は、フォルダーを任意の場所に配置します。 (重要なことは、そこへの正しいパスを示すことです)。
ステップ3
次の行を追加します。
※当然ですが、ファイルへの正しいパスを指定します。 WordPressにインストールする場合は指定することをお勧めします フルパス、つまり httpS://YourDomain などで始まります。 ファイルが正しく接続されているかどうかを確認するには、URL をコピーし、アドレス バーに入力して Enter キーを押します。 理解できないコードを含むファイルが開いても、すべて問題ありません:)
ステップ4
次の行をページの一番下に配置します。
※ファイルへの正しいパスも指定し、ブラウザで確認してください。
ある情報ステップ6
詳細設定。 機能の追加:
data-wow-duration : アニメーションの長さを変更します。
data-wow-delay : アニメーションが開始する前の遅延。
data-wow-offset : アニメーションが開始するまでの距離 (ブラウザ ウィンドウの下部を基準とした)。
data-wow-iteration : アニメーションを「何度も」繰り返します。
こんにちは。 すでに書いたことを思い出させてください。しかし、これらはただのことです 基本原則。 ここで、1 つの animate.css ファイルに含まれる既製のアニメーション プロパティのセットに慣れることをお勧めします。 これはジェネレーターではありませんが、すべての一般的なブラウザーで正確に動作するライブラリです。 これらの例をご覧ください。
Animate.css の接続やりたいなら CSSアニメーションサイトの画像、テキスト、またはボタンを使用し、これらすべてを Javascript を使用せずに実装すると、上ですでに説明した 1 つのファイルを標準的な方法、つまり head タグの間に接続するだけで済みます。
これは、オブジェクトのアニメーション プロパティを指定する方法です。 、アニメーションは必須であり、tada はエフェクトの 1 つです。 しかし、私たちにはサイクル自体が必要であり、今それを実行します。 これは、新しいクラスを作成し、そのクラスまたは既存のクラスに特別なプロパティを割り当てることで実行できます。
ループアニメーション Animate.css| .new (アニメーション反復数 : 無限 ; ) |
New(アニメーション反復数: 無限;)
ここで説明しようとしたことをさらに明確にするために、このビデオをご覧ください。実際の例を使用して、それがどのように機能するかを明確に示しており、スタイル自体もダウンロードできます。
多くのランディング ページやプロモーション ページで、さまざまなアニメーション効果が使用されることが増えています。 結局のところ、それらはページをより興味深く魅力的なものにします。
基本的に、これらの効果は、何らかのイベント (要素をクリックまたはホバーする) で、またはページをスクロールした瞬間に設定されます。 ページをスクロールしているときに、このようなサイトに出会ったことがあると思います。 さまざまな要素滑らかに美しく現れます。
以前は、これらのエフェクトを実装するには JS のみを使用する必要がありましたが、開発は止まっておらず、CSS3 のリリースにより、これらすべてのエフェクトを JS 上で実装できるようになりました。
このレッスンでは、animate.css という非常に興味深いツールを紹介します。 これは既製の CSS スタイル シートで、50 を超えるさまざまな効果があり、これらの効果はすべて CSS3 で実装されています。
これを使用するには、必要な要素に特定のクラスを設定するだけで、アニメーション効果がこの要素に適用されます。 前に述べたように、このアニメーションは CSS3 で実装されているため、これらの効果は最新のすべてのブラウザで機能します。
次に、animate.css を詳しく見てみましょう。
基本的な HTML マークアップビデオチュートリアルを見る
- 跳ねる
- フラッシュ
- 脈
- 輪ゴム
- 振る
- スイング
- ぐらつく
- バウンスイン
- バウンスインダウン
- 左にバウンス
- 右にバウンス
- バウンスインアップ
- バウンスアウト
- バウンスアウトダウン
- バウンスアウト左
- バウンスアウトライト
- バウンスアウトアップ
- フェードイン
- フェードインダウン
- フェードインダウンビッグ
- フェードイン左
- フェードイン左ビッグ
- フェードインライト
- フェードイン右ビッグ
- フェードインアップ
- フェードインアップビッグ
- フェードアウト
- フェードアウトダウン
- フェードアウトダウンビッグ
- フェードアウト左
- フェードアウト左ビッグ
- フェードアウト右
- フェードアウト右ビッグ
- フェードアウトアップ
- フェードアウトアップビッグ
- フリップインX
- フリップインY
- フリップアウトX
- フリップアウト
- ライトスピードイン
- ライトスピードアウト
- 回転して
- 左下に回転
- 右下に回転
- 左上に回転
- 右に回転
- 回転アウト
- 左下に外側に回転
- 右下に外側に回転
- 左上に回転
- 外側を右に回転
- ヒンジ
- ロールイン
- ロールアウトする
- ズームイン
- ズームインダウン
- 左にズーム
- 右にズーム
- ズームインアップ
- ズームアウト
- ズームアウトダウン
- ズームアウト左
- ズームアウト右
- ズームアウトアップ
- スライドインダウン
- 左にスライド
- スライドインライト
- スライドインアップ
- スライドアウトダウン
- スライドアウト左
- スライドアウト右
- スライドアウトアップ
上記のすべてを行った場合、ページが読み込まれると、この効果が要素に適用され、アニメーションはそこで終了します。
しかし、アニメーションを停止せずに継続する必要がある場合はどうすればよいでしょうか?
これを行うには、アニメーション要素に別のクラスを追加するだけです。 このクラスは無限です。
見出し
要素の上にマウスを置いたときのアニメーションを設定します
ビデオチュートリアルを見る
前述のすべての例では、ページの読み込み直後にアニメーションを設定しますが、実際にはこれが必要になることはほとんどありません。 実際には、要素の上にマウスを移動するときにアニメーションを設定する必要があることがよくあります。そのため、以下にこの実装用の既成のコードを提供します。
HTMLHTML マークアップが少し変更され、特定のアニメーションを担当するクラスを指定する必要がなくなりました。 この値を特別な data-effect 属性で指定する必要があります。 これは非常に重要ですので、注意してください。
見出し
以下は、マウスオーバー イベントを監視する小さな jQuery コードです。このイベントが発生すると、スクリプトによってクラスが追加され、その値は data-effect 属性で指定されます。 このクラスを追加することでアニメーションが適用されます。
Function animate(elem)( var effect = elem.data("effect"); if(!effect || elem.hasClass(effect)) return false; elem.addClass(effect); setTimeout(function())( elem. RemoveClass (効果); ), 1000); ) $(".animated").mouseenter(function() (animate($(this)); );
もちろん、このスクリプトは必要に応じて変更できます。たとえば、mouseenter イベントをクリックするように変更できます。 この場合、アニメーションは要素上にマウスを置いた瞬間ではなく、クリックした瞬間に発生します。
ページスクロール時にアニメーションを付けるビデオチュートリアルを見る
最後に、animate.css を簡単に使用できる別の例を見てみましょう。
つまり、ページをスクロールするときに要素にさまざまな効果を設定できます。 これらの目的のために、animate.css に加えて、特別な wow.js スクリプトも必要になります。
CSS3 アニメーションは Web サイトを動的にします。 Web ページに命を吹き込み、ユーザー エクスペリエンスを向上させます。 CSS3 トランジションとは異なり、アニメーションの作成はキーフレームに基づいているため、一定時間エフェクトを自動的に再生および繰り返したり、ループ内でアニメーションを停止したりできます。
CSS3 アニメーションは、ほぼすべての HTML 要素に加えて、:before および:after 擬似要素に使用できます。 アニメーション化されたプロパティのリストがページに表示されます。 アニメーションを作成するときは、次のことを忘れないでください。 考えられる問題一部のプロパティの変更には多くのリソースが必要となるため、パフォーマンスが低下します。
CSSアニメーションの概要 ブラウザのサポートIE：10.0
Firefox: 16.0、5.0 -moz-
Chrome: 43.0、4.0 -ウェブキット-
Safari: 4.0 -ウェブキット-
オペラ: 12.1、12.0 -o-
iOS Safari: 9、7.1 -webkit-
オペラミニ: -
Android ブラウザ: 44、4.1 -webkit-
Android 版 Chrome: 44
キーフレームは、アニメーションのさまざまなポイントでアニメーション プロパティ値を指定するために使用されます。 キーフレームは、1 つのアニメーション サイクルの動作を定義します。 アニメーションは 0 回以上繰り返すことができます。
キーフレームは、次のように定義される @keyframes ルールを使用して指定されます。
@keyframes アニメーション名 (ルールリスト)
アニメーションの作成は、@keyframes ルールのキーフレームを設定することから始まります。 フレームは、どのプロパティがどのステップでアニメーション化されるかを決定します。 各フレームには、1 つ以上のプロパティと値のペアの 1 つ以上の宣言ブロックが含まれる場合があります。 @keyframes ルールには、ルールと要素の宣言ブロックをリンクする要素のアニメーションの名前が含まれています。
@keyframes シャドウ ( (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) から (text-shadow: 0 0 3px black;) )
キーフレームは、from キーワードと to キーワード (値 0% と 100% に相当) を使用するか、パーセント ポイントを使用して作成されます。これらは好きなだけ指定できます。 キーワードとパーセンテージ ポイントを組み合わせることもできます。 フレームに同じプロパティと値がある場合、それらを 1 つの宣言に結合できます。
@keyframes move ( from, to ( 上: 0; 左: 0; ) 25%, 75% (上: 100%;) 50% (上: 50%;) )
0% または 100% のフレームが指定されていない場合、ユーザーのブラウザはアニメーション プロパティの計算された (元の設定された) 値を使用してフレームを作成します。
複数の @keyframes ルールが同じ名前で定義されている場合、ドキュメント順序の最後のルールが起動され、それより前のルールはすべて無視されます。
@keyframes ルールを宣言したら、アニメーション プロパティでそれを参照できます。
H1 (フォントサイズ: 3.5em; カラー: ダークマゼンタ; アニメーション: シャドウ 2s 無限イーズインアウト; )
ブラウザでの結果が予測できない可能性があるため、数値以外の値をアニメーション化することはお勧めしません (まれな例外を除きます)。 また、プロパティ値 color: ピンクと color: #ffffff 、 width: auto と width: 100px 、または border-radius: 0 と border- など、中間点を持たないプロパティ値に対してキーフレームを作成しないでください。 radius: 50% (この場合、border-radius: 0% を指定するのが正しいでしょう)。
1.1. キーフレームのタイミング機能キーフレーム スタイル ルールは、アニメーションが次のキーフレームに移動するときに使用する一時関数を宣言することもできます。
例
@keyframes バウンス ( from ( トップ: 100px; アニメーション タイミング関数:ease-out; ) 25% ( トップ: 50px; アニメーション タイミング関数:ease-in; ) 50% ( トップ: 100px; アニメーション タイミング-関数: イーズアウト; ) 75% (トップ: 75px; アニメーション タイミング関数: イーズイン; ) から (トップ: 100px; )
「バウンス」という名前のアニメーションには 5 つのキーフレームが指定されています。 最初のキーフレームと 2 番目のキーフレームの間 (つまり、0% と 25% の間) では、イージング関数が使用されます。 2 番目と 3 番目のキーフレームの間 (つまり、25% と 50% の間) では、スムーズ アクセラレーション機能が使用されます。 等々。 要素はページ上で 50 ピクセル上に移動し、その位置に達すると速度が低下します。 最高点、その後 100px に下がるにつれて高速化します。 アニメーションの後半も同様に動作しますが、要素がページ上で 25 ピクセル上に移動するだけです。
to または 100% キーフレームで指定されたタイミング関数は無視されます。
2.アニメーション名：アニメーション名プロパティアニメーション名プロパティは、要素に適用されるアニメーションのリストを指定します。 それぞれの名前は、アニメーションのプロパティ値を提供するルールでキーフレームを選択するために使用されます。 名前がルール内のどのキーフレームにも一致しない場合、アニメーション化するプロパティがない場合、またはアニメーション名がない場合、アニメーションは実行されません。
複数のアニメーションが同じプロパティを変更しようとすると、名前のリストの最後に最も近いアニメーションが実行されます。
アニメーション名は大文字と小文字が区別され、使用できません。 キーワードなし 。 アニメーションの本質を反映した名前を使用することをお勧めします。ハイフンまたはアンダースコア文字 _ を付けてリストされた 1 つ以上の単語を使用できます。
プロパティは継承されません。
構文
アニメーション名: なし; アニメーション名: test-01; アニメーション名: -sliding; アニメーション名: 垂直移動; アニメーション名: test2; アニメーション名: test3、move4; アニメーション名: 初期; アニメーション名: 継承;
3. アニメーションの継続時間:animation-duration プロパティanime-duration プロパティは、1 つのアニメーション サイクルの継続時間を指定します。 秒 s またはミリ秒 ms で指定します。 要素に複数のアニメーションが指定されている場合、次のように設定できます。 異なる時間それぞれの値をカンマで区切ってリストします。
プロパティは継承されません。
構文
アニメーション期間: 0.5 秒。 アニメーション期間: 200ms; アニメーション期間: 2 秒、10 秒。 アニメーション期間: 15 秒、30 秒、200 ミリ秒。
4. タイミング関数：animation-timing-functionプロパティanime-timing-function プロパティは、キーフレームの各ペア間でアニメーションがどのように進行するかを記述します。 アニメーションの遅延中は、タイミング関数は適用されません。
プロパティは継承されません。
| 値: | |
| リニア | 線形関数。アニメーションは速度の変動がなく、時間全体にわたって均一に発生します。 |
| 容易に | デフォルトの機能では、アニメーションはゆっくりと始まり、すぐに加速し、最後に遅くなります。 cubic-bezier(0.25,0.1,0.25,1) に対応します。 |
| イーズイン | アニメーションはゆっくりと始まり、最後にスムーズに加速します。 cubic-bezier(0.42,0,1,1) に対応します。 |
| イーズアウト | アニメーションはすぐに始まり、最後にスムーズに遅くなります。 cubic-bezier(0,0,0.58,1) に対応します。 |
| イージーインアウト | アニメーションはゆっくりと始まり、ゆっくりと終わります。 cubic-bezier(0.42,0,0.58,1) に対応します。 |
| 3次ベジェ(x1, y1, x2, y2) | 0 から 1 までの値を手動で設定できます。アニメーションの変化速度の任意の軌跡を構築できます。 |
| ステップスタート | ステップごとのアニメーションを設定し、アニメーションをセグメントに分割します。変更は各ステップの開始時に発生します。 ステップ(1, start) で評価されます。 |
| ステップエンド | ステップバイステップのアニメーション。各ステップの最後に変化が発生します。 ステップ(1, end) で評価されます。 |
| ステップ(ステップ数、ステップ位置) | 2 つのパラメータを取るステップ時間関数。 最初のパラメータは、関数内の間隔の数を指定します。 これは、2 番目の引数が Jump-none でない限り、0 より大きい正の整数でなければなりません。2 番目の引数が Jump-none の場合は、1 より大きい正の整数でなければなりません。 2 番目のパラメーターはオプションで、次のいずれかの値を使用して、アニメーションが開始されるポイントであるステップ位置を指定します。
start の値を指定すると、アニメーションは各ステップの開始時に開始され、end の値を指定すると、遅れて各ステップの終了時にアニメーションが開始されます。 レイテンシは、アニメーション時間をステップ数で割ることによって計算されます。 2 番目のパラメータが指定されていない場合は、デフォルト値の end が使用されます。 |
| イニシャル | |
| 継承する |
構文
アニメーションタイミング機能: 簡単。 アニメーション タイミング関数: イーズイン; アニメーション タイミング関数: イーズアウト; アニメーション タイミング関数: イーズインアウト; アニメーション タイミング関数: リニア; アニメーションタイミング関数: ステップスタート; アニメーションタイミング関数: ステップエンド; アニメーション タイミング関数: cubic-bezier(0.1, 0.7, 1.0, 0.1); アニメーションタイミング関数：steps(4, end); アニメーションタイミング関数: easy、ステップスタート、cubic-bezier(0.1, 0.7, 1.0, 0.1); アニメーションタイミング関数: 初期; アニメーションタイミング関数: 継承;
ステップバイステップのアニメーションを使用すると、テキストの印刷や読み込みインジケーターなどの興味深い効果を作成できます。
5.アニメーションの繰り返し：animation-iteration-countプロパティanime-iteration-count プロパティは、アニメーション ループが再生される回数を指定します。 開始値 1 は、アニメーションが最初から最後まで 1 回再生されることを意味します。 このプロパティは、多くの場合、アニメーション方向プロパティの代替値と組み合わせて使用されます。これにより、アニメーションが再生されます。 逆順代替サイクルで。
プロパティは継承されません。
構文
アニメーションの反復回数: 無限。 アニメーション反復数: 3; アニメーション反復数: 2.5; アニメーション反復数: 2、0、無限。
6. アニメーションの方向：animation-direction プロパティアニメーション方向プロパティは、アニメーションを一部のループまたはすべてのループで逆の順序で再生するかどうかを決定します。 アニメーションが逆の順序で再生されると、タイミング関数も逆になります。 たとえば、逆の順序で再生すると、ease-in 関数はease-out のように動作します。
プロパティは継承されません。
| 値: | |
| 普通 | すべてのアニメーションは指定どおりに繰り返し再生されます。 デフォルト値。 |
| 逆行する | すべてのアニメーションの繰り返しは、定義された方向とは逆の方向に再生されます。 |
| 代替 | アニメーション ループの奇数の各リピートは通常方向に再生され、偶数の各リピートは逆方向に再生されます。 |
| 交互反転 | アニメーション ループの奇数の繰り返しはすべて逆方向に再生され、偶数の繰り返しはすべて通常の方向に再生されます。 |
| イニシャル | プロパティ値をデフォルト値に設定します。 |
| 継承する | 親要素からプロパティ値を継承します。 |
アニメーション ループの繰り返しが偶数か奇数かを判断するには、繰り返しの数が 1 から始まります。
構文
アニメーションの方向: 通常。 アニメーションの方向: 逆; アニメーションの方向: 代替; アニメーションの方向: 交互 - 逆方向; アニメーションの方向: 通常、逆。 アニメーションの方向: 交互、逆方向、通常。 アニメーション方向: 初期; アニメーションの方向: 継承;
7. アニメーションの再生:animation-play-state プロパティanime-play-state プロパティは、アニメーションを開始するか一時停止するかを決定します。 JavaScript スクリプトでこのプロパティを使用すると、ループ内でアニメーションを停止できます。 マウスをオブジェクトの上に置くとアニメーションを停止することもできます ( state:hover )。
プロパティは継承されません。
構文
アニメーションの再生状態: 実行中。 アニメーション再生状態: 一時停止中。 アニメーション再生状態: 一時停止、実行中、実行中。 アニメーション再生状態: 初期; アニメーション再生状態: 継承;
8. アニメーション遅延:animation-delay プロパティアニメーション遅延プロパティは、アニメーションがいつ開始されるかを決定します。 秒 s またはミリ秒 ms で指定します。
プロパティは継承されません。
構文
アニメーション遅延: 5 秒。 アニメーション遅延: 3 秒、10 ミリ秒。
9. アニメーション再生前後の要素の状態：animation-fill-modeプロパティanime-fill-mode プロパティは、実行時間外にアニメーションによって適用される値を決定します。 アニメーションが完了すると、要素は元のスタイルに戻ります。 デフォルトでは、アニメーションが要素に適用されるとき、アニメーションはアニメーション名とアニメーション遅延のプロパティ値に影響しません。 さらに、デフォルトでは、アニメーションは、完了後はanimation-durationおよびanimation-iteration-countプロパティの値に影響を与えません。 anime-fill-mode プロパティは、この動作をオーバーライドできます。
プロパティは継承されません。
| 値: | |
| なし | デフォルト値。 要素の状態はアニメーションの再生前でも再生後でも変わりません。 |
| 前へ | アニメーションが終了すると (animation-iteration-count 値によって決定されます)、アニメーションはアニメーション終了時のプロパティ値を適用します。 anime-iteration-count が 0 より大きい場合、アニメーションの最後に完了した反復の終了の値が適用されます (次に来る反復の開始の値ではありません)。 anime-iteration-count がゼロの場合、適用される値は最初の反復を開始する値になります (animation-fill-mode:backwards; と同じ)。 |
| 後ろ向きに | アニメーションは、アニメーション遅延で定義された期間中、キーフレームで定義されたプロパティ値を適用し、アニメーションの最初の反復を開始します。 これらは、from キーフレーム値 (アニメーション方向: 通常またはアニメーション方向: 代替の場合)、または to キーフレーム値 (アニメーション方向: 逆方向またはアニメーション方向: 代替の場合) のいずれかです。 |
| 両方 | アニメーションが開始される前の最初のキーフレームに要素を残し (正の遅延値を無視)、最後のアニメーションが終了するまで最後のフレームを遅延させることができます。 |
構文
アニメーションフィルモード: なし。 アニメーションフィルモード: 順方向; アニメーションフィルモード: 逆方向; アニメーションフィルモード: 両方; アニメーションフィルモード: なし、逆方向。 アニメーションフィルモード: 両方、前方、なし。
10. アニメーションの簡単な説明: アニメーション プロパティすべてのアニメーション再生パラメータは、スペースで区切ってリストした 1 つのプロパティ、animation に組み合わせることができます。
アニメーション: アニメーション名 アニメーション期間 アニメーション タイミング関数 アニメーション遅延 アニメーション反復数 アニメーション方向;
アニメーションを再生するには、アニメーション名とアニメーション期間の 2 つのプロパティのみを指定するだけで十分です。残りのプロパティはデフォルト値を取得します。 プロパティがリストされる順序は重要ではありません。唯一のことは、アニメーション期間の実行時間がアニメーション遅延遅延よりも前に来る必要があるということです。
11. 複数のアニメーション1 つの要素に対して、名前をカンマで区切ってリストした複数のアニメーションを設定できます。
Div (アニメーション: シャドウ 1 秒、イーズインアウト 0.5 秒、交互、移動 5 秒、リニア 2 秒;)
今日は、2 つのスクリプトを使用して Web サイトのオブジェクトを簡単かつ迅速にアニメーション化する方法を学びます。 この記事のタイトルにその名前が表示されています。 まず、それぞれが何のためにあるのかを説明しましょう。
WOW.js は、ページ スクロールの特定の段階でアニメーションを有効にするための小さなライブラリです。 重量は非常に軽く、完全に独立しています。つまり、jQuery や他のモンスターに接続する必要はありません。
Animate.CSS は、アニメーション自体を直接担当するスクリプトです。 実際、wow.js はまさにこれからアニメーションを取得しています。 そしてそれらは数十個あります。
animate.css の欠点は、アニメーションに関連付けられた通常の CSS ルールのセットにすぎないことです。 つまり、ページがロードされた直後に再生されます。 そして、アニメーション要素が「最初の」画面に表示されない場合、訪問者はこの美しさをすべて理解することはできません。 結局のところ、ページを正しい場所に巻き戻す前に再生されることになります。
最初のメモ (次の段落のリンク) では、これが起こらないようにするために、ページ スクロールの特定の段階でアニメーションが再生されるように、js コードを記述する方法と場所を示しました。 非常に不便でしたが、魅力的に機能しました
したがって、始める前に、レッスン「」を視聴することをお勧めします。 このサイトでアニメーションを使用する方法をすでに知っていることを前提としています。 同時に、その方法がすぐにわかります。 wow.js で作業が楽になります。 結局のところ、JS コードを書いたり詳しく調べたりする必要はなくなりました。 プラグインすればあとは忘れる
ということで、紹介は終わりました。 今度は「身体」に近づいてみましょう。 このトピックに関するビデオ レッスンを録画しましたが、視聴する前に、実際にレッスンを完了すると何が得られるかを示したいと思います。 いわば、さらなるモチベーションのために
さて、見ましたか？ これを自分の手で「からかう」のです。 それでは、ビデオを視聴するために実行してください。
レッスン: WOW.js と Animate.CSS - 一緒にもっと楽しく!頑張れ！
WOW.jsのセットアップ ダウンロードと接続方法。1ステップ。
公式サイト (ビデオの下にあるリンクを参照) から wow.js および animate.css スクリプトをダウンロードし、プロジェクト フォルダーに配置します。
ステップ2。
ページ上のタグ内の単純な HTML コードでスクリプトを接続します。 Master-CSS チャンネル登録者からのメモ: script タグは必ず本文の最後に追加する必要があります。 これは、ページを迅速にロードするために行われます。 ブラウザが script タグに到達するたびに、スクリプトが読み込まれるまで、サイト全体の読み込みとレンダリングがフリーズします。 このため、次のようなサイトがよく見られます。長い間
ステップ 3. 接続直後に、次のコードを追加してスクリプトを初期化する必要があります。
新しい WOW().init();
この時点で接続は終了し、第 2 段階に移ります。
WOW.jsの使用ステップ 1. アニメーション化したい要素を選択し、それに class="wow" を追加します。 以下のコードでは、サンプル画像を使用してこれを示しました。
ステップ 2. アニメーションを選択し、追加のクラスとともに犬に追加します。
ステップ 3. 必要に応じて、特別なデータ属性を使用してアニメーションの設定を追加します。
上記のコードでは、画像が画面の下部から 200 ピクセルを通過したときにアニメーションをトリガーするように指定しました。 ただし、同時に 0.5 秒の遅延が発生し、アニメーション自体にはちょうど 2 秒かかります。
属性による WOW.js アニメーションの設定 data-wow-duration – アニメーションの再生時間を指定します data-wow-delay – アニメーションを再生する前の遅延を設定します data-wow-offset – 要素がアニメーションから特定の数のピクセルを通過したときにアニメーションを有効にします画面の下部 data-wow-iteration – アニメーションの繰り返し数これらの属性は必須ではないことに注意してください。 これらを指定しない場合、デフォルトでは、ブラウザ ウィンドウのスクロール中に要素が画面に表示されるとすぐにアニメーションが再生されます。
さて皆さん。 おそらくそれだけです。 ご質問がある場合は、コメント欄で質問してください;)
