在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 求問一個滾動時的JavaScript效果如何實現(xiàn)

求問一個滾動時的JavaScript效果如何實現(xiàn)

以前看到的,應(yīng)該是小米某個產(chǎn)品的頁面,也可能是其他品牌手機頁面,但是我找了很久都沒找到。
具體效果是,當(dāng)向下滾動鼠標(biāo)滾輪時,本來只是正常頁面滾動,到一個地方再向下滾動時,視覺上的效果是圖片橫向滾動,但是右側(cè)滾動條還是向下滾。更神奇的是,如果向上滾,圖片橫向滾動效果還會回退。也就是說,頁面上的動畫和滾動是一一對應(yīng)的,滾動停止,動畫也會停止,向回滾動,動畫也會向前播放。美團外賣的商品列表頁面也有這個效果。請問這個效果是怎么實現(xiàn)的?我想出的辦法是,算出滾動距離和動畫參數(shù)的關(guān)系,比如從0滾動到200,盒子寬度最終為400,那么把盒子寬度設(shè)置為scrollTop*2,然后監(jiān)聽滾動事件。是這樣的嗎

另外那個頁面還有一個地方不知道是怎么實現(xiàn)的。向下滾動到了一個地方后,一樣也是由正常滾動效果變?yōu)槠渌Ч?,但是滾動速度突然變得非常緩慢,過了這段以后,滾動速度又恢復(fù)正常,這是怎么做到的?為什么不是勻速的?

另求那個頁面

回答
編輯回答
糖果果

既然有想法了,為什么沒有去嘗試一下呢?

另外這種視差式的滾動基本由監(jiān)聽和頁面滾動的距離來設(shè)置某一塊的動畫效果而組成。你也可以看成當(dāng)你觸發(fā)某一個事件的時候js通過不停的改變頁面的視覺而形成的。good luck!

2017年5月17日 04:17