这种滚动动画效果是怎么实现的？
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们
原理：先给元素设置一个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>
随时随地看视频慕课网APP
相关分类
JavaScript