css层滑入效果图

CSS层滑入效果图是Web前端开发中常见的一种动态效果，它可以通过CSS3的transition属性来实现。具体实现步骤如下：

/*CSS代码*/.slide-in {
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.5s ease-in-out;
}
.slide-in.active {
      opacity: 1;
      transform: translateY(0);
}
    

上述代码中，slide-in类名定义了元素处于不可见状态下的样式，包括透明度为0和垂直方向偏移量为10px。而active类名则定义了元素激活后的样式，包括完全不透明和垂直方向偏移量为0。

接下来，我们需要通过JavaScript来添加或移除active类名以触发滑入效果。代码如下：

// JavaScript代码const slider = document.querySelectorAll(".slide-in");
function debounce(func, wait = 20, immediate = true) {
      var timeout;
  return function() {
        var context = this,       args = arguments;
    var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
    }
    ;
        var callNow = immediate &
    &
     !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
  }
    ;
}
function checkSlide() {
      slider.forEach(slide =>
 {
        const slideInAt =      window.scrollY + window.innerHeight - slide.offsetHeight / 2;
        const slideBottom = slide.offsetTop + slide.offsetHeight;
        const isHalfShown = slideInAt >
     slide.offsetTop;
        const isNotScrolledPast = window.scrollY  slideBottom;
        if (isHalfShown &
    &
 isNotScrolledPast) {
          slide.classList.add("active");
    }
 else {
          slide.classList.remove("active");
    }
  }
    );
}
    window.addEventListener("scroll", debounce(checkSlide));
    

上述代码中，我们使用了debounce函数来达到函数节流的效果。函数checkSlide通过遍历所有.slide-in元素来判断当前滚动位置是否达到了元素的中心位置，并根据情况添加或移除active类名。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！