首頁猿問這種滾動動畫效果是怎么實現的？

這種滾動動畫效果是怎么實現的？

JavaScript

胡子哥哥 2018-09-05 17:26:39

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>

#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>

</head>

</div>

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>

反對回復 2018-10-17

1 回答
0 關注
1365 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

這種滾動動畫效果是怎么實現的？

這種滾動動畫效果是怎么實現的？

1 回答

添加回答

這種滾動動畫效果是怎么實現的？