B站秋季頭部影片

實作步驟

1.實作一個多圖層組合的靜態界面
2.實作不同圖層不同清晰度配置
3.實作滑鼠左右移動導致的清晰度變化
4.實作滑鼠左右移動導致的跟隨位移
5.實作小女生的眨眼效果
6.實作滑鼠離開時整個效果的還原

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B站秋季頭部影片</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="banner">
      <div class="image">
        <img width="3000" height="250" src="./images/bg.png" />
      </div>
      <div class="image">
        <img width="1800" height="165" src="./images/girl1.png" />
      </div>
      <div class="image">
        <img width="3000" height="250" src="./images/grassland.png" />
      </div>
      <div class="image">
        <img width="1800" height="160" src="./images/mushroom.png" />
      </div>
      <div class="image">
        <img width="1800" height="165" src="./images/spirit.png" />
      </div>
      <div class="image">
        <img width="1950" height="178" src="./images/leaf.png" />
      </div>
    </div>

    <script>
      let x = 0;
      let x_new = 0;
      let x_offset = 0;

      let banner = document.querySelector(".banner");
      let images = document.querySelectorAll(".image");

      let window_width = document.documentElement.clientWidth;
      let step = window_width / 2 / 5; // 螢屏移動 1/2 螢屏寬度，模糊度發生 5px 變化
      //   console.log("step: ", step);
      let data_images = [
        { x: 0, b: 4 },
        { x: 0, b: 0 },
        { x: 0, b: 1 },
        { x: 0, b: 4 },
        { x: 0, b: 5 },
        { x: 0, b: 6 },
      ];

      // 初始函式
      let init = () => {
        for (const key in images) {
          if (images.hasOwnProperty(key)) {
            const element = images[key];
            const element_data = data_images[key];
            element.children[0].style = `transform: .2s linear; transform: translate(${element_data.x}px); filter: blur(${element_data.b}px);`;
          }
        }
      };

      // 滑鼠懸停
      banner.addEventListener("mouseover", (e) => {
        x = e.clientX;
        // console.log(x);
      });

      // 滑鼠移入
      banner.addEventListener("mousemove", (e) => {
        x_new = e.clientX;
        // console.log(x_new);
        x_offset = x - x_new;
        // console.log(x_offset);
        for (const key in images) {
          if (images.hasOwnProperty(key)) {
            let level = (6 - parseInt(key)) * 10;
            const element = images[key];
            const element_data = data_images[key];
            let b_new = Math.abs(element_data.b + x_offset / step);
            let l_new = 0 - x_offset / level;
            element.children[0].style = `transform: translate(${l_new}px);filter:blur(${b_new}px);`;
          }
        }
      });

      // 滑鼠移出恢復默認
      banner.addEventListener("mouseout", (e) => {
        init();
      });

      // 小女孩眨眼函式
      let blink_index = 0;
      let timeout = 4000;
      let blink = () => {
        if (blink_index == 4) {
          blink_index = 1;
          timeout = 4000;
        } else {
          blink_index += 1;
          timeout = 30;
        }

        images[1].children[0].src = `images/girl${blink_index}.png`;
        setTimeout(() => {
          blink();
        }, timeout);
      };

      // 觸發初始函式和小女孩眨眼函式
      window.onload = () => {
        init();
        blink();
      };
    </script>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #2c3e50;
  font-family: "Montserrat", Arial, sans-serif, "Microsoft Yahei";
}

.banner {
  position: relative;
  width: 100vw;
  height: 155px;
  overflow: hidden;
  background-color: #00b894;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

實作效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/173762.html

標籤：java

上一篇：兩年java提問

下一篇：Node.js 第三天學習總結