感受2018LOL狗年活动官网的创意与“炫技”！原生JS完美复现，火狐浏览器目前兼容性差

今年过年的时候想必小伙伴们都看到了LOL的狗年活动官网。不得不说，搞IT的看的和别人就是不一样，别人看活动，我看设计、看特效,看完头脑一热，来一个原生JS小做一下，算是对相关技术的全方面运用。如果该文有幸能引起你的一些思考和启示，那么它也就值了。

期间花了7、8天的空闲时间，搞的差不多了，在谷歌下显示的还是可以的，其他浏览器的兼容性并没有测试。感兴趣的话，那就仔细往下看吧。

该活动官网的设计可以说是非常有创意了，整体背景采用一张雪花降落和城市轮廓交织的图片，给人以眼前一亮的惊艳感。同时，页面还融合了大量的狗年元素，增添了整体的喜庆氛围，让页面生动起来的是那只活灵活现的狗，它会跟着鼠标，任由摆弄。

玩转原生JS，完美复现LOL狗年活动官网

虽然这个活动已经落下了帷幕，活动页已经关闭，但是不得不说狗年的官网制作是非常精彩的，尤其是狗的动态效果确实做得非常赞的，于是一心想搞一波。起初，我只是想把这些创意点子整理出来，给小伙伴们分享分享，让他们get到这个官网的闪光之处，让他们也能感受到我对其的赞赏。后来的某天，我突然灵光一现，利用原生JS能够实时获取鼠标位置的特性，做一个页面，给小伙伴们一些思路。

既然说到这里了，那就简单介绍下实现原理。其整体思路是这样的，我们分别用一个div和一个span元素分别实现背景和文字的渲染。后来我开始用原生JS来实现了它，第一步要做的就是能获取到鼠标位置，这就很简单了，直接加上event监听，在回调里更新鼠标的位置即可。

第二步就是模拟飘落的雪花了。这个其实用js来做难免会有些掉帧，因此我们要用 requestAnimationFrame 来实现，先创建一个雪花的数组，然后只要在页面中显示即可，对应的样式通过 class 实现，然后调整下位置（雪花是随机飘落的，因此位置不可固定）。

下一步当然要能控制狗的动作了，这里给出一个思路，就是要给狗的每一部分加上一个style元素，用来管理狗的动作。

扫尾

原来打算把做好的发布到掘金，可惜的是只有IE和谷歌能显示，IE是移动端也能显示，火狐是移动端和PC都显示不出来。如果你对其感兴趣的话，又正在谷歌浏览器上浏览这篇文章的话，那么将会看到这活灵活现、摇摆不定的小狗的。

其实，用原生JS来实现这个页面，效果是真不怎么样，不过，至少可以让更多的技术宅看到了原生JS的可能性。但是技术宅看到的是这些创意点子，小伙伴们看到的是这款官网的闪光之处，我的这个小搞搞可能都还没来得及开，就已经胎死了。