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

近年来,关于鼠标滚动到当前页面从而触发动画效果十分的火热,例如网易的邮箱大师介绍页面就是采用类似的技术,点我,十分帅气,今天我们就来学习下这一效果。

一. 首先,我们先来了解一下这一效果实现的原理

1. 一个网页离不开基本的布局,第一步当然要先用HTML将所需要的结构写出来。
2. 这一效果的实现主要是结合CSS3的@keyframes动画(animation)来实现的。所以,这一阶段就需要将你所想要实现的动画效果用CSS3写出来。
3. 最重要的一步,就是利用JavaScript实现对相对应页面动画的触发。

二. 利用JavaScript来触发动画效果的执行(只着重介绍JS难点相关)
$(function(){
    $(window).scroll(function(){
        scrollAnimate();
    });
});

function scrollAnimate(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop >= $('.model').eq(2).offset().top-500){
        $('.flash1').animate({'left':'0'},500).addClass('animation1');
    }else if(scrollTop >= $('.model').eq(1).offset().top-500){
        $('.flash2').animate({'left':'0'},500).addClass('animation2');
    }else if(scrollTop >= $('.model').eq(0).offset().top-500){
        $('.flash3').animate({'left':'0'},500).addClass('animation3');
    }
}

JS代码块中的model是每一个将要产生动作的最外层盒子的class名字…… “-500”是指当需要产生动画的那个盒子距离顶部500px(可按自己实际需要进行更改)的时候,产生下方的动作。上述JS代码块只是呈现最基本代码需求。如果需要更复杂的效果,可自行定制。^_^

发表评论

电子邮件地址不会被公开。 必填项已用*标注