电商专题之圣诞雪花特效
电商前端制作圣诞专题下雪的技术
也是快到了一年一度的圣诞节了，相信很多做电商设计和开发的小伙伴应该在忙着圣诞专题，那我分享一下我曾经做电商时积累的一些有关圣诞主题的雪花特效吧，毕竟页面设计再好，要是没有动态的雪花点缀场景，总觉缺少生机！
<一>
一、想直接感受一下雪花的效果，可以打开任意一个网页，这里我选择站酷网， 按F12或者右击页面选择
“审查元素”，切换到箭头1的选项，如果页面不像下方那么干净，可以点击箭头2的按钮，然后再点
开这个链接里的JS文件，全选复制后粘贴在图3处，你会发现站酷网也会下雪了。
不过这种方式并没有把JS植入到网站，所以页面刷新后就没有下雪效果了。如果你想要这效果，可以在自己的网页里新建一段<s cript></s cript>,然后把上面复制的内容粘贴在<s cript>和</s cript>之间，刚才粘贴到站酷网能看到雪花，是因为站酷网里面有JQ,,如果你的网站没有引用JQ,请加上<s cript src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></s cript>
二、想要深入体验的盆友可以下载文件，可以用Dreamweaver打开JS文件夹里的"snow.js",
这里动态创建的雪花是由Unicode特殊编码构成的，不是图片，大小和颜色都可以在默认选项里设置。
箭头1处可用下面红框的编码替换，以替换雪花的形状，点击下图可以查看更多编码。
2. 箭头2的值可以设置为一样，也可以设置不一样，但是两个值存在一定关系，会影响下落的速度。
3. 箭头3用来控制雪花下落的区域，如果想把雪花固定在某个盒子，"body"可以设置为".banner"，
设置为".banner"后endPositionTop的值如果比.banner的高度大时，会发现不起作用。
<二>
1、鉴于效果还算逼真，我在开发上面这个圣诞专题的时候也用了这效果，同时为了丰富圣诞气氛、让场景
更加热闹，我在切图时并不是简单的划几刀，而是把一些适合做动画的元素给取了出来，诸如圣诞老人
的眉毛、清单以及装饰的灯笼，考虑到前端性能方面的优化，我把小的icon图片整合到一张，以减少
Http请求，最后加以css3动画，整个设计稿也就活了！
<三>
另外我也参考了一下其他电商平台的专题，像京东双12年终盛宴的雪花飞舞就很好，但是本次拿京东另外的 这个小专题来说事，虽然不像那个那么酷炫，但是制作这种雪花的思路很巧妙，主要是用了两张透明的雪花 图片，结合css3动画模拟的，有点像在PS里制作gif动画。先把两张图片放到背景图片上面看不见的地方， 然后用60秒让雪花图片竖直下移1000px，用90%的时间完成下移，然后用剩下的10%让不透明度从1变为0， 1、f-pic-8到f-pic-11这四个盒子用的都是snow-moveY-2这个css3动画； 2、f-pic-8到f-pic-11这四个盒子中有的用的是同一张雪花图片； 3、f-pic-8到f-pic-11这四个盒子的动画延迟有所不同，有的延迟20秒开始，有的则是40秒；
为了便于理解，我用PS的时间轴模拟了这段代码的意思，相信这更加直观。
附上源雪花加上黑色背景的样子，
<四>
1、该雪花特效可以通过鼠标和雪花场景进行互动，用一个空的盒子作为盛放雪花的容器。在页面中构建了 一个3D雪花场景，里面的雪花非常的有层次感，虽然雪花成千上万，但是所有的雪花都是由snow.png这 一张图片衍生出来的。 2、在页面页面中引入three.js文件，然后调用randomRange()方法制作随机场景范围，最后在页面DOM元素 加载完毕之后通过three.js来完成雪花场景的构建，以及添加相应的鼠标互动和移动触摸互动事件。
3、盛放雪花的盒子也可以自定义命名，雪花图片也可以替换成另外的图片，如果改动了，请记得更改相应 的名称
透过本次电商的圣诞专题页，让大家了解一下网页中的雪花效果是如何用代码做的。相信很多即便是做过电商专题设计的设计师恐怕也不知道，因为我以前在做这种专题页设计的时候，压根就不知道自己在PS里设计的几百M的东东，到了前端的同事那里，到底经过了哪些处理，怎么就变成了可以在浏览器里看，并且体积小而且还会动的网页呢？没怎么做教程，做得不好还需要大家多多鼓励，觉得实用的朋友，可以在下方点赞，喜欢了解前端的设计师，可以关注我，后续我可以分享更多实打实的技术哦，我还是那种比较注重知识点之间联系的，厚积薄发、旁征博引却又能围绕主题的！
兴致勃勃的做了个动画封面，可惜站酷不支持使用，好可惜
如果上面的一些链接无效了，本次教程涉及到的文件都在这里了
