每天一个jquery插件-B站的景深
B站的景深
歪比歪比？歪比巴卜？
觉得讲的不好的可以去看看大佬的文章，真的受益匪浅，真的css能做到的东西真的多，我了解的感觉好少啊。图片来源从B站扣或者从下面的别的大佬做的插件中直接下载。
我做出来的效果(当然是缩水版，不过效果实现了，也是同一个配方)
代码很少，全部放html里面了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>B站的景深</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#div{
width:100%;
height:160px;
position: relative;
overflow: hidden;
}
.img{
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
}
.i1{
background: url(img/1.png);
}
.i2{
background: url(img/2.png);
background-position: 40% 0%;
}
.i3{
background: url(img/3.png)
}
.i4{
background: url(img/4.png);
background-position:50% 0%;
background-size: 100% 150%;
}
.i5{
background: url(img/5.png);
background-position: 40% 0%;
}
.i6{
background: url(img/6.png);
background-position: 40% 0%;
}
</style>
</head>
<body>
<div id="div">
<div class="img i1"></div>
<div class="img i2"></div>
<div class="img i3"></div>
<div class="img i4"></div>
<div class="img i5"></div>
<div class="img i6"></div>
</div>
</body>
</html>
<script>
$(function(){
$("#div").mousemove(function(e){
var w = $(this).width();
var x = e.offsetX;
var temp1 = w/(w-x)<10?w/(w-x):10;
var temp2 = w/(x)<10?w/(x):10;
$(".i1,.i2,.i3").css({
"filter":"blur("+temp1+"px)",
"transform": "translate("+temp1+"px,0px)"
})
$(".i4,.i5,.i6").css({
"filter":"blur("+temp2+"px)",
"transform": "translate("+temp2+"px,0px)"
})
})
})
</script>
来个直观的分解动作，我们看到的景深到底是哪些部分组成的
- 会像ps的高斯模糊一样有规律的逐个模糊
- 并且会有镜头感，就是图片朝着不同方向移动
然后用js的语言就是这样的
- 根据鼠标移动作为驱动事件mousenove
- 然后里面的深浅的感觉是多个png图片叠加在一起的效果(看源码~)
- 控制模糊情况用filter:blur(0px),这个参数，越大越模糊
- 控制背景图左右移动用transform: translate(x,y)，控制x来移动div达到背景图左右挪动的效果
- 此外根据测试效果可知，里面的三张图片先清晰再模糊然后，以不同的步幅向左挪动，外面三张同理方向相反
- 所以我们要挨个写控制的比例，不过我偷懒，就把前三张和后三张当成俩对象写的，所以可能你就只有前后感，没有层次感，因为即使模糊了前三张或者后三张也是一起模糊和移动，不过要实现效果，就设定给每个图片比例都不一样，然后根据鼠标挪动比例的变化的效果参数就好了。
- 完事，洗澡，碎觉~