哔哩哔哩秋季版图实现镜头景深效果

CSS body { margin: 0; }

header {
height: 160px;
position: relative;
overflow: hidden;
}

header > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;

–offset: 0px;
–blur: 2px;
}

header > div > img {
display: block;
width: 110%;
height: 100%;
object-fit: cover;

transform: translatex(var(–offset));
filter: blur(var(–blur));
}
JavaScript
const images = document.querySelectorAll(‘header > div > img’)

document.querySelector(‘header’).addEventListener(‘mousemove’, (e) => {
let percentage = e.clientX / window.outerWidth
let offset = 10 * percentage
let blur = 20

for (let [index, image] of images.entries()) {
offset *= 1.3

let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)

image.style.setProperty('--offset', `${offset}px`)
image.style.setProperty('--blur', `${blurValue}px`)

}
})