如何使用 HTML、CSS 和 JavaScript 設計影片幻燈片動畫效果？

在本教程中，我們將討論如何使用 HTML、CSS 和 JavaScript 建立影片幻燈片動畫效果。這可以用來建立一種簡單而有效的方法來吸引注意力並吸引觀看者。

應用動畫效果

要應用動畫效果，我們將使用關鍵幀規則。這將告訴瀏覽器在一段時間內更改元素的 CSS 屬性。在我們的例子中，我們希望影片在螢幕上滑動，因此我們將使用transform屬性。

什麼是關鍵幀規則？

關鍵幀規則用於指定在動畫過程中將更改的 CSS 屬性。在我們的例子中，我們希望影片從左向右滑動，因此我們將使用以下 CSS：

@keyframes slide {
   from {
      transform: translateX(-100%);
   }
   to {
      transform: translateX(100%);
   }
}

將關鍵幀規則應用於影片元素

現在我們有了關鍵幀規則，我們需要將其應用於影片元素。我們透過使用animation屬性來實現這一點，並且我們設定關鍵幀規則的名稱（“slide”）、持續時間（4 秒）和計時函式（ease-in-out）：

video {
   animation: slide 4s ease-in-out;
}

新增播放/暫停按鈕

現在我們讓影片在螢幕上滑動，我們希望能夠控制它。我們可以透過新增一個播放/暫停按鈕來實現，該按鈕將啟動和停止影片動畫。

我們首先建立一個按鈕元素併為其賦予“play”的id：

<button id="play">Play</button>

然後，我們新增一些 CSS 來設定按鈕的樣式：

#play {
   background-color: #fff;
   border: none;
   color: #000;
   cursor: pointer;
   font-size: 16px;
   padding: 10px;
}

最後，我們新增一些 JavaScript 來切換影片的播放狀態：

var video = document.getElementById("video");
var play = document.getElementById("play");
play.addEventListener("click", function() {
   if (video.paused) {
      video.play();
      play.innerHTML = "Pause";
   } else {
      video.pause();
      play.innerHTML = "Play";
   }
});

演算法

  • 步驟 1 - 我們首先建立影片元素併為其賦予“video”的id。然後，我們為影片新增兩個源元素。

  • 步驟 2 - 接下來，我們建立按鈕元素併為其賦予“play”的id。然後，我們新增一些 CSS 來設定按鈕的樣式。我們將背景顏色設定為白色，顏色設定為黑色，字型大小設定為 16px，並新增 10px 的填充。

  • 步驟 3 - 在此之後，我們新增一些 JavaScript 來切換影片的播放狀態。我們首先獲取對影片和播放元素的引用。然後，我們為“click”事件新增一個事件監聽器。

  • 步驟 4 - 在事件監聽器函式內部，我們檢查影片是否已暫停。如果是，我們對影片元素呼叫play()方法，並將播放按鈕的innerHTML設定為“Pause”。如果影片未暫停，我們對影片元素呼叫pause()方法，並將播放按鈕的innerHTML設定為“Play”。

  • 步驟 5 - 最後，我們新增關鍵幀規則並將其應用於影片元素。我們將關鍵幀規則的名稱設定為“slide”，持續時間設定為 4 秒，計時函式設定為“ease-in-out”。

這將建立一個簡單的動畫，使影片從螢幕左側滑到右側。

示例

以下是使用 HTML、CSS 和 JavaScript 設計影片幻燈片動畫效果的完整工作程式。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Page Title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" media="screen" href="main.css">
   <script src="main.js"></script>
</head>
<body>
   <video id="video" width="400" controls>
      <source src="video.mp4" type="video/mp4">
      <source src="video.ogg" type="video/ogg">
      Your browser does not support the video tag.
   </video>
   <button id="play">Play</button>
   <script>
      var video = document.getElementById("video");
      var play = document.getElementById("play");
      play.addEventListener("click", function() {
         if (video.paused) {
            video.play();
            play.innerHTML = "Pause";
         } else {
            video.pause();
            play.innerHTML = "Play";
         }
      });
   </script>
   <style>
   @keyframes slide {
      from {
         transform: translateX(-100%);
      }
      to {
         transform: translateX(100%);
      }
   }
   video {
      animation: slide 4s ease-in-out;
   }
   #play {
      background-color: #fff;
      border: none;
      color: #000;
      cursor: pointer;
      font-size: 16px;
      padding: 10px;
   }
   </style>
</body>
</html>

在本教程中，我們討論瞭如何使用 HTML、CSS 和 JavaScript 建立影片幻燈片動畫效果。這可以用來建立一種簡單而有效的方法來吸引注意力並吸引觀看者。

更新於：2022年8月4日

1K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告