全屏背景视觉差jQuery特效

PetitQ 图片/图形 2018-11-18 1.46K 0 0

这是一款基于 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();
```
```
});
```

全屏背景视觉差 jQuery 特效

已有 366 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

全屏背景视觉差jQuery特效

使用方法

HTML 结构

CSS 样式

初始化插件

全屏背景视觉差 jQuery 特效

相关文章

古卷轴平滑打开动画jQuery特效

随鼠标位置变化移动速度图片放大缩小特效

超酷CSS3鼠标悬停图片背景动画特效

发表回复取消回复

热销模板

图片/图形

使用方法

HTML 结构

CSS 样式

初始化插件

全屏背景视觉差 jQuery 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复