版权声明:本文为博主原创文章,未经博主允许不得转载。 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);
}
});
});