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

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

   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名字。从而实现动画效果。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值