滚动视觉差原理

原创 2015年11月19日 19:07:38

首先要知道一个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滚动的基本速度。
版权声明:本文为博主原创文章,未经博主允许不得转载。

Stellar--视觉差滚动插件

插件下载地址:http://doc.bropaul.com/Stellar.js/ GitHub地址:https://github.com/markdalgleish/stellar.js 11个...
  • lllliulin
  • lllliulin
  • 2015年03月08日 17:13
  • 1801

三角测量原理与双目视觉景深恢复

1.引言 眼睛是灵敏的光学感觉器官,是一切动物与外界联系的信息接受器。众所周知人类依靠双眼可以感知现实世界:物体的颜色、距离、大小等。随着生物解剖学的发展,人们对人眼的生物结构及机能有了科学...
  • shenziheng1
  • shenziheng1
  • 2016年11月23日 10:52
  • 5048

双目相机--双目视差与深度距离关系推导详解

相机成像的模型如下图所示:         P为空间中的点,P1和P2是点P在左右像平面上的成像点,f是焦距,OR和OT是左右相机的光心。由下图可见左右两个相机的光轴是平行的。XR和XT是两个成...
  • xiaohaijiejie
  • xiaohaijiejie
  • 2015年11月08日 20:37
  • 9508

页面视觉差滚动效果

  • 2015年04月08日 15:37
  • 61KB
  • 下载

带视觉差效果的平滑单页滚动jQuery插件

  • 2016年07月25日 01:16
  • 90KB
  • 下载

bootstrap实现视觉滚动差效果主页

  • 2017年05月12日 18:03
  • 2.89MB
  • 下载

Parallux响应式网页滚动视觉差特效

  • 2017年05月02日 15:51
  • 531KB
  • 下载

CSS3 滚动视觉差效果

  • 2016年05月25日 14:45
  • 3.23MB
  • 下载

带视觉差效果的平滑单页滚动jQuery插件

  • 2017年07月05日 15:23
  • 81KB
  • 下载

11个视觉差滚动效果的HTML5网站

可以看看,为你的网站寻找些灵感哦。 Cover Image by: Wang Qi@DamnDigital 视觉差滚动效果意为多种背景层可以横向及纵向各自滚动。这个惊人的视效最早出现在 N...
  • Tizian
  • Tizian
  • 2012年07月23日 09:39
  • 714
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:滚动视觉差原理
举报原因:
原因补充:

(最多只允许输入30个字)