鼠标滑动到当前页面触发动画效果

最新推荐文章于 2024-09-21 11:48:19 发布

小白变怪兽

最新推荐文章于 2024-09-21 11:48:19 发布

阅读量2.2w

点赞数 9

分类专栏： css3 jQuery学习文章标签： jquery 动画

本文链接：https://blog.csdn.net/u013558749/article/details/46533929

版权

css3 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery学习

5 篇文章 0 订阅

订阅专栏

近年来，关于鼠标滑动到当前页面从而触发动画效果十分的火热，今天我们就来学习下这一效果。
一、首先，我们先来了解一下这一效果实现的原理

   1.一个网页离不开基本的布局，所以首先就是要先用html将所需要的结构布局出来（长页风格）。
   2.另外，这一效果的实现主要是结合css3的自定义动画（animation）来实现的。所以，这一阶段，就需要将你所想要实现的动画效果用css3样式实现出来。
   3.最后，这也是最重要的一步，就是利用javascript实现对相对应页面动画的触发。

二、接下来我们就来正式的学习一下这一效果

1.首先是利用html将最基本的长页布局出来（在这里作为案例，我就实现了两个页面，其中第二个页面就是我们所需要触发动画的页面），静态页面实现效果如下图所示(粉色页面中的图片就是我们要实现的动画对象):

这里写图片描述

实现代码如下：

<body>
<div class="box">
    <div class="two"></div>
    <div class="one">
        <h2><img class="img01" src="img/4.jpg" /></h2>
    </div>
</div>
</body>

2.接下来就是对样式的设置（在这里我们设置当第二页面距离顶部多少PX之后触发的动画效果样式<这里我们设置图片在被触发动画的时候放大并旋转了120度>）实现代码如下：

<style>
    * { margin:0; padding:0; }//reset css
    .box { width:100%; height:1500px; background:gray; } 
    .two { width:100%; height:500px; background:orange; }
    .one { width:100%; height:500px; background:pink; position:relative; }
    .one h2 { width:100%; }
    .one h2 img{ width:200px; height:200px; border-radius:50%;margin:0 0 0 -100px;left:50%; top:100px; display:block; position:absolute;}
    .animated { animation-duration:3s;-webkit-animation-duration:3s; -webkit-animation-fill-mode: both;animation-fill-mode: both; }
    .xuanzhuan { animation-name:xuanzhuan; -webkit-animation-name:xuanzhuan;}
    @keyframes xuanzhuan { 
        0% { opacity:0; transform:rotate(120deg);-webkit-transform:rotate(120deg);}
        50% { opacity:0.5; transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);}
        100% { opacity:1; transform: scale(1,1);-webkit-transform:scale(1,1);}
    }
    @-webkit-keyframes xuanzhuan { 
        0% { opacity:0; transform:rotate(120deg);-webkit-transform:rotate(120deg);}
        50% { opacity:0.5; transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);}
        100% { opacity:1; transform:scale(1,1);-webkit-transform:scale(1,1);}
    }

</style>

3.最后，就是利用javascript来触发动画效果的执行（此处我们设置当对象距离顶部300px的时候动画被触发）。

JS代码实现如下：

<script>
        function getTop(clsName){ 
            var obj = document.getElementsByClassName(clsName)[0];
            return obj.getBoundingClientRect().top;
        }

        function getDom(clsName){
            var obj=document.getElementsByClassName(clsName)[0];
            return obj;
        }



        window.addEventListener('scroll',function(){
            var scrollT=document.documentElement.scrollTop||document.body.scrollTop;

            /*第二页动画的触发*/
            if(getTop('one')<300){
                getDom('img01').classList.add('animated');
                getDom('img01').classList.add('xuanzhuan');

            }
        })
</script>

就这样，当我们滑动鼠标距离顶部300px的时候，图片的动画就会被触发。

补充：

其实要让动画在页面呈现的时候开始生效有很多种方法，下面再来说另外的一种方法，这也是我最近工作中用到的。(这里写的比较繁杂，其实可以先在css中写好动画效果，下方代码出直接写addClass就可以了。)

<script>
    $(function(){ 
        function myFn(){
            sT = $(window).scrollTop();
            if(sT >= $('.jump').eq(4).offset().top-1000){
                $('.si-left01').animate({'right':'0px'},500).addClass('opc1');
                $('.si-left02 ').animate({'left':'0px'},600).addClass('opc1');
                $('.si-left03 ').animate({'left':'85px'},700).addClass('opc1');
                $('.act').animate({'marginLeft':'-10px'}).addClass('opc1');
                $('.act').animate({'marginRight':'-10px'});
            }else if(sT >= $('.jump').eq(3).offset().top-1000){
                $('.fi-left01').animate({'left':'0px'},500).addClass('opc1');
                $('.fi-left02 ').animate({'right':'625px'},600).addClass('opc1');
                $('.fi-left03 ').animate({'right':'0px','top':'137px'},700).addClass('opc1');
                $('.fi-left04').animate({'right':'280px'},1000).addClass('opc1');
                $('.fi-left05').animate({'right':'175px'},1000).addClass('opc1');
                $('.cloud04').animate({'left':'0px'}).addClass('opc1');
            }else if(sT >= $('.jump').eq(2).offset().top-1000){
                $('.fo-left01').animate({'left':'0px',},500).addClass('opc1');
                $('.fo-left02 ').animate({'left':'100px','top':'73px'},600).addClass('opc1');
                $('.fo-left03 ').animate({'right':'350px','top':'137px'},700).addClass('opc1');
                $('.fo-left04').animate({'right':'0px'},1000).addClass('opc1');
                $('.cloud03').animate({'right':'0px'}).addClass('opc1');
            }else if(sT >= $('.jump').eq(0).offset().top-1000){
                $('.th-left01').animate({'left':'0px'},500).addClass('opc1');
                $('.th-left02 ').animate({'left':'0px'},600).addClass('opc1');
                $('.th-left03 ').animate({'right':'350px'},700).addClass('opc1');
                $('.th-left04').animate({'right':'0px'},1000).addClass('opc1');
                $('.cloud02').animate({'left':'0px'}).addClass('opc1');
                $('.two-left .left01').animate({'left':'0px'},500).addClass('opc1');
                $('.two-left .left02 ').animate({'left':'154px'},600).addClass('opc1');
                $('.two-left .left03').animate({'left':'280px'},700).addClass('opc1');
                $('.two-left .left04').animate({'left':'600px'},1000).addClass('opc1');
                $('.step1').animate({'right':'0px'}).addClass('opc1');
                $('.cloud01').animate({'right':'0px'}).addClass('opc1');
            }
        }
        $(function(){ 
            var sT;
            $(window).scroll(function(e) {
                myFn();       
            });
        })
    })
</script>

代码块中的jump是我给每一个会产生动作的最外层盒子加上的class名字。。。top-1000是指当需要产生动画的那个层次距离顶部1000px（可按自己实际需要进行更改）的时候，产生下方的动作。（这个的实现原理其实就与实现电梯导航的效果是一致的）。上方代码块只是实现最基本的左右移动。如果需要更复杂的效果，可以考虑在css样式中添加一个动画样式（animate），然后通过addClass()添加class名字。从而实现动画效果。