如何实现JavaScript定义的背景与视频同步淡入效果

调整步骤 #

你只需要对CSS和JS做两处修改即可实现背景和视频同步淡入，核心逻辑是让两者使用完全相同参数的淡入动画，同时触发：

1. 修改CSS代码

将原JS中硬编码的背景样式封装为CSS类，同时让该类触发和视频容器一致的淡入动画：

.hide {
  display: none;
  opacity: 0;
}

/* 背景样式类，包含你定义的网格背景和淡入动画 */
body.grid-bg {
  background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal);
  background-size: 165px 165px;
  /* 和视频容器完全相同的淡入参数 */
  opacity:0;
  animation: fade 5s ease 0s forwards;
}

.container:not(.hide){
   opacity:0;
   animation: fade 5s ease 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

2. 修改JS代码

移除原来硬编码设置body背景的代码，替换为点击时给body添加我们定义好的grid-bg类，和视频容器的淡入触发逻辑同步执行：

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentElement.querySelector(".container");
    // 同时触发视频容器和背景的淡入
    show(thewrap);
    document.body.classList.add("grid-bg");
    videoPlayer.play();
  }

  const cover = document.querySelector(".play");
  cover.addEventListener("click", coverClickHandler);
}());

如果有初始body背景的需求，你可以给body选择器添加默认的background属性即可，不会影响淡入逻辑。

内容的提问来源于stack exchange，提问作者user16466354