javascript - 这种滚动动画效果是怎么实现的？-PHP中文网问答

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()滚动不分上下方向- -上下滚动都是触发一样的内容

球有哪位大神有空帮忙看看这个网站上的那个动画效果，告诉我原理或者类似的简单实现方式，拜谢！

<!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> <p id="wrapper"> <p id="screen"></p> <p id="mark">love</p> <p id="dialog">ooo</p> <p id="cover">love</p> <p id="ohyeah"></p> </p> <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>

全部回复(3)

PHP中文网2017-04-11 13:10:26 3楼

原理：先给元素设置一个left值让其隐藏，当滚动条到一定位置，改变其left值让其出现。改变幅度与滚动幅度正相关。透明度那个也是同理。不过，其中要判断滚动条向上滚动还是向下滚动。我给你实现了其中一个，另外自己摸索实践一下。代码很粗糙，理解一下，也不要管我在意我的命名，就想快点给你搞出来，所以很粗糙。只考虑实现，没考虑性能。DOM操作你可以自行优化。

赞 +0

添加回复