js+css元素动态出现,前端让元素从底部动态显现,前端让元素从底部跳跃显示
一麻袋开心呀 2024-08-07 10:33:07 阅读 77
实现效果
实现原理
一点也不复杂,耐心看完,思路理解后直接复制粘贴即可使用
1.为想要动态出现的元素添加指定class类名,我这里用(animate-element)
2.监听屏幕滚动,屏幕滚动时,如果屏幕高度减去元素顶部相对于屏幕的位置大于0的话,说明已经滚动到当前元素,然后给这个元素添加class动画,从而实现元素动态出现的效果
3.下方封装的代码可以在元素标签上添加自定义动画和延迟时间,没有添加自定义的话统一默认效果
html
<code>//若无需特殊处理,用默认的即可
<div class="animate-element"></div>code>
//若需要对某个元素进行特殊处理,只为此元素添加特点的clss类与动画延迟时间,data-animation与data-animationDelay是下方js封装的自定义的css动画效果类名与延迟时间
<div class="animate-element" data-animation="fly-down" data-animationDelay="3000"></div>code>
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);
上一篇： 前端直连小票打印机，前端静默打印，js静默打印解决方案
下一篇： npm下载报错npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! network re
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。