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

来源：互联网发布：薛进文饶子和知乎编辑：程序博客网时间：2024/06/06 01:12

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

   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 0