jQuery滚动视觉差插件Parallax.js

Parallax.js是一款jQuery滚动视觉差插件。Parallax.js插件小于1kb，它能够在页面滚动时为指定的背景图片制作炫酷的视觉差效果，并提供参数来控制视觉差动画的延迟，方向和速度等。

使用方法

在页面中引入jquery和jquery.parallax.js文件。

<script src="js/jquery.min.js"></script>
<script src="dist/jquery.parallax.js"></script>                  
                

HTML结构

使用一个块级元素作为视觉差效果的容器，并在里面放置一个用于制作图片背景的元素。

<section class="parallax-wrapper">
  <figure class="parallax-demo"></figure>
</section>
                

CSS样式

为背景图片添加一些样式。

.parallax-demo {
  position: relative;
  background-image: url(img/demo.img);
  background-size: cover;
  height: 1203px;
}                  
                

另外视觉差容器需要有一个固定的高度。

.parallax-wrapper {
  position: relative;
  height: 400px;
  overflow: hidden;
}                  
                

初始化插件

在页面DOM元素机制完毕之后，通过parallax()方法来初始化该背景图片视觉差插件。

$(function(){

  $(".parallax-demo").parallax();

});
                

配置参数

1、可以通过配置参数来设置滚动的速度。

$(function(){

  $(".parallax-demo").parallax({
    speed: '100'
  });

});                 
                

2、可以通过配置参数来设置滚动的方向。

$(function(){

  $(".parallax-demo").parallax({
    ascending: true, // false = bottom to top
  });

});             
                

3、可以通过配置参数来设置视觉差滚动的延迟时间。

$(function(){

  $(".parallax-demo").parallax({
    delay: '1000'
  });

});             
                

Parallax.js jQuery滚动视觉差插件的github地址为：https://github.com/JiiB/jQueryParallax