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’
});});
