视觉差插件parallux和rellax

jQuery Parallux

jQuery Parallux是一款可制作响应式网页滚动视觉差特效的jQuery插件。通过该插件可以制作背景图像，图像，视频，文本等HTML元素的滚动视觉差效果。它的特点还有：
1. 轻量级，压缩后的版本只有4KB大小。
2. 可以制作任何元素的视觉差效果。
3. 可以分别制作前景层和背景层，不同层的滚动速度可以不相同。
4. 如果浏览器不支持CSS3 translate3D，图层将固定显示，不会有视觉差效果。
5. 可以设置在移动手机上禁用视觉差效果。

基本html格式如下：

    <link rel="stylesheet" href="jquery.parallux.min.css">
    <div class="parallux">
        
        <div class="parallux-bg" id="bg-1>
            
            
parallux-inner">
                
                <div class="text">div>
            div>
        div>
        
        <div class="text">div>
    div> 
    <script type="text/javascript" src="custom.modernizr.min.js">script>
    <script src="jquery.min.js">script>
<script src="jquery.parallux.min.js">script>

自己定义的css样式

#bg-1, #bg-2, #bg-3 {
  background-size: cover;
  background-position: 50%;
  background-color: #999; 
}
#bg-1 {
  background-image: url("../img/1.jpg"); 
}
#bg-2 {
  background-image: url("../img/2.jpg"); 
}
#bg-3 {
  background-image: url("../img/3.jpg"); 
}
.text {
  max-width: 90%;
  margin-left: 5%;
  position: absolute;
  text-align: center;
  color: #fff;
}
.text h2 {
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase; 
}
.text p {
    font-weight: 300;
    font-size: 1.2em; 
}

巨幕背景可以在#bg-1的样式中添加。
文字可以在背景层的div容器里添加，也可以在前景层里添加。在背景层的div容器里添加，有可能因为动画效果，一开始文字被挡住。在前景层里添加，文字不会被挡住。
要引入jquery.parallux.min.css和jquery.min.js和jquery.parallux.min.js和custom.modernizr.min.js。
样式中主要是对.text的位置进行设置。

关于custom.modernizr.min.js
官方文档并没有要求引入，但是官方给出的3个demo都引入了，删除后会报错。

如果要在parallux-inner中加入img元素，需要修改样式为

.parallux-inner img{
    display: block!important;
}
/*因为插件中默认设置了display:none*/

官方文档：https://github.com/tomsarduy/parallux

rellax.js

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871个字节，在手机等小屏幕设备中，插件会自动限制视觉差特性。
基本html格式如下：

<div class="rellax">
  默认速度，-2
div>
<div class="rellax" data-rellax-speed="7">
  最快
div>
<div class="rellax" data-rellax-speed="-4">
  最慢
div>
<script type="text/javascript" src="js/rellax.min.js">script>  
<script>
  // 初始化rellax.js视觉差插件,可接受任何类名
  var rellax = new Rellax('.rellax');
script>     

为你需要设置视觉差效果的元素添加.rellax class类。然后通过data-rellax-speed属性来设置该元素的相对滚动速度。数值越大，滚动的越快。

PS: rellax.js通过增加并修改元素的style属性的transform来实现滚动，eg:
style="transform: translate3d(0px, 0px, 0px);
因此，倘若自己写的代码中，使用嵌入式样式，或js代码涉及到style的设置，将会被覆盖而失效。

两个比较

parallux的局限性比较大，不能设置不同元素有不同的滚动速度，适合巨幕和文字的单页面。rellax可以根据实际应用设置不同元素有不同的滚动速度，且元素可以是各种零碎的图案、文字，也可以是巨幕。

使用视觉差插件时，可以使用图片懒加载插件如jquery.lazyload.min.js。