jInvertScroll - 一个轻量级的jQuery水平视差插件的
这是什么?
这是一个轻量级的jQuery插件,让您移动水平视差的效果,同时向下滚动,
这是非常容易设置和要求几乎没有配置。
注:
通过使用这个插件,我们期待您知道水平视差滚动的局限性,例如,如果屏幕的高度小于内容,该内容将被裁剪,但这个插件反正为webdesigners和开发商的目的,所以我们认为你知道你在做什么。;-)
1)包括的css文件,jQuery和插件
2。)创建所需的元素,你要滚动(您可以建立正常的div,它包含其他元素,图片,视频......)
3。)指定下列属性你刚刚创建的元素:
1 2 3 | position: fixed; //滚动元素的位置:固定 bottom: 0; //让它坚持底部(或顶部) width: xxxxpx; //我建议分配像素的宽度,防止预紧问题 |
4)订单通过z-index值(请注意,建议前面层宽比在后面的)5层)。在你的JavaScript,请使用此代码(选择器的元素,你希望的滚动):
1 | $ jInvertScroll([ 'yourselector1' , 'yourselector2' ...]); |
选项
如果你喜欢,你可以调整一些选项:
1 2 3 4 5 6 7 8 9 10 | $.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) } }); |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com