JavaScript を使用して、ズームやフェードのアニメーションを追加しながら、画像の上下のスライド切り替え効果を実現するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用して、ズームやフェードのアニメーションを追加しながら、画像の上下のスライド切り替え効果を実現するにはどうすればよいですか?

PHPz

リリース： 2023-10-20 17:15:11

オリジナル

1090 人が閲覧しました

JavaScript 如何实现图片的上下滑动切换效果同时加入缩放和淡入淡出动画？

JavaScript ズームとフェードのアニメーションを追加しながら、画像の上下のスライド切り替え効果を実現するにはどうすればよいですか?

Web デザインでは、ユーザーエクスペリエンスを向上させるために画像切り替え効果がよく使用されます。これらの切り替え効果の中でも、上下のスライド、ズーム、フェードアニメーションは比較的一般的で魅力的です。この記事では、JavaScript を使用してこれら 3 つのアニメーション効果を組み合わせて実現する方法を紹介します。

まず、HTML を使用して、表示する画像要素を含む基本的な Web ページ構造を構築する必要があります。以下は HTML コードの例です。

<!DOCTYPE html>
<html>
<head>
  <title>图片切换效果</title>
  <style>
    .container {
      position: relative;
      width: 500px;
      height: 300px;
      overflow: hidden;
    }
    
    .slide {
      position: absolute;
      display: none;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="slide" src="image1.jpg">
    <img class="slide" src="image2.jpg">
    <img class="slide" src="image3.jpg">
  </div>
  
  <script src="main.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、それぞれが「slide」クラスを持つ 3 つの画像要素を含むコンテナ div を使用します。このうち、コンテナクラスはコンテナのスタイルを定義し、スライドクラスはピクチャ要素のスタイルを定義します。コンテナのオーバーフロー属性を非表示に設定することにより、コンテナを超えた絵要素の部分の非表示効果が実現されます。

次に、JavaScript を使用して、画像の上下のスライド切り替え、スケーリング、フェードインおよびフェードアウトのアニメーション効果を実現する必要があります。以下は JavaScript コードの例です。

window.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.slide');
  var currentIndex = 0;
  
  function showSlide(index) {
    // 隐藏当前显示的图片
    slides[currentIndex].style.display = 'none';
    
    // 显示指定索引的图片
    slides[index].style.display = 'block';
    
    // 设置当前索引
    currentIndex = index;
  }
  
  function animateSlide(index) {
    var slide = slides[index];
    
    // 先缩小图片
    slide.style.transform = 'scale(0)';
    slide.style.opacity = 0;
    
    // 等缩放动画完成后，再展示出来
    setTimeout(function() {
      slide.style.transition = 'transform 0.5s, opacity 0.5s';
      slide.style.transform = 'scale(1)';
      slide.style.opacity = 1;
    }, 100);
  }
  
  function nextSlide() {
    var nextIndex = currentIndex + 1;
    
    if (nextIndex >= slides.length) {
      nextIndex = 0;
    }
    
    showSlide(nextIndex);
    animateSlide(nextIndex);
  }
  
  // 每隔3秒切换到下一张图片
  setInterval(nextSlide, 3000);
});

ログイン後にコピー

上記のコードでは、最初に document.querySelectorAll('.slide') を通じて slide クラスを持つすべての画像要素を取得し、それらを slides 変数に保存します。 currentIndex は、現在表示されている画像のインデックスを記録するために使用されます。

次に、指定されたインデックスに画像を表示するように showSlide 関数が定義されます。関数では、現在表示されている画像要素の表示属性を「none」に設定して非表示にし、指定されたインデックスにある画像要素の表示属性を「block」に設定して表示します。

animateSlide 関数は、画像のズームおよびフェード効果を実現するために使用されます。この関数では、最初に画像要素の変換プロパティと不透明度プロパティを縮小状態と透明度 0 に設定します。次に、setTimeout 関数によって 0.1 秒遅延し、イメージ要素の遷移、変換、不透明度の属性を拡大と透明度の状態に 1 に設定します。トランジション属性の設定により、フェードインおよびフェードアウトのプロセス中にトランジション効果が発生します。

最後に、nextSlide 関数を使用して画像の切り替えを実現します。この関数では、まず次の画像のインデックスを計算し、それを表示し、それぞれ showSlide 関数と animateSlide 関数を通じてアニメーション効果を追加します。

ウィンドウオブジェクトの DOMContentLoaded イベントで、上記の操作を実行します。また、setInterval 関数を使用して、3 秒ごとに次の画像に自動的に切り替わるようにタイマーを設定します。

上記の HTML および JavaScript コードと組み合わせることで、画像の上下スライド切り替え効果を実現し、ズームおよびフェードアニメーション効果を追加しました。このようにして、画像の切り替えがより鮮やかで魅力的になり、ユーザーにウェブブラウジングのより良い体験を提供します。この例の画像パスは実際の状況に応じて調整する必要があることに注意してください。

以上がJavaScript を使用して、ズームやフェードのアニメーションを追加しながら、画像の上下のスライド切り替え効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。