简单实用的jQuery全屏背景视觉差特效

这是一款基于jquery.parallax.js的简单实用的jQuery全屏背景视觉差特效。jquery.parallax.js是一个用于制作视觉差特效的jQuery插件，它可以将各个div设置为不同的层，并为各个层设置不同的速度，在鼠标移动时产生视觉差效果。

使用方法

使用该滑动开关按钮插件需要引入jQuery和jquery.parallax.min.js文件。

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

HTML结构

该视觉差特效的HTML结构使用一个无序列表来作为背景图层，每一个列表项是一张图片，它们通过设置不同的data-depth属性来设置各种的运动速度。另外内容层放置在一个div.wrapper中，里面可以放置图片或文字。

<main>
  <div id="overlay"></div>
  <ul id="scene">
    <li class="layer" data-depth="0.1">
      <div class="layer1"></div>
    </li>
    <li class="layer" data-depth="0.2">
      <div class="layer2"></div>
    </li>
  </ul>
  <div class="wrapper">
    <img alt="logo" src="img/35iw4ki.jpg">        
  </div>
</main> 
              

CSS样式

在使用时需要添加下面的必要的CSS样式，其中背景图层的图片可以根据实际情况进行更改。

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    backface-visibility: hidden;
}

#overlay {
    background-color: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0.08;
}

#scene {
    padding: 0;
    margin: 0;
    width: 115%;
    height: 120vh;
    overflow: hidden;
    top: -5%;
    left: -5%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

main {
    width: 100%;
    height: 100vh;
    overflow: hidden;    
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 101;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    text-align: center;
}

.wrapper img {
  width: 350px;
  height: auto;
}

.layer {
    width: 110%;
    height: 120vh;
    overflow: hidden;
}

.layer2 {
    background-image: url(fx5wd1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -5%;
    top: -5%;
}

.layer1 {
    background-image: url(sp94ls.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -5%;
    top: -5%;
}

@media (max-width:700px) {
    .layer2 {
        background-size: cover;
        background-position: center;
        position: absolute;
        width: 167%;
        height: 77vh;
        left: -69%;
        top: 27%;
    }
    
    .layer1 {
        background-position: center;
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 115%;
        left: -5%;
        top: -1%;
    }    
    
    .wrapper img {
        width: 180px;
        height: auto;
    }
}                
              

初始化插件

该视觉差特效依赖于jquery.parallax.js插件，关于该插件的详细介绍可以参考这里。

$(document).ready(function () {
    $('#scene').parallax();
});