哔哩哔哩首页的对焦效果

效果图

点击查看

css部分

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 160px;
            position: relative;
            overflow: hidden;
        }
        .container>.banner{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            --offset:0;
            --blur:2px
        }
        .container>.banner>img{
            width: 110%;
            height: 100%;
            display: block;
            object-fit: cover;
            filter: blur(var(--blur));
            transform: translateX(var(--offset));

        }

    </style>

html部分

<div class="container">
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" alt="">
    </div>
</div>

js部分

    const images=document.querySelectorAll('img')
    document.querySelector('.container').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`)
          }
    })