前言

有盆友问博主关于评论框打字特效是怎么实现的？所以更新了这篇教程，源自是《打字特效》的详细版。（代码可以关注公众号回复demo004获取）

重申一遍，最初见到这个打字特效是在atom编译器中，有一个打字特效插件(activate-power-mode)。效果如下图，atom和特效插件的安装过程问百度就行啦，这里不做介绍。

欢迎主角

有请我们这次介绍的主角，js版activate-power-mode，github仓库地址github.com/disjukr/activate-power-mode。
仓库下的README.md有介绍食用方法：

现将其下载下来：

解压缩后的文件如下：(我们需要的js文件在dist文件夹下)

在目录下新建一个index.html，插入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head></head>
  <body>
    <textarea style="position: relative; top: 20%; left: 20%;" cols="100" rows="30"></textarea>
  </body>
  <script src="activate-power-mode.js"></script>
  <script>
  POWERMODE.colorful = true; // 火花各种颜色
  POWERMODE.shake = false; // 关闭打字屏幕颤抖效果
  document.body.addEventListener('input', POWERMODE);
  </script>
</html>

食用注意事项：

  • 注意js引入路径是否正确
  • 只要有js的input事件都会触发(试过改成click，只有鼠标点击的时候会触发)

浏览器打开效果：

是不是很简单，这篇教程就到这里啦。

希望这篇文章能给你带来知识和乐趣，喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦