下滑页面出现div,并有前后晃动的效果(JS实现)

最新推荐文章于 2021-06-10 12:31:41 发布

wokkey

最新推荐文章于 2021-06-10 12:31:41 发布

阅读量1k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_46363283/article/details/105668450

版权

<!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>

wokkey

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
下滑页面出现div,并有前后晃动的效果(JS实现)

<!doctype html><html><head> <meta charset="UTF-8"> <title>test</title> <script> window.onload = function(){ var two = docume...
复制链接

扫一扫