当前位置：首页 > 网页特效 > 背景

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

分类：背景日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<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中，里面可以放置图片或文字。

```html
<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样式，其中背景图层的图片可以根据实际情况进行更改。

```html
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插件，关于该插件的详细介绍可以参考这里。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果