bilibili景深对焦banner效果

本文主要是介绍bilibili景深对焦banner效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

bilibili景深对焦banner效果

效果分析

benner共分为6个图层，6个图层在鼠标hover状态下改变translatex和blur
鼠标在左边，1,2两图较为清晰
鼠标在中间，3,4两图较为清晰
鼠标在右边，5,6两图较为清晰

6个图片，按照顺序排列，图片垂直水平居中，填充整个父元素；

object-fit、object-position

用于对图片进行剪切、缩放、拉伸等，同时可以保留原始比例；一般适用于img和video标签；

object-fit：指定元素的内容，如何适应容器的高度与宽度；
- fill：默认值，不保证保持原始的比例，把内容拉伸填充整个容器；
- contain：保持原有比例，内容被缩放；
- cover：保持原有比例，部分内容可能被剪切；
- none：保留原有的宽度和高度，不做修正；
- scale-down：保持原有比例，内容尺寸按照contain和cover中的一个进行调整，哪个更小用哪个
object-position：根据容器大小重置图片大小，设置元素的位置
- 第一个值为X坐标值，第二个为Y坐标值
- object-position：50% 50%；
- object-position：right top；
- object-position：250px 250px;

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>景深对焦效果</title><link rel="stylesheet" href="day_12.css">
</head>
<body><div class="banner"><div><img src="./img/bilibili-autumn-1.png"></div><div><img src="./img/bilibili-autumn-2.png"></div><div><img src="./img/bilibili-autumn-3.png"></div><div><img src="./img/bilibili-autumn-4.png"></div><div><img src="./img/bilibili-autumn-5.png"></div><div><img src="./img/bilibili-autumn-6.png"></div>
</div>
<script src="./day_12.js"></script>
</body>
</html>

CSS

body {margin: 0;
}.banner {height: 160px;position: relative;overflow: hidden;
}.banner > div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;/*    将图片上下左右居中*/display: flex;justify-content: center;align-items: center;--offset:0px;--blur:2px;
}.banner > div > img {display: flex;width: 110%;/*    图片需要左右移动，预先设置的宽一些*/height: 100%;object-fit: cover;
/*    将图片按照比例填满容器*/transform:translateX(var(--offset));filter:blur(var(--blur));
}

JS

const images = document.querySelectorAll('.banner>div>img');
document.querySelector('.banner').addEventListener('mousemove', (e) => {let percentage = e.clientX / window.outerWidth;
//    设置鼠标移动百分比let offset = 10 * percentage;
//    定义offset，定义分层图片位置的距离let blur = 20;for (let [index, image] of images.entries()) {offset *= 1.3;//    越后面的图片，位移的越多//    鼠标在中间，第三章和第四张图的模糊度最低，趋近于0；第2张和第5张模糊度较高，第1张和第6张模糊度最高；//    鼠标在右边，第六张图模糊度趋近于0，越往左的图片，模糊度越高；使用公式：y = x**2*20let blurValue = Math.pow((index / images.length - percentage), 2) * blur;image.style.setProperty('--offset', `${offset}px`);image.style.setProperty('--blur', `${blurValue}px`);}
});