am:7:45 今天研究网页视差的制作,百度"视差滚动"的原理以及各种插件,基本上都是jquery的插件,寻找原生的看看.不过要先吃饭


大概理解了Parallax-Scrolling 这个视差滚动插件的原理
能够产生滚动区别的都是背景图片。

建立一个区块,为这个区块设置一个背景
在区块内设置需要产生视差滚动的图片代码,图片以背景调用
然后设置不需要产生视察滚动的内容

设置css,给需要产生视差滚动的代码设置默认位置以及一个很大的高度。

实现原理,js通过html中代码的参数,动态修改样式里的背景里的位置值,来让图片实现或快或慢,或上或下的运动。

html中的代码含义
section 是背景图片 js中有注明

data-speed="8" data-type="background" data-offsetY="100" data-Xposition="50%"

data-speed是方向和速度 比如8 就是往上1/8倍滚动速度,-2就是往下1/2倍滚动速度
这里滚动速度猜测是拖动页面的速度

data-offsetY 等价于 background-position里的y值,
data-Xposition 等价于 background-position里的x值,

成果如下:见天的求职简历