前端使用电源模式(power mode)特效

文章目录

  • 前端使用电源模式(power mode)特效
    • 安装方法
      • 安装方法1
      • 安装方法2
    • 使用方法
      • 使用
      • 选项

前端使用电源模式(power mode)特效

想让页面输入框有炫酷的输入效果吗?想的话就试试power mode吧!
本项目为在 activate-power-mode 的基础上整理后的增强版本。
本项目用 webpack 重新构建,并在其基础上修改了一些配置,现在支持 textarea、text、search、tel、url 五种输入框的输入特效。
本项目GitHub地址:https://github.com/lyswhut/html-activate-power-mode
demo地址:https://lyswhut.github.io/html-activate-power-mode/dist/index.html
前端使用电源模式(power mode)特效_第1张图片

安装方法

本项目已发布到 npm 上,所以可用 npm 安装或者直接引入文件的方式使用。

安装方法1

使用 npm 安装:

npm install html-activate-power-mode -S

导入:

// import
import POWERMODE from 'html-activate-power-mode'

安装方法2

直接引入文件的方式

<script src="./html-activate-power-mode.min.js"></script>

两种方法根据实际情况2选1即可。

使用方法

使用

直接监听页面的 input 事件即可,插件会自动为支持的输入框类型添加输入特效。

<script>
  document.body.addEventListener('input', POWERMODE);
</script>

选项

POWERMODE.colorful = true // 打开粒子动画,默认开启
POWERMODE.shake = true // 开启震动效果, 默认关闭
POWERMODE.shakeSize = 5 // 设置震动幅度, 默认 1.5

好用的话请在GitHub给个star哦~

你可能感兴趣的:(前端)