点击上方 前端Q，关注公众号
回复加群，加入前端Q技术交流群看B站这个动画banner好几个版本了，不知道是一个月更新一次新版动画，还是多少天更新一次（没有天天去看，但估算是一月更新一版UI，以后注意观察）。刚看到的时候很感兴趣，不像视频素材或者gif素材，就放一个视频上去，或者放一个动态画上去，这个是根据鼠标动而一个小范围地有规律有弧度地动，很少看过。
只是看过一些比如视觉差的类似这样的根据鼠标动而动的动画，
举例说明：
1、先前的github404动画图片层第轴动特效页面（最近改版了，没有动画效果了，以前我写有一篇文章就是关于github
星球大战为主题的404错误页面，对鼠标哦🖱活动作出回应的相关代码，3d元素点睛）；
github 404:
2、视差引擎 parallax : [例子] (matthew.wagerfield.com/parallax/) 对光标的位置做出相应的反应。
parallax :
3、滚动动画（视差、动画、交互） ScrollMagic
多伦多24小时环保干洗店、修鞋、洗衣叠服服务网站Alfred
苹果vision产品页面
太多这种类似视觉差效果的产品图了，就不一一举例了，有兴趣的伙伴自行搜索🔍...
前面讲到B站的首页的最上面一栏的根据鼠标的响应鼠标位置的视差效果。有的伙伴可能不怎么常去B站看（可能偶尔或者更多的是用手机端看），这边我贴一下效果，如下：
确实是想看一下是怎么做的。然后我就去搜，结果你可以去看看，印象很深的是一个人讲过（这里我就不讲了，可以搜搜看），反正就是提出了问题，问了观众是怎么做的，然后最后的结论是就是根据鼠标移动而移动。
"Talk is cheap, show me the code. —— Linus Torvalds" （直接翻译就是说话容易，给我展示代码），这个人的一句名言，也代表了他对实际代码和行动的重视，而不是停留口头的吹吹说说假大空。真正的生产力和进步是基于编写（或者集成他人的）代码的质量和效率，而不是单单谈论功能、空想事情的所有方式等等）。
有时候设计的时候概念很简单脱口而出，但是实际实现中需要做的工作是要多得多的（相信很多开发者在开发时候对这句话深有体会，说说说、说出花来、吹得天花乱坠，但是做，又是做不出个所以然来。所以说到一定程度，但好像没什么进展的时候，就得“多说无用，给我看你的行动”了，我笃信，无论是工作上还是人际关系上都是如此）。
所以，类似经常说的写作就是思考，那么我相信编程就是思考这句话也是同样富含逻辑和道理的。
接下来我们看一下是如何实现的
准备工作——素材
一共15张素材，15张素材构成一幅图。叫UI设计组小姐姐做。如若PS技术强，可以自己搞（先画出整体图，构想整体需要什么场景的、人和物和景，对了，然后一层一层关闭图层保存矢量图给前端），根据鼠标有规律（这里规律是指有范围、有移动偏移曲线、有透明度变化、有缩放变化等等地动）这个不知道是不是有产品经理给效果图给到UI小姐姐、给到前端去看最终效果，从而做出来的。
编程第一步：建一个html文件
不想着后面有多难，但至少这一步建文件我是会的，我正规点，建个文件夹，文件夹里建一个banner.html文件，再建一个static文件夹用来放素材。第一步就基本也错不到哪里去，大不了错了我再删，删了我再建。
该文用原生先写一遍，下一篇我再用vue或者react搞一遍，不喜欢看或者目前用不上原生的js来搞这个动画效果的可以到这里结束了，可以去B站首页自行体验体验。
建完文件的第一步：! + Tab
vscode !+Tab，完事，又进了一步。
画底色
子内容重复循环的。那么，外框先画好。子内容接下来再想。
编写代码
观察，定义好数据结构
观察别人是怎么做的。其实这一步，应该从一开始就应该一直贯彻到末尾。只不过，做完上一步不知道下一步怎么做了，为了尽量可能接近结果，就先观察，把会做的，先做了。这里值得一提的是：控制台（控制台是一个很好的高分优秀答题者，有时候从控制台找答案会比我自己空想来得要完整和有用）。
<div class="layer">
<img
src="素材"
style="高度; 宽度; transform: translate(x, y) rotate(角度) scale(缩小或放大); opacity: 透明度;"
>
</div>
// .
// .
// .
// 以此类推，15个素材元素，正好15个这样差不多的dom结构，（也可推测这是个数组，用来循环，开发如果所有东西都类似的东西手动一个个写人会疯掉且，即使愿意不怕累那也使不得，因为量大效率不高。所以这里用循环来搞）
// 而且如果下次要换不同的元素或者版块，改数据就好，不需要改其他。
// 那么数据结构是什么样子的呢？...layers 数组数据结构：
const layers = [ { resources: [ { src: './static/4e7edb416c34eccc40f34d2b297524652685a9bb.png', id: 0 } ],
scale: {
initial: 0.6,
},
rotate: {},
translate: {},
blur: {},
opacity: {
wrap: "clamp",
},
name: '01 bg'
},
// 以此类推（有多少素材就有多少个对象，定义好素材地址、scale缩放、rotate旋转、translate偏移量、blur模糊度、opacity透明度、文件名备注）: {}
]一切以中心原点为定值：
01 bg
13 远鸟
02 灯塔丛林
03 底部海水
04 鳄鱼a
04 鳄鱼b
05 左边鱼影
06 左边鱼群
07 右边鱼
08 右边鸟
09 中间
11 33
10 水面
12 近鸟
14 两侧
给每个素材定宽高
这一步就是根据上面的数据结果，给每个素材设置一下宽高。其中要看scale的值和相对它们来说最大的外框.animated-banner的高度来响应式地对每个素材的宽高进行处理。
（注：如若看不清，右击在新标签页打开图片查看）
给每个元素加个div
这一步就直接给每个img加个div。class为layer。
css 需要加上这个layer的样式：
.layer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}js 需要加上:
const divElementArr = layers.map(() => {
const divElement = document.createElement('div')
divElement.classList.add('layer')
banner.appendChild(divElement)
return divElement
})最后得到的是一个数组，每一个（这里有15个）元素class为layer的div。然后append到.animated-banner最大boss上。
append素材到layer的div上
append素材元素，追加上去，代码如下：
layers.map((layer, layerKey) => {
const layerElement = layer.resources[0].el
divElementArr[layerKey].appendChild(layerElement)
})这个时候就得到效果图如下：
可以看到，所有的元素都以正中心排布（原因就是上面的css中相对定位所有都center水平居中垂直居中）。
那这个时候就说了，下一步是不是根据数据结构，给每个元素距离正中心偏移多少设置了。没错的。
初始样式设置 以及 每个元素距离正中心偏移排布
初始样式设置
// 鼠标指针相对窗口边缘水平坐标 左还是右，左进则是正数比率，右进则是负数比率
let relativeX = 0;每个元素距离正中心偏移排布
一开始加载元素的偏移排布
鼠标监听事件
效果图
总结
此次文章研究B站的动图如何实现（实现transform中的translate如何如何一比一还原，篇幅太大缩放大小、透明度，以及moveleave还没仔细讲解），但基本上同一原理，这里难点重点是贝塞尔曲线，元素按曲线运动以及左右移动换鳄鱼图，以及透明度的问题。
完成上面的点（至于代码随后会分享出）
有空出用vue和react实现。
作者：盏灯
链接：https://juejin.cn/post/7275576084128350248
往期推荐
最后
欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...
点个在看支持我吧
2438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
