【Web前端问题】这种滚动动画效果是怎么实现的?

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

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

回答:

原理:先给元素设置一个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>

回答:

scrollTop

回答:

自行摸索结果- -

function scrollTest() {

var elLeft = $('.elLeft'),

elRight = $('.elRight');

var offsetTop = $('.elLeft').offset().top;

// 滚动事件

$(window).scroll(function() {

//实时变化的浏览器窗口滚动条

var wt = $(this).scrollTop(),

wh = $(this).height();

//delta为left将要偏移的值

var delta = wt + wh - offsetTop;

//只有当元素出现在可视区域时,才使left发生位移

if (delta < 0) {

delta = 0;

}

// 判断元素left偏移到某个值时,停止动画

$(delta <= 500 ? animeLeft(delta, true) : animeLeft(delta, false));

});

//动画函数左

function animeLeft(delta, flag) {

//判断是否继续调用动画函数

if (flag) {

elLeft.stop(true, false).animate({

left: delta

}, 200, function() {

// alert($(window).scrollTop());

});

}

}

要点:
1、为了更清楚简单地测试效果,这里默认元素elLeft的初始left为0
2、只有当elLeft进入可视区域才开始发生位移,改变left,所以没到可视区域(可视窗口高度+可视窗口之上高度<elLeft.offset().top)时,让偏移量一直保持0不动

问题:
1、由于浏览器不同,鼠标滚动的默认距离都是不同的,举例来说
chrome的$(window).scrollTop()默认是每次100高度,而firefox则是132高度

2、滚动条总长度不确定,举例来说:
如果整个滚动条长度是1123,每次滚动高度100,那么最后会多出23

实际测试结果,以上两个问题都会导致left偏移的量不均匀,就是说,会导致每次left加减100,但是突然变成只加减了23...

以上是 【Web前端问题】这种滚动动画效果是怎么实现的? 的全部内容, 来源链接: utcz.com/a/139092.html

回到顶部