如何实现bilibili最新头部景深效果~炫酷

#如何实现bilibili最新头部景深效果~炫酷

简介

最近烟雨仔注意到 B站 主页导航栏头部有个相当炫酷的交互效果, 类似于摄影里面的小景深, 除了聚焦的人物, 其他前景和背景都是模糊状态.

最炫酷的地方在于, 鼠标左右移动, 会产生聚焦点的变换, 具体如下图22和33娘的效果. 还可以聚焦到不同的景物上面, 比如前景的叶子或者中景的石头.

本篇新手教程, 主要运用鼠标的 mousemove 事件进行动画效果的实现. 有不正确的地方望指正~

html结构

想要实现这样的效果, 首先需要的是一整套 png 素材. 烟雨仔为了省事就直接下载了B站的原素材, 一共是6个 png 图片.

结构上, 烟雨仔参照了 B站 的写法, 在每张图片的外面都包了一个 .layer 的div盒子.把所有的 .layer 都装进 .banner 这个大的 div 盒子.

<div class="banner">
        <div class="layer">
            <img class="back" src="./cssSrc/background.png" alt="">
        </div>
        <div class="layer">
            <img class="person22" src="./cssSrc/person22.png" alt="">
        </div>
        <div class="layer">
            <img class="hill" src="./cssSrc/hill.png" alt="">
        </div>
        <div class="layer">
            <img class="leaves" src="./cssSrc/leaves.png" alt="">
        </div>
        <div class="layer">
            <img class="person33" src="./cssSrc/person33.png" alt="">
        </div>
        <div class&