BiliBili 秋 • 头图景深对焦效果

html

<header>
	<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-1.png"></div>
	<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-2.png"></div>
	<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-3.png"></div>
	<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-4.png"></div>
	<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-5.png"></div>
	<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-6.png"></div>
</header>

header>div {
……

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

header>div>img {
    display: block;
    width: 110%;
    height: 100%;
    object-fit: cover;
    
    transform: translate(var(--offset));
    filter: blur(var(--blur))
}

const images = document.querySelectorAll('header>div>img')

document.querySelectorAll('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`)
    }
    
    console.log(percentage)
})

当鼠标在中间时，
第3、4张分层图片的模糊度最低，趋近于0
第2、5张分层图片的模糊度较高
第1、6张分层图片的模糊度最高
当游标在右边时，第6张图片的模糊度趋近于0
越往左的图片，模糊度越高