html5 视觉差滚动效果怎么实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 视觉差滚动效果怎么实现相关的知识，希望对你有一定的参考价值。
参考技术A html5 视觉差滚动效果原理就是一种利用控制各个图片层之间滚动的速度，来产生一种立体空间的效果，每个层都用一个png透明图片做为背景，然后滚动的时候控制一下每个不同的速度。
不过有两个方面需要注意：
1、以大量图片为特色的网站应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验；
2、某些网站页面在移动设备上的效果可能较之在PC上有所不同，一些功能也可能无法正常使用。本回答被提问者采纳 参考技术B 可以使用wow.js 参考技术C 只要给每个div加上如下代码即可实现视差滚动效果
每天学一个jquery插件-滚动视觉差
每天一个jquery插件-滚动视觉差
滚动视觉差
图片搞了那个感觉实际做出来有点麻烦，所以直接写了一下效果出来，像是background-attachment还没搞清楚咋用，所以先弄一下效果
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动视觉差</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.fixed{
position: fixed;
bottom: 0;
left: 0;
right: 0;
font-size: 200px;
font-weight: bold;
overflow: hidden;
}
.boxs{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
}
.fixed[data-ind='0']{
z-index: 1;
}
.fixed[data-ind='1']{
z-index: 2;
}
.fixed[data-ind='2']{
z-index: 3;
}
.fixed[data-ind='3']{
z-index: 4;
}
.fixed[data-ind='4']{
z-index: 5;
}
#box1{
background-color: #1abc9c;
color: white;
}
#box2{
background-color: #3498db;
color: white;
}
#box3{
background-color: #9b59b6;
color: white;
}
#box4{
background-color: #f1c40f;
color: white;
}
#box5{
background-color: #e74c3c;
color: white;
}
</style>
</head>
<body>
<div class="fixed" data-ind="0" style="height: 100%;">
<div id="box1" class="boxs">1</div>
</div>
<div class="fixed" data-ind="1">
<div id="box2" class="boxs">2</div>
</div>
<div class="fixed" data-ind="2">
<div id="box3" class="boxs">3</div>
</div>
<div class="fixed" data-ind="3">
<div id="box4" class="boxs">4</div>
</div>
<div class="fixed" data-ind="4">
<div id="box5" class="boxs">5</div>
</div>
</body>
</html>
<script>
$(function(){
var h = $(window).height();
var arr =$(".fixed");
$("body").height(h*arr.length);
$(".boxs").height(h);
$(document).scroll(function(){
var top = $(document).scrollTop();
var ind = parseInt(top/h);//第几个
var rem = top%h;//余数
var per = parseInt((rem/h)*100);//变化百分比
console.log(ind,per)
$(".fixed[data-ind='"+(ind+1)+"']").css('height',per+'%')
})
})
$.prototype.arr = function () {
var that = this;
var arr = [];
for (var i = 0; i < that.length; i++) {
arr.push($(that[i]));
}
return arr;
}
</script>
思路解释
- 就是在滚动事件中关联上对应的效果
- 然后给每一个图层一个z-index的层级，这样子就可以展现出效果了
- 未完，缓缓
以上是关于html5 视觉差滚动效果怎么实现的主要内容，如果未能解决你的问题，请参考以下文章