js+css元素动态出现,前端让元素从底部动态显现,前端让元素从底部跳跃显示

实现效果

实现原理

一点也不复杂,耐心看完,思路理解后直接复制粘贴即可使用

1.为想要动态出现的元素添加指定class类名,我这里用(animate-element)

2.监听屏幕滚动,屏幕滚动时,如果屏幕高度减去元素顶部相对于屏幕的位置大于0的话,说明已经滚动到当前元素,然后给这个元素添加class动画,从而实现元素动态出现的效果

3.下方封装的代码可以在元素标签上添加自定义动画和延迟时间,没有添加自定义的话统一默认效果

html

//若无需特殊处理,用默认的即可
<div class="animate-element"></div>


//若需要对某个元素进行特殊处理,只为此元素添加特点的clss类与动画延迟时间,data-animation与data-animationDelay是下方js封装的自定义的css动画效果类名与延迟时间
<div class="animate-element" data-animation="fly-down" data-animationDelay="3000"></div>

css

.animate-element {
  opacity: 0;
}

.animated {
  animation-duration: 0.5s;
}

.fly-up {
  animation-name: fly-up;
  animation-fill-mode: both;
  animation-duration: 0.5s;
}
@keyframes fly-up {
  0% {
    -webkit-transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

js

function onScroll() {
  // 获取所有具有 "animate-element" 类的 DOM 元素
  var doms = document.getElementsByClassName("animate-element");
  if (!doms) {
    return;
  }

  // 遍历这些 DOM 元素
  for (var i = 0; i < doms.length; i++) {
    var dom = doms[i];

    // 如果元素已经有 "animated" 类，则跳过该元素
    if (dom.className.indexOf("animated") > -1) {
      continue;
    }

    // 获取元素的位置信息
    var domRect = dom.getBoundingClientRect();
    // 计算元素顶部距离窗口顶部的高度
    var domVisibleHeight = window.innerHeight - domRect.top;

    // 如果元素距离窗口顶部的高度大于 100 像素，开始动画
    if (domVisibleHeight > 100) {
      // 获取元素数据集中的动画类型，默认为 "fly-up"
      var animation = dom.dataset.animation || "fly-up";
      // 获取元素数据集中的动画延迟时间
      var animationDelay = dom.dataset.animationDelay;

      // 添加 "animated" 类以标识元素已经被动画
      dom.className = dom.className + " animated";

      if (!animationDelay) {
        // 如果没有动画延迟，立即添加动画类
        dom.className = dom.className + " " + animation;
      } else {
        // 如果有动画延迟，使用 setTimeout 在指定延迟后添加动画类
        (function (_dom) {
          setTimeout(function () {
            _dom.className = _dom.className + " " + animation;
          }, animationDelay);
        })(dom);
      }
    }
  }
}

// 为窗口的 scroll 事件添加 onScroll 事件处理器
window.addEventListener("scroll", onScroll, false);