这是一款基于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();
});
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!