jQuery超酷背景视觉差特效插件Jarallax.js

所属分类:-

 46639  359  查看评论 (5)
分享到微信朋友圈
X
jQuery超酷背景视觉差特效插件Jarallax.js ie兼容10

简要教程

Parallax ImageScroll是一款效果非常炫酷的滚动背景图片视觉差特效jQuery插件。该背景图片视觉差插件使用CSS3 transform来制作动画效果,并在不支持CSS3属性的浏览器上提供回退方案。

该背景图片视觉差插件在移动触摸设备上不使用视觉差效果,并且图片会被相应的设置为小图片。它还能和AMD兼容,通过RequireJS来使用:

require(['jquery.imageScroll'], function (ImageScroll) {
    $('.img-holder').each(function () {
        new ImageScroll(this);
    });
    //or
    //$('.img-holder').imageScroll();
});

安装

可以通过bower来安装这个视觉差特效插件。

bower install Parallax-ImageScroll

该图片背景视觉差特效插件需要jQuery1.8以上版本的jQuery。

使用方法

HTML结构

<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方法来初始化该插件。

$('.img-holder').imageScroll();

配置参数

你可以通过传递一个参数对象来覆盖默认的参数配置。

$('.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)。

<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属性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()

你可以在某个单独的实例或所有的实例上调用这些方法。

//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();

移动触摸设备

这个视觉差特效的过渡效果在移动触摸设备上不是十分的好,你可以在移动触摸设备上禁用视觉差效果,并提供一个回退版本,该版本没有视觉差效果,只显示图片。你可以通过外部库如Modernizr来检测是否是移动触摸设备,然后动态的设置参数来调整它们。

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

注意事项

如果你需要在作为背景视觉差效果的图片上添加内容,请为你的内容设置一个较高的z-depth属性。(添加自定义内容的效果只能在支持3d transforms的浏览器中实现)例如:

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

一个很不错的bootstrap后台模板

一个很不错的bootstrap后台模板,具备了优秀的bootstrap插件和视觉效果
 
 47314  465

极简的焦点图

极简的焦点图多种轮播效果。
 
 33092  339

jquery横向纵向时间轴

demo1是纵向时间轴,demo2是横向的,
 
 45260  410

jQuery移动端翻书插件Turn.js

Turn.js移动端实现翻书效果
 
 33973  378

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    平凡世界 0
    2017/4/6 14:36:34
    相信自己…… 0
    2016/10/21 16:10:37
    分形科技-刘豫川 0
    2016/8/5 20:08:31
    wo cao bu zhi chi zhong wen 回复
    Empsolo 0
    2016/5/14 7:05:43
    的确是很好
        Dream0
        2016/9/6 18:09:37
        谢谢
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复