简要教程
Parallax ImageScroll是一款效果非常炫酷的滚动背景图片视觉差特效jQuery插件。该背景图片视觉差插件使用CSS3 transform来制作动画效果，并在不支持CSS3属性的浏览器上提供回退方案。
该背景图片视觉差插件在移动触摸设备上不使用视觉差效果，并且图片会被相应的设置为小图片。它还能和AMD兼容，通过RequireJS来使用：
1 2 3 4 5 6 7 | require(['jquery.imageScroll'], function (ImageScroll) { $('.img-holder').each(function () { new ImageScroll(this); }); //or //$('.img-holder').imageScroll();}); |
安装
可以通过bower来安装这个视觉差特效插件。
1 | bower install Parallax-ImageScroll |
该图片背景视觉差特效插件需要jQuery1.8以上版本的jQuery。
使用方法
HTML结构
1 2 3 | <div class="img-holder" data-image="anImage.jpg"></div><section><p>Content that "slides" on top of the images</p></section><div class="img-holder" data-image="anotherImage.jpg">[optional content to be displayed on top of the images]</div> |
你可以通过HTML5 data属性或javascript来设置该插件的参数，参考后面的参数配置。
调用插件
在页面加载完毕之后，你可以在需要视觉差效果的图片上调用imageScroll方法来初始化该插件。
1 | $('.img-holder').imageScroll(); |
配置参数
你可以通过传递一个参数对象来覆盖默认的参数配置。
1 2 3 | $('.img-holder').imageScroll({ coverRatio: 0.5}); |
或者通过HTML5 data属性来设置参数，data-optionname可用的参数有： image, width (mediaWidth), height (mediaHeight), cover-ratio (coverRatio), min-height (holderMinHeight), max-height (holderMaxHeight), extra-height (extraHeight)。
1 | <div class="img-holder" data-image="anImage.jpg" data-cover-ratio="0.5"></div> |
或者你也可以设置全局的参数。
1 2 3 | $.fn.imageScroll.defaults.coverRatio = 0.5;//AMDImageScroll.defaults.coverRatio = 0.5; |
可用的参数有：
image: null：显示的图片（这个参数最好通过data属性data-img来设置）。
imageAttribute: 'image'：图片的data属性名称。使用这个参数值来调用图片。
container: $('body')：在那个容器中执行背景图片视觉差效果，默认是<body>。
windowObject: $(window)：窗口对象用于监听滚动和resize事件。
speed: 0.2：背景图片视觉差效果的滚动速度。它是一个0-1之间的浮点数，数值越大滚动越快。
coverRatio: 0.75 //75%：图片占整个屏幕的百分比。
holderClass: 'imageHolder'：图片占位符的class名称。
imgClass: 'img-holder-img'：图片的class名称。
holderMinHeight: 200：图片的最小高度，单位像素。
holderMaxHeight: null：图片的最大高度，单位像素。
extraHeight: 0：附加到图片上的额外高度。这可以增加图片的显示高度。
mediaWidth: 1600：图片的原始宽度。
mediaHeight: 900：图片的原始高度。
parallax: true：是否使用背景图片视觉差效果。例如在某些旧的浏览器上可以禁用视觉差效果。
touch: false：这是在手机或平板等小屏幕触摸设备上的方案。没有视觉差效果，使用小图片来显示。
公共方法
disable()
enable()
refresh()
destroy()
你可以在某个单独的实例或所有的实例上调用这些方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //Call method refresh on all the instances of the pluginvar instances = $('.img-holder');instances.imageScroll('refresh'); //E.g. Call method refresh on the first image//Alternative 1:var instances = $('.img-holder');var instance = $(instances.get(0));instance.imageScroll('refresh'); //Alternative 2:var instances = $('.img-holder');var instance = $(instances.get(0)).data('plugin_imageScroll');instance.refresh(); |
移动触摸设备
这个视觉差特效的过渡效果在移动触摸设备上不是十分的好，你可以在移动触摸设备上禁用视觉差效果，并提供一个回退版本，该版本没有视觉差效果，只显示图片。你可以通过外部库如Modernizr来检测是否是移动触摸设备，然后动态的设置参数来调整它们。
1 2 3 4 5 | var touch = Modernizr.touch;$('.img-holder').imageScroll({ imageAttribute: (touch === true) ? 'image-mobile' : 'image', touch: touch}); |
注意事项
如果你需要在作为背景视觉差效果的图片上添加内容，请为你的内容设置一个较高的z-depth属性。（添加自定义内容的效果只能在支持3d transforms的浏览器中实现）例如：
1 | <div class="img-holder" data-image="anotherImage.jpg"><p style="-webkit-transform: translateZ(1px)">Hello world!</p></div> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： css3过渡动画全屏导航菜单网页ui设计
- 下一个特效： jQuery和CSS3网页固定背景视觉差特效插件