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站的很像