【笔记】NexT8.8实现雪花飞舞特效

发表于 更新于 阅读次数：

前言

这是一款京东为配合双12年终盛宴活动在活动页面添加的雪花飞舞3D视觉特效

这个特效目前无法找到原作者
网上大部分版本都是一个民间网友分享的，从自己服务器引入js文件的文章介绍（其实还有一个很丑的飘落小圆点的版本）
很多人都不知道它来自于京东，照搬照抄他的外链，然而现在那个服务器已经挂掉了，在这里分享一下源码（我也不记得我是从哪里找到的了）

源码

引入到博客

  • 首先要引入1.7.2的jQuery（其他版本未测试）

  • 然后直接引入snow.js即可

  • 如果在NexT8.8中引入，先在主题配置中解除一个自定义页面的注释

hexo/_config.next.yml

1
2
custom_file_path:
  header: source/_data/header.njk
  • 然后引入jQuery-1.7.2和snow.js文件

source/_data/header.njk

1
2
3
4
5
6
7
<!-- 加载雪花飞舞特效 -->
<script type="text/javascript" src="/snow/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/snow/snow.js"></script>
<style type="text/css">
  .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
</style>
<div class="snow-container"></div>

完成