建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

Parallax ImageScroll简单易用的页面滚动时创建图像视差效果的jQuery插件

来源:易助科技网浏览量:51收藏

简介


Parallax ImageScroll是一个简单易用的jQuery插件,受Spotify.com启发,用于在滚动页面时创建图像视差效果。

(下载的附件中附有DEMO)


简单的Spotify类j似Query图片视差效果插件Parallax ImageScroll



使用


1. 引入文件


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.imageScroll.js"></script> 



2. HTML


标记html结构。通过data-*属性或javascript设置选项:


<div class="demo" data-image="img/1.jpg" data-width="1600" data-height="900"></div>

<section>
TEXT CONTENT
</section>

<div class="demo" data-image="img/2.jpg" data-width="1600" data-height="900"></div>

<section>
TEXT CONTENT
</section>

...



3. 调用


$('.demo').imageScroll({

  // The image to show.
  image: null, 

  // The data attribute name for images.
  // Uses the value of this attribute to load the image.
  imageAttribute: 'image', 

  // Class added to image holder(s). 
  holderClass: 'imageHolder', 

  // The element to which the parallax image(s) will be attached to.
  container: $('body'), 

  // The window object which listens to scroll and resize events
  windowObject: $(window),

  // The speed of the parallax effect. 
  speed: 0.2, 

  // How many percent of the screen each image should cover. 
  coverRatio: 0.75, 

  // The minimum height of the image in pixels.
  holderMinHeight: 200, 

  // The maximum height of the image in pixels
  holderMaxHeight: null,

  // Extra height added to the image. 
  extraHeight: 0, 

  // The original width of the image.
  mediaWidth: 1600, 

  // The original height of the image.
  mediaHeight: 900, 

  // Whether or not you want the parallax effect.
  parallax: true, 

  // Presents a mobile/tablet friendly version, 
  // no parallax effect and smaller images 
  // (should be used with a mobile/tablet optimized image)
  touch: false 

});



4. 配置


您可以通过将选项对象传递给插件来配置默认选项


$('.img-holder').imageScroll({
    coverRatio: 0.5
});


或通过数据属性、数据选项名称设置选项(可用选项:图像、宽度(mediaWidth)、高度(mediaHeight)、覆盖率(coverRatio)、最小高度(holderMinHeight),最大高度(holder MaxHeight)和额外高度(extraHeight):


<div class="img-holder" data-image="anImage.jpg" data-cover-ratio="0.5"></div>


或全局设置选项


$.fn.imageScroll.defaults.coverRatio = 0.5;
//AMD
ImageScroll.defaults.coverRatio = 0.5;


可配置选项:


image:null:要显示的图像(最好通过data attr(data img)设置此选项)

imageAttribute:“image”:图像的数据属性名称。使用此属性的值加载图像

container:$('body')视差图像将附加到的元素

windowObject:$(window)监听滚动和调整事件大小的窗口对象

speed:0.2视差效果的速度。一个介于0和1之间的浮动数字,其中较大的数字将更快地向上移动图像

覆盖率:0.75//75%每个图像应覆盖屏幕的多少百分比

holderClass:已将'imageHolder'类添加到图像持有者

imgClass:“img holder img”添加到图像的类

holderMinHeight:200图像的最小高度(以像素为单位)

holderMaxHeight:null图像的最大高度(以像素为单位)

extraHeight:0添加到图像的额外高度。如果您想显示更多顶部图像,这可能很有用

mediaWidth:1600图像的原始宽度

mediaHeight:900图像的原始高度

视差:true无论你是否想要视差效果,例如在古代浏览器中效果不佳

touch:ffalse呈现手机/平板电脑friendy版本,没有视差效果和较小的图像(应与手机/平板优化的图像一起使用)



5. 公共事件


imageScroll('disable');
imageScroll('refresh');
imageScroll('enable');
imageScroll('destroy');


您可以在单个实例或所有实例上调用它们。


//Call method refresh on all the instances of the plugin
var 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();



6. 触摸


在触摸设备上效果不是很平滑。因此,您可以向用户提供一个回退版本,该版本显示没有视差效果的图像。您可以通过检查触摸(例如,使用Modernizr、外部lib)并设置动态选项来进行调整。


var touch = Modernizr.touch;
$('.img-holder').imageScroll({
    imageAttribute: (touch === true) ? 'image-mobile' : 'image',
    touch: touch
});



💡  注意事项


建议使用 jQuery 1.8.0 或更高版本,在移动设备或IE<=9上工作不太好。然后,您可以通过禁用古代桌面浏览器的视差(将视差选项设置为false)来提供后备解决方案,并为触摸设备提供触摸优化图像(将触摸选项设置为true)。

如果在视差图像的顶部添加内容,请确保对内容应用更高的z深度(适用于支持3d转换的浏览器)。示例:


<div class="img-holder" data-image="anotherImage.jpg">
  <p style="-webkit-transform: translateZ(1px)">Hello world!</p>
</div>



相关链接


GitHub 地址 :  https://github.com/pederan/Parallax-ImageScroll

易助科技网效果演示地址1 :  http://demo.easyzone.net.cn/plugin/ImageScroll/demo/index.html

易助科技网效果演示地址2:  http://demo.easyzone.net.cn/plugin/ImageScroll/demo/container.html