B站首页头部动画
•分类
77
0
今天在浏览 B 站时,被其首页顶部的动画设计吸引。滚动时的背景渐变、悬浮元素的波浪动效与导航栏的交互细节,不仅增强了页面层次感,还展现出流畅的视觉韵律。作为前端开发者,我尝试通过 HTML、CSS 和 JavaScript 复刻这一设计,在实现过程中深入分析了动画原理与交互逻辑。下面将分享我的实现思路和完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Banner</title>
<link href="autumn.css" rel="stylesheet" />
</head>
<body>
<div class="blqbanner mobile-hidden">
<div><img src="./bilibili-autumn-1.png"></div>
<div><img src="./bilibili-autumn-2.png"></div>
<div><img src="./bilibili-autumn-3.png"></div>
<div><img src="./bilibili-autumn-4.png"></div>
<div><img src="./bilibili-autumn-5.png"></div>
<div><img src="./bilibili-autumn-6.png"></div>
</div>
</body>
<script src="autumn.js"></script>
</html>
.blqbanner {
height: 160px;
position: relative;
overflow: hidden;
}
.blqbanner > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
--offset:0px;
--blur:2px;
}
.blqbanner > div > img {
display: flex;
width: 110%;
height: 100%;
object-fit: cover;
transform:translateX(var(--offset));
filter:blur(var(--blur));
}
const images = document.querySelectorAll('.blqbanner>div>img');
document.querySelector('.blqbanner').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*20
let blurValue = Math.pow((index / images.length - percentage), 2) * blur;
image.style.setProperty('--offset', `${offset}px`);
image.style.setProperty('--blur', `${blurValue}px`);
}
});