这是一个轻量级的jQuery插件,让您移动水平视差的效果,同时向下滚动,
这是非常容易设置和要求几乎没有配置。
注:
通过使用这个插件,我们期待您知道水平视差滚动的局限性,例如,如果屏幕的高度小于内容,该内容将被裁剪,但这个插件反正为webdesigners和开发商的目的,所以我们认为你知道你在做什么。;-)
使用步骤
1)包括的css文件,jQuery和插件
2。)创建所需的元素,你要滚动(您可以建立正常的div,它包含其他元素,图片,视频......)
3。)指定下列属性你刚刚创建的元素:
position: fixed; //滚动元素的位置:固定
bottom: 0; //让它坚持底部(或顶部)
width: xxxxpx; //我建议分配像素的宽度,防止预紧问题
4)订单通过z-index值(请注意,建议前面层宽比在后面的)5层)。在你的JavaScript,请使用此代码(选择器的元素,你希望的滚动):
$ jInvertScroll(['yourselector1','yourselector2'...]);
如果你喜欢,你可以调整一些选项:
$.jInvertScroll(['.myScrollableElements'], {
width: 'auto', // Page width (auto or int value)
height: 'auto', // Page height (the shorter, the faster the scroll)
onScroll: function(percent) {
// Callback function that will be called each time the user
// scrolls up or down, useful for animating other parts
// on the page depending on how far the user has scrolled down
// values go from 0.0 to 1.0 (with 4 decimals precision)
}
});