滚动视觉差原理

原创 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滚动的基本速度。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

一个简单的视觉差效果

如何用一个简单的视觉差来做出一个看似酷炫的效果
  • warm92
  • warm92
  • 2015-12-14 12:34
  • 1338

CSS3 滚动视觉差效果

  • 2016-05-25 14:45
  • 3.23MB
  • 下载

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

可以看看,为你的网站寻找些灵感哦。 Cover Image by: Wang Qi@DamnDigital 视觉差滚动效果意为多种背景层可以横向及纵向各自滚动。这个惊人的视效最早出现在 N...

合成全景图中计算机视觉技术的知识和原理

(本文部分内容摘自http://www.guokr.com/post/445059/,) 

3D视觉原理之深度暗示(即立体感)

本文总结了产生深度暗示(即立体感)的几种情况 产生深度暗示主要有两种:心理深度暗示和生理深度暗示。 心理深度暗示主要由平时的经验积累获得。即使用单眼观看也会使人有3D效果。它主要包括以下几种: 视网膜...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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