Question

要开始构建具有视差效果的单页网站，视差效果对我来说是新的，如何编码与下面的参考网站https://www.fitbit.com/in/charge相同。

请协助完成任务。

Answer 1

视差效果的关键点是监视器＆＃34; scrolltop＆＃34;窗口。您也可以在没有任何第三方库的情况下实现您的视差页面

   var $win = $(window);
   $win.on('scroll',function(){
       var top = $win.scrollTop();
       if(top > ... &&　top < ...){
          //do something
       }else if(top > ... && top < ...){
          // do something else
       }

   })

并且您的指定参考站点以这种方式实现：

一个。创建两个层，一个是普通的（A部分），另一个是固定的（B部分）。 A部分分为三部分（A部分，B部分，C部分）; A部分： A节， B部分（身高= $（窗口）。身高（）* 4）， C节 B部分： height = $（window）.height（），display：none;

湾监视$（窗口）.scrollTop（），当用户滚动DOWN $（窗口）.height（） - sectionA.height时，显示partB。

℃。由于您只使用固定定位的图层覆盖partA，用户仍然可以向下滚动。并且您可以根据$（window）.scrollTop（）;

执行某些操作

d。当$（窗口）.scrollTop＆gt; sectionA.height + sectionB.height - $（window）.height。隐藏partB，用户只能看到sectionC。

顺便说一句，如果你试图自己实现视差效果，不要忘记处理＆＃34; window.resize＆＃34;事件一旦窗口调整大小，一切都会改变。

视差与褪色效果背景图像？

1 个答案: