<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script>
window.onload = function(){
var two = document.getElementById('two');
document.onscroll = function(){
var temp = document.documentElement.scrollTop;//用于获取滚动条距离页面头部的距离
//如果页面向下滚动大于或等于200px则执行ani1动画,否则执行ani2动画
if(temp>=200){
two.style['animation-name']='ani1';
}else{
two.style['animation-name']='ani2';
}
if(temp>=400){
three.style['animation-name']='ani1';
}else{
three.style['animation-name']='ani2';
}
}
}
</script>
<style>
.one{
width: 200px;
height: 200px;
background-color: coral;
}
#two{
width: 200px;
height: 200px;
margin-top: 100px;
background-color: cyan;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}
#three{
width: 200px;
height: 200px;
margin-top: 100px;
background-color: lightsalmon;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}
//动画中最主要的就是设置opacity,由0变为1就是出现,1变0就是消失,这里添加的rotateX是让板块出现时有前后晃动的效果
@keyframes ani1{
0%{
opacity: 1;
transform:rotateX(-90deg);
}
/* 25%{transform:rotateX(45deg);} */
50%{transform:rotateX(25deg);}
/* 75%{transform:rotateX(14deg);} */
100%{
opacity: 1;
transform:rotateX(0deg);
}
}
@keyframes ani2{
0%{
opacity: 1;
transform:rotateX(-20deg);
}
100%{
opacity: 0;
transform: skewX(0deg);
}
}
</style>
</head>
<body>
<div class="one"></div>
<div id="two" class="two">1321321321</div>
<div id="three">3333333</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
下滑页面出现div,并有前后晃动的效果(JS实现)
最新推荐文章于 2022-03-10 15:29:11 发布