Jquery鼠标滚动某个位置触发CSS3动画特效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36410795/article/details/84963888

1. 效果展示

---

2. 实现代码

根据鼠标滚动事件判断滚出去的(scrollTop)距离实现动画特效

$(function(){
    //main_up部分的滑动效果
    $('.main_up h1').animate( {
        top:190,
        opacity:0.9
    },2000 ) ;
	//鼠标滚动触发
    $(window).on('scroll',function (  ) {
        if ( $(window).scrollTop() >= 500 ){
            //淡入
            $('.part1').fadeIn(2000);
        }
        
        //main_down部分的滑动效果
        if ( $(window).scrollTop() >= 1000 ){
            //滑出
            $('.part2').slideDown(2000);
        }
        
        //从左滑出
        if ( $(window).scrollTop() >= 1800 ){
            $('.part3').animate({
                left:0
            },1500);
        }
        
        //淡出
        if ( $(window).scrollTop() >= 2600 ){
            $('.part4').animate({
                opacity : 1
            },2000);
        }
    });
});