一款带视觉差的jQueryScrollPage单页全屏滚动效果,鼠标滚动时全屏图片垂直自动切换,其中有一个图片带有视觉差的效果,所有图片都能个自由更换,右侧显示的简易焦点样式也可以自由修改。
页面的head部分,先设置好页面元素的样式,接着引入几个必要的JS文件,代码如下:
<style type="text/css">
* { margin: 0; padding: 0; }
#scrollPage {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* picture */
#scrollPage .list {
z-index: 1;
}
#scrollPage .list,
#scrollPage .list li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#scrollPage .list li {
background-size: cover;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
#scrollPage .list li:nth-child(1) {
background-image: url(images/bg_1.jpg);
background-repeat: no-repeat;
}
#scrollPage .list li:nth-child(2) {}
#scrollPage .list li:nth-child(3) {
background-image: url(images/bg_3.jpg);
background-repeat: no-repeat;
}
#scrollPage .list li:nth-child(4) {
background-image: url(images/bg_4.jpg);
background-repeat: no-repeat;
}
/* btn */
#scrollPage .btn {
position: absolute;
z-index: 2;
right: 20px;
top: 40%;
}
#scrollPage .btn span {
display: block;
width: 2px;
height: 40px;
margin: 10px 0;
background-color: #fff;
}
#scrollPage .btn span.cur {
background-color: #0099ff;
}
/* 视觉差 */
#overMove {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#overMove div {
position: relative;
left: 0;
top: 0;
width: 110%;
height: 110vh;
}
#overMove div:nth-child(2) { position: absolute; }
#overMove div:nth-child(3) { position: absolute; }
#overMove div i {
position: absolute;
width: 100%;
height: 100%;
left: -5%;
top: -5%;
background-size: cover;
background-repeat: no-repeat;
}
#overMove div:nth-child(1) i {
background-image: url(images/bgpart_1.png);
background-position: center;
}
#overMove div:nth-child(2) i {
}
#overMove div:nth-child(3) i {
background-image: url(images/bgpart_3.png);
}
</style>
<script type="text/javascript" src="js/tween.js"></script>
<script type="text/javascript" src="js/startmove.js"></script>
<script type="text/javascript" src="js/requestanimate.js"></script>
<script type="text/javascript" src="js/index.js"></script>
页面的body部分,重点注意一下div容器里的ul无序列表,代码如下:
<div id="scrollPage">
<ul class="list">
<li></li>
<li>
<div id="overMove">
<div data-scale="0.3"><i></i></div>
<div data-scale="0.5"><i></i></div>
<div data-scale="0.7"><i></i></div>
</div>
</li>
<li></li>
<li></li>
</ul>
<div class="btn">
<span class="cur"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791