http://johnpolacek.github.io/...有个插件网站其中有一个滚动的动画效果：位置如下图1、向下滚动 左右两边的内容向中间移动2、而向上滚动 两个内容又退回到左右两边看下了网站的代码，发现它是这么写的witch (anim.attr('data-animation')) { case 'fly-in-left': anim .parent().css('overflow','hidden'); scrolldeck.controller.animate(anim, { delay: windowHeight/2, duration: windowHeight/2, property:'left', start:-1200 }); break; case 'fly-in-right': anim .parent().css('overflow','hidden'); scrolldeck.controller.animate(anim, { delay: windowHeight/2, duration: windowHeight/2, property:'right', start:-1200 }); break; animate()方法里的内容是另一个$.function类方法里封装了。。没法看懂- -自己试了下用$(window).scroll()方法 完全没法实现，因为scroll()滚动不分上下方向- -上下滚动都是触发一样的内容球有哪位大神有空帮忙看看这个网站上的那个动画效果，告诉我原理或者类似的简单实现方式，拜谢！
1 回答
MM们
TA贡献1886条经验 获得超2个赞
原理：先给元素设置一个left值让其隐藏，当滚动条到一定位置，改变其left值让其出现。改变幅度与滚动幅度正相关。透明度那个也是同理。不过，其中要判断滚动条向上滚动还是向下滚动。我给你实现了其中一个，另外自己摸索实践一下。代码很粗糙，理解一下，也不要管我在意我的命名，就想快点给你搞出来，所以很粗糙。只考虑实现，没考虑性能。DOM操作你可以自行优化。
<!DOCTYPE html>
<html>
<head>
<title>ohyeah</title>
<style type="text/css">
#wrapper {height: 100%;overflow: hidden;}
#screen {width: 300px;height: 800px;}
#mark{position: relative;width: 200px;height: 50px;font-size: 40px;left: -100px;}
#cover{position: relative;width: 200px;height: 50px;font-size: 40px;left: 1360px;}
#dialog {position: relative;width: 200px;height: 50px;margin: 0 auto;font-size: 20px;line-height: 50px;opacity: 0;}
#ohyeah {height: 800px;}
</style>
<script src="jquery.js" type="text/javascript"></script>
</head>
<div id="wrapper">
<div id="screen"></div>
<div id="mark">love</div>
<div id="dialog">ooo</div>
<div id="cover">love</div>
<div id="ohyeah"></div>
</div>
<script type="text/javascript">
var beforeScrollTop = $(window).scrollTop();
$(window).scroll(function() {
var afterScrollTop = $(window).scrollTop(),
updown = afterScrollTop - beforeScrollTop;
if( updown === 0 ) return false;
beforeScrollTop = afterScrollTop;
console.log(updown > 0 ? "down" : "up");
var isUpDown = updown > 0 ? "down" : "up"; //判断往上还是往下
var scrollTop = $(window).scrollTop();
if(isUpDown == 'down' && scrollTop >= 400) { //数据自取，可依据元素的scrollTop值
var markLeft = parseInt($('#mark').css('left'));
left = markLeft + (scrollTop/10); //值的变动与滚动幅度现相关 ， 自行调节
if(markLeft <= 640) { //这个值是让他滚动到一个边界 ， 自行调节
$('#mark').css('left', left + 'px'); //举例一个元素，其他的自己来咯
}
} else if(isUpDown == 'up' && scrollTop <= 700) { //往上时做相反
var markLeft = parseInt($('#mark').css('left'));
left = markLeft - (scrollTop/10);
if(markLeft >= -100) {
$('#mark').css('left', left + 'px');
}
}
//其他的如opacity left 同理，自己实践一下吧
});
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消