打扫网页迎新年

过年KPI冲到了最后一篇，居然是个技术文，居然我这么菜的水平都要搞技术文了！昨天大型摸鱼一整晚，完成了这个点击撒红包动画。没错！这就是本博客现在最需要的功能。

从网址 notes.midofnowhere.link 进来的朋友可能已经看到了，现在点击网页就会从点击出放出一些红包灯笼小炮仗，没看到吗？再点一下！ 这都是我抄来的，用css和js实现，非常简单，如果看到这里你也想要，请直接移步codepen 跟我一样抄上就好，接下来的内容只是我再转抄一遍。

技术力背景

本博客网站是用 Hugo 做的，因为只有这个工具我用得明白。具体Hugo是怎么生成网页的我不懂，但是我能碰到的部分除了写作时编辑的markdown, 就是单纯的html/css/js. 对这几部分我都有非常非常非常浅显的了解，css只会用plain css, 预处理完全不懂，scss我都看不懂。js基本上只会照着抄。好了铺垫就到这里，您可以另请高明或者陪伴笔者一起抄下去。

实现效果

gif image

要实现的就是这样一个简单的效果，在点击网页 body时，从鼠标或触摸点击处绽放开一些小图案。因此需要做的就是：

用 event listner 记录点击并触发动画
动画开始：以点击处为中心产生一个装满图案的 div
动画过程：控制小图案的数量、品种、行动轨迹
动画结束：div 消失

开始抄代码！

js

这里用到jQuery.

// click event listener
$('body').on('click', function(e) {
  explode(e.pageX, e.pageY);
})

好了上一节的第一步已经完成了，那么这个explode函数里是啥样的呢？

// explosion construction
function explode(x, y) {
// 决定就放15个红包，你想多放点也可以
  var particles = 15,
  
    // explosion container and its reference to be able to delete it on animation end
    explosion = $('<div class="explosion"></div>');

  // put the explosion container into the body to be able to get it's size
  $('body').append(explosion);

  // position the container to be centered on click
  explosion.css('left', x - explosion.width() / 2);
  explosion.css('top', y - explosion.height() / 2);

  for (var i = 0; i < particles; i++) {
    // positioning x,y of the particle on the circle (little randomized radius)
    // 以稍微不规则的圆形播撒红包
    var x = (explosion.width() / 2) + rand(80, 150) * Math.cos(2 * Math.PI * i / rand(particles - 10, particles + 10)),
      y = (explosion.height() / 2) + rand(80, 150) * Math.sin(2 * Math.PI * i / rand(particles - 10, particles + 10));
        // particle element creation (could be anything other than div)
        // 此处我用了网上下载的svg图，随机产生三种图案
			var shapes = ['<img src="chinese-new-year-lamp-svgrepo-com.svg" alt="cny lamp"/>', '<img src="envelope-chinese-new-year-svgrepo-com.svg" alt="evelope"/>', '<img src="fireworks-svgrepo-com.svg" alt="firework"/>']
			var getShape = Math.floor(Math.random() * shapes.length);
      // 往div中添加图案
      var elm = $('<div class="particle" style="' +
        'top: ' + y + 'px; ' +
        'left: ' + x + 'px">' + shapes[getShape] + '</div>');

    if (i == 0) { // no need to add the listener on all generated elements
      // css3 animation end detection
      elm.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
        explosion.remove(); 
        // remove this explosion container when animation ended
      });
    }
    explosion.append(elm);
  }
}

其中 shapes 可以是你喜欢的任何东西，比如说 <i> element , 或者在css里直接画圆形方形都可以。我这里用到的是网页矢量图 svg, 这个图如果用 text editor 打开看起来是这样的：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg height="25px" width="25px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 viewBox="0 0 512 512" xml:space="preserve">
<path style="fill:#FF4B4B;" d="M363.705,6.505C362.658,2.665,359.169,0,355.189,0H192.122c-3.98,0-7.469,2.665-8.516,6.505
	l-24.71,90.599h229.517L363.705,6.505z"/>
<path style="fill:#C83741;" d="M379.586,88.276H167.724c-4.875,0-8.828,3.953-8.828,8.828v370.759c0,4.875,3.953,8.828,8.828,8.828
	h211.862c4.875,0,8.828-3.953,8.828-8.828V97.103C388.414,92.228,384.462,88.276,379.586,88.276z"/>
<path style="fill:#FF4B4B;" d="M344.276,123.586H132.414c-4.875,0-8.828,3.953-8.828,8.828v370.759c0,4.875,3.953,8.828,8.828,8.828
	h211.862c4.875,0,8.828-3.953,8.828-8.828V132.414C353.103,127.539,349.152,123.586,344.276,123.586z"/>
<g>
	<path style="fill:#FFCF65;" d="M238.345,397.241c-43.81,0-79.448-35.638-79.448-79.448s35.638-79.448,79.448-79.448
		s79.448,35.638,79.448,79.448S282.155,397.241,238.345,397.241z M238.345,256c-34.069,0-61.793,27.724-61.793,61.793
		s27.724,61.793,61.793,61.793s61.793-27.724,61.793-61.793S272.414,256,238.345,256z"/>
	<circle style="fill:#FFCF65;" cx="238.345" cy="317.793" r="35.31"/>
	<path style="fill:#FFCF65;" d="M238.345,432.552c-24.181,0-47.345-7.509-67-21.716c-3.948-2.862-4.836-8.38-1.983-12.328
		c2.845-3.957,8.371-4.836,12.328-1.983c16.621,12.019,36.216,18.371,56.655,18.371c20.423,0,40.009-6.345,56.638-18.345
		c3.939-2.862,9.465-1.974,12.319,1.992c2.854,3.948,1.965,9.465-1.992,12.319C285.664,425.053,262.509,432.552,238.345,432.552z"/>
	<path style="fill:#FFCF65;" d="M300.164,240.733c-1.793,0-3.604-0.543-5.164-1.673c-16.62-12.017-36.215-18.37-56.655-18.37
		c-20.431,0-40.009,6.345-56.621,18.345c-3.975,2.854-9.483,1.965-12.328-1.983c-2.854-3.957-1.965-9.474,1.983-12.328
		c19.647-14.189,42.803-21.689,66.966-21.689c24.181,0,47.345,7.509,67,21.716c3.948,2.862,4.836,8.38,1.983,12.328
		C305.603,239.466,302.905,240.733,300.164,240.733z"/>
</g>
</svg>

这些数字就是每个节点的坐标，如果你把这些复制到写字板里然后保存成 firecrack.svg, 然后再用浏览器打开，就可以看到图片了。用这个格式的好处显然一是矢量图，二是可以直接在 svg class 里修改图片的尺寸和颜色。

css

接下来在css文件里添加 .explosion 的样式：

.explosion {
  position: absolute;
  width: 600px;
  height: 600px;
  pointer-events: none;
}
.explosion .particle {
  position: absolute;
  animation: pop 1s reverse forwards;
}

@keyframes pop {
  from {
    opacity: 0;
  }
  to {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}

第一部分是整个 explosion div 的大小，当然啦总不能无限飞满整个页面。第二部分是动画效果，用到了关键帧，我不懂，直接抄！

链接到html文件里

如果你是单独写一个html, 那就直接链接css/js就好了，但是我用的是Hugo，所以要找一找文件放哪里。

css 直接加到自定义 css 文件里了，因为这种节日气氛过段时间就会不用了，也需要方便删除啊！
js 保存成一个文件比如说 animation.js, 我放在了static文件夹里面。
在你的模板里找到链接 stylesheets 和 script 的地方，一般在 /layout/partials/head.html 和 /layout/partials/foot.html 这种地方。

总的来说请参考Hugo和主题文档

参考阅读

what else had happened

取消了抬头字体消失特效，搞不懂去年本人的审美到底咋回事
修复了buy me a coffee链接，暗示现在可以顺利打钱
修改了permalink为英文，之前分享的几篇文章可能链接会出问题，不管了，爱看看不爱看拉倒。
将rss feed改为了全文，可以在您喜欢的rss reader中阅读全文，不再需要特地点进来看我马马虎虎的网页

todo

收拾分类和标签命名，怎么被我搞得这么混乱？
换个新鲜一点的头图
起个中文名，目前的备选是“茫茫居”
研究一下markdown的更多新鲜玩法，比如说高亮和隐藏
评论区的管理账号密码我忘了（……）考虑换一个服务

打扫网页迎新年

——之用户的心才是产品经理的最高优先级啊混蛋

On This Page

技术力背景

实现效果

开始抄代码！

js

css

链接到html文件里

参考阅读

what else had happened

todo

Comments

打扫网页迎新年

——之用户的心才是产品经理的最高优先级啊混蛋

On This Page

技术力背景 #

实现效果 #

开始抄代码！ #

js #

css #

链接到html文件里 #

参考阅读 #

what else had happened #

todo #

Comments

Related Posts

技术力背景

实现效果

开始抄代码！

js

css

链接到html文件里

参考阅读

what else had happened

todo