o(* ̄︶ ̄*)o,chrafz今天发现了这个超炫的打字效果,感觉好漂亮的!先丢两张预览图:
这个效果原本是Atom
编辑器的一个插件,名为activate-power-mode
,后来被Github上的一位coder做成了JS脚本。现在只要在网页里引用一下,我们的网站也可以拥有这样狂炫酷拽吊炸天的效果。
wordpress用户安装
首先找到你主题目录下的comments.php
(footer.php
、header.php
也可),添加如下代码。
1 2 3 4 5 6 |
<script src="http://yun.chrafz.com/activate-power-mode.js"></script> <script> POWERMODE.colorful = true; /* make power mode colorful*/ POWERMODE.shake = false; /* turn off shake*/ document.body.addEventListener('input', POWERMODE); </script> |
可以根据需要,自行更改上述代码里POWERMODE.colorful
、POWERMODE.shake
的参数
windows用户安装
1 2 3 4 5 |
#进入atom编辑器的package目录 cd .atom/packages git clone https://github.com/JoelBesada/activate-power-mode.git cd activate-power-mode apm install |
mac用户安装
编辑器安装
1 |
sudo brew install Caskroom/cask/atom #OS X 10.11.不支持通过命令行安装&可通过下载 DMG 文件安装 |
atom-install shell command
1 2 3 4 5 |
cd /Users/$yourname/.atom/packages git clone https://github.com/JoelBesada/activate-power-mode.git cd activate-power-mode apm install apm ls #检测是否安装成功 |
Packages-Activate Power Mode: Toggle
网页效果 demo:http://kushagragour.in/code-blast-codemirror/demo/index.html
atom.io:https://atom.io/packages/activate-power-mode
Atom 编辑器下载
项目地址:GitHub
评论2