本文已经授权【稀土掘金技术社区】官方公众号独家原创发布。 > 好久不写文章了，感觉也不太好，那就来水一篇吧！！啊哈哈~~~ 本文教你如何快速从 b 站抠出一个完整的动态 banner 出来！源码和素材在文章最后。 > 本文仅在掘金发布在 bilibili 主站 PC 端，时不时会看到其顶部横幅栏是一个随鼠标变化的动画： ![1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52385bc0af4e431d8754b1ca9a9db808~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1400&h=155&s=3096036&e=gif&f=32&b=3a557c) 平时我们自己在开发官网的时候，也能用的上，这里就记录一下他的实现方式。 > b 站在 safari（16）下并没有实现这个动效，不知道是不是针对国内 safari 用户的营销策略不同还是动画库的兼容性问题？ ## 分析它本质上也是一种视差效果，不了解的可以看我这一篇[官网滚动动画](https://juejin.cn/post/7338325570086338600#heading-5)。监听鼠标移动的相对位置，计算滑动区域各个元素的偏移量和移动速度，从而达到视差动画的效果。 ## 搜集素材 F12 大法打开，看到是一个叫 animated-banner 的 div ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b9bc0b6733944ff80f2dd5e12cc50a5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2738&h=472&s=991015&e=png&b=fefdfd) > 这篇文章不知不觉拖到春天了，官方的图片都换了😂 初始化的时候，用了一堆的div绝对定位在里边的，计算好相对位置即可： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4573c165b9442099c7354feb0e65207~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=902&h=1336&s=289360&e=png&b=fdfdfd) 为了达成这个效果，我把这些个图片都下载到本地，这样素材就收集完了。 > 一共23张图片，一个视频 ## 堆砌元素我们把上面的结构复制一份到自己的 html中，并将图片和视频的链接改为自己本地的应用： > 拷贝官网的好处是，初始化的相对位置都计算好了，可以看到下面的 style 中有初始化的 transform ```html ``` > 注意这里各个 layer 的先后顺序不能乱，否则层级关系就会有问题。在下面的 css 中也可以通过设置 zIndex 来控制。此时界面： ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1dcf7407ce4b4f578d3e3008f9dee3f5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1425&h=674&s=965197&e=gif&f=30&b=fefefe) ## 实现布局把官网的 css 也借鉴过来吧： ```css body * { margin: 0; padding: 0; } .animated-banner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; min-width: 1000px; min-height: 155px; height: 9.375vw; } .animated-banner>.layer { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } ``` 嘿，效果出来了： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/387511bd873c4c15af631b16a4529ad7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2874&h=502&s=1274304&e=png&b=fefefe) ## 实现动效像这种监听鼠标移动的，css 就显得无力了，我们另外写一个 js 脚本来控制元素位移。 ### video 元素处理首先让我们的 video 动起来： ```js (function() { const video = document.querySelector('video'); video.play(); })(); ``` > 当然你也可以用 autoplay。这里为了防止一些浏览器的安全策略：没有用户交互的时候，多媒体自动播放会被拦截，在 Chrome 66 以后，要给 video 加上 `muted` 静音属性才能自动播放。效果： ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1c73d84c8304dd993747db233deb202~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1425&h=182&s=111016&e=gif&f=14&b=83a2e0) ### 监听鼠标移动我们从使用上来黑盒分析一下。 - 鼠标移动到 banner 上后开始监听鼠标偏移量 - 根据鼠标的偏移量，计算各个元素的位置 - 鼠标移出 banner 后，还原初始位置 #### 设置滑入/滑出监听按照这个思路，我们先来写鼠标滑入/滑出的监听： ```js const banner = document.querySelector('.animated-banner'); banner.addEventListener('mouseenter', function(event) { event.stopPropagation(); // 开始监听偏移量 startListener(); }) banner.addEventListener('mouseleave', function(event) { event.stopPropagation(); // 还原 clearListener(); }) ``` > mouseleave 和 mouseout 是相似的，但是两者的不同在于 **mouseleave 不会冒泡而 mouseout 会冒泡**。这意味着当指针离开元素及其所有后代时，会触发 mouseleave ，而当指针离开元素或离开元素的后代（即使指针仍在元素内）时，会触发 mouseout 。 #### 计算鼠标与元素的相对位置那么，鼠标的偏移量要怎么计算呢？这里其实算的是鼠标距离 banner 这个元素的相对位置。然后我们来监听鼠标滑动： ```js function startListener() { banner.addEventListener('mousemove', function(event) { event.stopPropagation() console.log(event) }) } ``` 这样就可获取到当前鼠标的位置。我们注意到，鼠标上下垂直移动的时候，banner 是不会出现动画的，左右移动（x坐标变化）时，才播放动画，因此，我们就关注一下鼠标事件与 x 坐标相关的返回参数： - clientX：距离当前**body可视区域**的 x 坐标，以目标元素的左上角为原点，向右为正方向。所以有横滚条后可能会不准确 - pageX：距离当前**body**的 x 坐标，以body元素的左上角为原点，向右为正方向。有横滚条后数据仍然是撑开的宽度 - movementX：表示自上次鼠标移动事件以来，鼠标指针在水平方向上移动的距离。 - screenX：表示鼠标指针相对于整个屏幕(浏览器以外也算)的水平坐标位置。以屏幕左上角为原点，向右为正方向。 - offsetX：相对于事件作用元素最左侧的偏移量 - x：相对于触发事件的元素在可视区域内的最左边的相对距离（包含边框） --- 从应用场景来看，背景偏移量是根据鼠标位移距离有关的，offsetX 似乎就满足我们的需求： ```js const mouseLeft = event.offsetX; ``` 当然了，代码是灵活的，我们还可以组合一下使用。设置 body 为 `position: relative;`，然后： ```js const bannerLeft = banner.offsetLeft; const mouseLeft = event.pageX - bannerLeft; ``` 这样，mouseLeft 就是当前鼠标相对于 banner 元素左侧的距离了。 ![1.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3eb9f11a29b94bc8b91039c189f3eed0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1172&h=449&s=2702086&e=gif&f=97&b=fdfdfd) #### 计算一个元素的偏移量假设鼠标从最左边开始，位置是 0，往右侧移动，我们总结一下官网看到的效果： - 天上的云：往上浮动 - 背景的花：往右移动 - 猫猫：向右移动并拉长一些，眼睛是先往右再往左再回来看到官网是这么加的样式： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/066d5d19dd794a609d091eb95062b144~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2862&h=708&s=1702923&e=png&b=fbf8f8) 我们也直接添加 style。先看天上的云，他是根据鼠标向右偏移量的多少，往上的幅度做出相应的改变，我们自己定义一个比例换算就行（假设云最大幅度 10px），计算规则： - 记录鼠标第一次进入 banner 区域的 x 方向坐标，标记 x0，以这个点为坐标原点，那么鼠标偏移量就是：**鼠标x位置 - x0** - 使用公式计算 $$ (鼠标x位置 - x0)/banner宽度 = ?/10px $$ 用代码来计算？的值： ```js // 当前 banner 的宽度 const bannerWidth = banner.offsetWidth; let initMouseLeft = 0; function calcutedPosition(mouseLeft) { // 运动方向是反的，就取反就行 return -(mouseLeft - initMouseLeft) * 10 / bannerWidth; } banner.addEventListener('mouseenter', function (event) { event.stopPropagation(); // 计算初始鼠标 x 位置 ✅ （mouseenter 在进入元素及其子元素时，只触发一次） initMouseLeft = event.pageX - bannerLeft; // 开始监听偏移量 startListener(); }) // 云的垂直位置 function startListener() { banner.addEventListener('mousemove', function(event) { event.stopPropagation() const mouseLeft = event.pageX - bannerLeft; const cloudY = calcutedPosition(mouseLeft); const secondElement = banner.querySelector('.layer:nth-child(2)').querySelector('img'); secondElement.style = `height: 187px; width: 2000px; transform: translate(0px, ${cloudY}px) rotate(0deg) scale(1); opacity: 1;`; }) } ``` 还有一个问题，鼠标离开 banner 区域的时候，应将 translate 还原。我们看官网的例子，他也是直接改变 style 里的 translate，慢慢渐进还原的，并不是一下跳变的，其实就是设置一个定时器，比如 200毫秒，渐进改变样式： ```js function clearListener() { const secondElement = banner.querySelector('.layer:nth-child(2)').querySelector('img'); const mouseLeft = event.pageX - bannerLeft; const cloudY = calcutedPosition(mouseLeft); let startValue = cloudY; let endValue = 0; let duration = 200; // 总时间，单位为毫秒 let interval = 50; // 每次更新的间隔时间，单位为毫秒 let steps = duration / interval; // 总步数 let stepValue = (startValue - endValue) / steps; // 每一步的值变化量 let currentValue = startValue; // 设置一个定时器，不停的加减步长，直到最后一步时，直接等於最终值即可 let timer = setInterval(() => { currentValue -= stepValue; secondElement.style = `height: 187px; width: 2000px; transform: translate(0px, ${currentValue}px) rotate(0deg) scale(1); opacity: 1;`; if (Math.abs(currentValue - endValue) < Math.abs(stepValue)) { clearInterval(timer); secondElement.style = `height: 187px; width: 2000px; transform: translate(0px, ${endValue}px) rotate(0deg) scale(1); opacity: 1;`; } }, interval); } ``` 最后我们看看效果（gif有点掉帧😂）： ![1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8adb42c3b3ac42bf8a54031a0d05d155~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1164&h=161&s=1321259&e=gif&f=38&b=81a1e0) > 由于代码里没有用到任何第三方库，所以都是基于等比例的**线性渐变**的。你也可以使用js 动画库（比如 gsap）来实现更复杂的过渡动画。 #### 完成封装由于banner里元素很多，我们不能每一个都写一套上面的代码，所以要做数据封装： - 定义一个map，关联各个元素初始样式、当前样式、最大偏移量、偏移方向和dom元素等 ```js const styleMap = { 0: { initialStyle: { height: '187px', width: '2000px', translateX: 0, translateY: 0, rotate: 0, scale: 1, opacity: 1 }, style: { direction: 'x', scale: 400 }, element: banner.querySelector('.layer:nth-child(1)').querySelector('img') }, ... } // 遍历将每一个元素的初始样式赋值 const init = () => { Object.keys(styleMap).forEach(item => { const current = styleMap[item]; const initStyle = current.initialStyle; current.element.style = `height: ${initStyle.height}; width: ${initStyle.width}; transform: translate(${initStyle.translateX}px, ${initStyle.translateY}px) rotate(${initStyle.rotate}deg) scale(${initStyle.scale}); opacity: ${initStyle.opacity}; object-fit: ${initStyle.objectFit}`; }); } ``` - 将各个样式的偏移量写入map，并在事件中动态修改 ```js function calcutedPosition(mouseLeft, scale) { // 这里计算偏移量，多了一个减去这个元素初始偏移的步骤，scale 表示这个元素最大移动尺度 return -(mouseLeft - initMouseLeft) * scale / bannerWidth; } banner.addEventListener('mousemove', function (event) { event.stopPropagation() const mouseLeft = event.pageX - bannerLeft; Object.keys(styleMap).forEach(item => { const current = styleMap[item]; // 需要偏移的元素 if (current.style) { const initStyle = current.initialStyle; const style = current.style; const element = current.element; // 计算偏移 const offset = calcutedPosition(mouseLeft, style.scale); let styleResult = `height: ${initStyle.height}; width: ${initStyle.width}; opacity: ${initStyle.opacity}; object-fit: ${initStyle.objectFit};`; // 这里设置比较粗糙，设计复杂动画的时候，需要重构 if (style.direction === 'y') { styleResult += `transform: translate(${initStyle.translateX}px, ${initStyle.translateY - offset}px) rotate(${initStyle.rotate}deg) scale(${initStyle.scale});` } else { styleResult += `transform: translate(${initStyle.translateX - offset}px, ${initStyle.translateY}px) rotate(${initStyle.rotate}deg) scale(${initStyle.scale});` } element.style = styleResult; } }); }) ``` - 提取全局变量 ```js const banner = document.querySelector('.animated-banner'); const bannerLeft = banner.offsetLeft; const bannerWidth = banner.offsetWidth; let initMouseLeft = 0; ``` - 计算函数单独封装 ```js const init = () => {} const playVideo = () => {} const touchListener = () => {} window.onload = function () { init(); playVideo(); touchListener(); } ``` 完整的素材与源码见 [banner-mouse-animation ](https://github.com/duheng1992/banner-mouse-animation/blob/master/index.html) > 代码写的匆忙，有 bug 还请见谅最终效果图： ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/381c0d2cc3c141c89171643e52ef8394~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1425&h=161&s=2934797&e=gif&f=44&b=819ee0)