b站首页banner景深移动特效 bilibili秋

看到b站的animation-banner效果太妙了,就自己也想仿写一个.去查了查资料鼓捣出来一个.

首先是成品展示

大家可能觉得这个效果看起来很复杂,其实拆开来看比较简单.
他的效果就是实现了一个镜头聚焦,那么我们分步骤进行讲解

step1

首先,让图层跟随鼠标进行移动,大家应该已经想到怎么办了,但是有个问题,每个图层跟随鼠标移动的距离不能相同,这里可以用循环进行移动距离的迭代.

step2

其次是让图层跟随鼠标的移动距离进行清晰度的变化,和上述的办法类似,也是构造一个函数来计算清晰度,可以看到,随着鼠标的移动,最后和靠前的图层清晰度都变低(后面称之为失焦点),而靠中间的图层清晰度变高(后面称之为聚焦点).我们可以知道,这个偏移距离和焦点的转移是有关系的

实际上这个函数有很好的选择,就是我们小学二年级就学过的的二次函数,两端的数值大,中间的数值小,符合我们的要求.
然后我们利用图层的index把六个图层按顺序排列在x轴上,得到的y值就符合我们的要求了

这就是最核心的思路啦,那么我们就开始

首先获得六个图层
这里我就直接用b站的图了,因为咱菜鸡画不出来

放出来方便大家练习,侵删

<!-- 这就是我的html结构,很简单 --><header><div><img src="./img/bilibili-autumn-1.webp"></div><div><img src="./img/bilibili-autumn-2.webp"></div><div><img src="./img/bilibili-autumn-3.webp"></div><div><img src="./img/bilibili-autumn-4.webp"></div><div><img src="./img/bilibili-autumn-5.webp"></div><div><img src="./img/bilibili-autumn-6.webp"></div></header>

    body{margin: 0;//经典margin0}header{height: 155px;//给容器一个高度,防止高度坍塌position: relative;//开定位,六个图层需要以容器为坐标进行左右移动overflow: hidden;//因为图层需要移动,所以图层要略大于容器,容器要做溢出隐藏}header>div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;//直接flex居中,太美了这东西justify-content: center;align-items: center;--offset: 0px;//这里定义css的变量方便后面js的处理--blur: 2px;}header>div>img{display: block;width: 110%;//放大点,移动的时候不会有空白溢出height: 100%;object-fit: cover;transform: translateX(var(--offset));//变量的使用filter: blur(var(--blur));}

接下来就是js代码,可能我写的比较繁琐,但是实现的效果我觉得和b站的很像

var startX = 0
const images = document.querySelectorAll('header>div>img')//拿到img元素的数组document.querySelector('header').addEventListener('mouseover', (e)=>{startX = e.clientX//在鼠标移入的时候记录初始位置for (let [index, image] of images.entries()) {image.style.transition = 'none'//在每次鼠标进入的时候让每一项的渐变效果为none,防止鼠标移动时看起来不连贯}
})document.querySelector('header').addEventListener('mousemove', (e)=>{let offsetX = e.clientX - startX + 482//这里是保证初始值为482if(Math.abs(offsetX - 482) < 10)offsetX = 482//鼠标刚刚移动上去会产生很小的偏移,看起来效果就好像图层突然变换了位置,所以做了一个移动最小值检测,这样就没有问题了let percentage = offsetX / window.outerWidth//计算移动距离占视窗宽度的百分比,其实我们的主要目的是拿到这个东西let offset = 15 * percentage//把百分比放大合适的比例就能带入公式了let blur = 20//这里是二次函数公式中二次项的系数,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`)}
})document.querySelector('header').addEventListener('mouseout', ()=>{//其实这里完全就是偷了个懒,直接用程序去计算初始位置,我测出来当offset为482的时候,初始效果看起来是最棒的,就不用看了下面的就是上面的公式而已let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)image.style.transition = 'all .3s ease'//给每一项加上渐变效果,图层会平滑回到初始位置,视觉效果不会太突兀}
})
window.addEventListener('load', () => {//这里就是在开始加载时计算初始位置.let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)}
})

其实上面完全没必要写那么冗长的代码,给每一项设置一个初始的偏移位置和初始清晰度就好了,这样代码也能简洁.大家可以自己想想怎么改,其实很简单.

参考了b站的
CodingStartup起码课

下面放出本人的完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}header{height: 155px;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));}</style>
</head>
<body><header><div><img src="./img/bilibili-autumn-1.webp"></div><div><img src="./img/bilibili-autumn-2.webp"></div><div><img src="./img/bilibili-autumn-3.webp"></div><div><img src="./img/bilibili-autumn-4.webp"></div><div><img src="./img/bilibili-autumn-5.webp"></div><div><img src="./img/bilibili-autumn-6.webp"></div></header><script>var startX = 0
const images = document.querySelectorAll('header>div>img')document.querySelector('header').addEventListener('mousemove', (e)=>{let offsetX = e.clientX - startX + 482let percentage = offsetX / window.outerWidthlet offset = 15 * percentagelet blur = 20for (let [index, image] of images.entries()) {offset *= 1.3let blurValue = (Math.pow(((index / images.length - percentage)), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)}
})
document.querySelector('header').addEventListener('mouseover', (e)=>{startX = e.clientXfor (let [index, image] of images.entries()) {image.style.transition = 'none'}
})document.querySelector('header').addEventListener('mouseout', ()=>{let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)image.style.transition = 'all .3s ease'}
})
window.addEventListener('load', () => {let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)}
})</script>
</body>
</html>

thanks for reading