【滑翔悬停】CSS图片悬停还能这样玩？

前言

最近一直在做css 的专栏文章，突发奇想弄个动画玩玩吧。弄着弄着就想着，这个动画效果是不是还可以动态化呢？说干就干吧，就在js里面加点动态效果整个动画出来看看。

整体效果就是鼠标移动的时候，获取鼠标的坐标，然后再读取当前可视化区域的宽高，最后通过元素的宽高计算出新的动画值。

先看效果再实现

配置页面图片位置

😜 配置的图片尽量散开，这样鼠标移动的范围就会大一点哦

😋 定义九张图片位置

<div id="wrapper">
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
    <div class="swatches"></div>
</div>

🤔 包裹层给的ID主要是为了后续在 js 中定义元素位置使用的

#wrapper {
    height: 140vmax;
    width: 140vmax;  
    position: absolute;
}

• vmax 单位是css3中表示当前较大的 vw 和 vh

🤨 定义图片模块的样式

.swatches {
    border-radius: 1vmax;
    position: absolute;
    transition: transform 800ms ease;
}

.swatches:hover {
    transform: scale(1.1);
}

• 为了看起来炫酷一点，这里给图片模块添加了一点基础性的过渡动画

🤔 这里可以给每个模块都定义一个属于自己的位置坐标

.swatches:nth-child(1) {
    background-color: rgb(255, 238, 88);
    height: 14%;
    width: 20%;
    left: 5%;
    top: 5%;
}

• 颜色、宽高、距离都可以根据自己的需求去修改
• 每一个模块都有对应的伪元素 :nth-child(n)
  • n 表示对应的数字

监听鼠标动作

😌 在js中，有一个onmousemove的事件是用于监听鼠标滑动的方法。

const wrapper = document.getElementById("wrapper");

• 在监听鼠标事件之前，我们需要获取到包裹元素的ID，方便后面获取它的宽高等元素

window.onmousemove = e => {
    const mouseX = e.clientX,
        mouseY = e.clientY;
}

• 通过onmousemove函数获取鼠标的坐标
• clientX/clientY即表示鼠标的水平和垂直坐标

🤨 同样是在onmousemove函数中操作

const xDecimal = mouseX / window.innerWidth,
        yDecimal = mouseY / window.innerHeight;

• 通过获取窗口显示区域的宽高，并使用鼠标坐标计算出十进制的X/Y值

const maxX = wrapper.offsetWidth - window.innerWidth,
        maxY = wrapper.offsetHeight - window.innerHeight;

• 通过当前包裹元素的可视区域计算出最大宽高值

const panX = maxX * xDecimal * -1,
        panY = maxY * yDecimal * -1;

• 最后通过前面计算出来的值，再去计算出动画所需平移的位置值

😏 将计算出来的平移值给到包裹元素的动画中

wrapper.animate({
    transform: `translate(${panX}px, ${panY}px)`
}, {
    duration: 4000,
    fill: "forwards",
    easing: "ease"
})

总结

本篇文章用到的技术其实很简单，主要是通过不同的坐标和宽高进行计算，得出最后动画所需要的值。