滚动视觉差原理

最新推荐文章于 2024-06-30 08:30:00 发布

翊沐

最新推荐文章于 2024-06-30 08:30:00 发布

阅读量2.8k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/evilemon/article/details/49932125

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先要知道一个api

window.scrollTo(x,y)

其中x，y分别为滚动条向x，y方向移动的位置，如果网页宽度不够则不出现滚动条，设多少都没用。

$(function() {
  $(window).scroll(function(){
    var scrolled = $(this).scrollTop();
    $('#area1').css('top',(0-(scrolled*.75))+'px');
    $('#area2').css('top',(0-(scrolled*.5))+'px');
    $('#area3').css('top',(0-(scrolled*.25))+'px');
  });
});

三个区域都是绝对定位，只不过z-index的大小不同，这样当window滚动时，三个layer按不同速度滚动，基准速度是scroll，即window滚动的基本速度。