用JavaScript实现页面滚动到div区域div以动画方式出现CSS动画
页面滚动到一块区域，改区域以动画方式出现实现这个效果需要二点：一我们要先写好一个css动画，二：用js的监听页面滑动的距离在给div添加动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img {
width: 1000px;
height: 800px;
}
.box {
width: 500px;
height: 500px;
line-height: 500px;
text-align: center;
font-size: 50px;
color: red;
border: 1px solid;
}
/*设置动画*/
@keyframes key {
0% {
margin-left: -50px;
opacity: 0;
}
50% {
margin-left: 50px;
opacity: .5;
}
100% {
margin-left: 0;
opacity: 1;
}
}
</style>
</head>
<body>
<img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />
<img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />
<div class="box">div以动画方式出现</div>
<script>
var box = document.querySelector(".box");
//用js检测鼠标滚轮距离顶部位置来给div添加动画
document.onscroll = function() {
//检测鼠标滚轮距离顶部位置
var top = document.documentElement.scrollTop || document.body.scrollTop;
console.log(top);
//数值要设置到DIV显示出来时再给div添加动画要不就看不到动画了
if(top > 1000) {
box.style.animation = "key .25s linear 2"//添加动画
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/zimengxiyu/p/9781124.html
时间： 2024-10-10 16:45:57