JavaScript を使用してフェード効果を備えた画像トランジションを実装する

画像変換とは、画像を変更し、ある画像を別の画像に置き換えることを意味します。ユーザーは画像スライダーで画像の遷移を確認できます。

画像スライダーを開発するときは、アプリケーションに魅力的なユーザー エクスペリエンスをもたらすために、画像遷移のアニメーションに焦点を当てる必要があります。このチュートリアルでは、さまざまな画像トランジション方法を使用してフェード効果を追加する方法を学びます。

フェード効果のある画像を表示するには画像にクラスを追加します

CSS を使用して画像トランジションにフェード効果を追加できます。 CSS のトランジション プロパティを使用すると、画像にトランジションを追加できます。したがって、CSS をクラスに追加し、JavaScript を使用して画像にクラスを追加すると、画像にトランジションが追加されます。 ＃＃＃文法＃＃＃

ユーザーは、以下の構文に従って画像にクラスを追加し、フェード効果のある画像を表示できます。

リーリー

上記の構文では、id を使用してイメージにアクセスし、「class_name」クラスをイメージのクラス リストに追加します。

＃＃＃例＃＃＃

以下の例では、Web ページに画像を追加し、CSS を使用して画像の高さと幅を指定します。さらに、img クラスに不透明度 0 の値を追加しました。

さらに、アニメーション クラスに「transition」プロパティと「opacity」プロパティを追加しました。最初、画像には「animate」クラスが含まれていません。ユーザーがボタンをクリックすると、FadeIn() 関数が実行され、「animate」クラスが画像に追加されます。

出力では、「animate」クラスを追加すると画像がフェードインすることがわかります。

リーリー

jQuery の fadeIn() メソッドと fadeout() メソッドを使用して、画像にフェード トランジションを追加します

JQuery の fadeout() メソッドを使用すると、フェードインおよびフェードアウト効果を使用して Web ページから画像を削除できます。 fadeIn() メソッドを使用すると、フェード効果のある画像を Web ページに追加できます。

ここでは、 fadeout() メソッドと fadeIn() メソッドを使用して、画像トランジションに適切なフェード効果を追加します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って JQuery の fadeout() メソッドと fadeIn() メソッドを使用して、画像トランジションにフェード効果を追加できます。

リーリー

上記の構文では、現在の変数は Web ページに表示される画像を追跡します。 fadeIn() メソッドを使用して、現在の画像を表示し、他のすべての画像を非表示にします。

＃＃＃ステップ＃＃＃

ステップ 1

– クラス名を使用してすべてのイメージにアクセスします。

ステップ 2

– for ループを使用してすべての画像を反復処理し、画像の表示プロパティを使用して最初の画像以外をすべて非表示にします。

ステップ 3 – 「current」という変数を作成し、ゼロに初期化します。

ステップ 4 – startImageTrans() 関数を作成し、その中で setInterval() メソッドを使用して、3500 ミリ秒ごとに fade() 関数を呼び出します。ただし、ユーザーは自分のニーズに応じて時間間隔を設定できます

ステップ 5 – fade() 関数内で、JQuery の eq() メソッドを使用して現在の子にアクセスします。現在の画像を非表示にするには、fadeout() メソッドを使用します。

ステップ 6 – 現在の変数の値を 1 増やすか、画像の総数より大きい場合は 0 に設定します。

ステップ 7 – fadeIn() メソッドを使用して、現在の画像を表示します。 ＃＃＃例＃＃＃

以下の例では、HTML div 要素を作成し、5 つの異なる画像を追加します。すべての画像に対して上記のアルゴリズムを JavaScript で 1 つずつ実装し、フェード トランジション効果を加えました。

リーリー CSS トランジション プロパティを使用して画像トランジションにフェード効果を追加する

このメソッドでは、HTML 要素の背景画像を設定します。さらに、HTML 要素の背景にフェード トランジションを追加します。したがって、背景を変更するたびに、フェードインまたはフェードアウトします。

＃＃＃文法＃＃＃ ユーザーは、CSS トランジション プロパティを使用して、次の構文に従って背景画像にフェード効果を追加できます。 リーリー

背景画像を要素に追加し、上記の構文で CSS を使用して背景に「遷移」しました。 JavaScript を使用して背景画像を変更すると、画像にフェード トランジションが自動的に適用されます。

＃＃＃例＃＃＃

以下の例では、div 要素に初期背景画像が含まれています。さまざまな背景画像の URL を含む画像配列を作成しました。 setInterval() メソッドを使用して、3000 ミリ秒ごとに fadeInImage() 関数を呼び出します。

fadeInImage()関数では、背景画像を繰り返し変更し、画像が変更されるとCSSを使用してフェードトランジションを実行します。

リーリー

画像トランジションにフェード効果を追加する 3 つの方法を学びました。 2 番目のメソッドでは JQuery の fadeIn() メソッドと fadeout() メソッドを使用し、1 番目と 3 番目のメソッドでは CSS の「transition」プロパティを使用しました。

以上がJavaScript を使用してフェード効果を備えた画像トランジションを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。