当前位置:主页 > JavsScript库 > 动画 >

JavaScript创建交互式粒子背景 – ak-kaleidoscope
栏目分类:动画   发布日期:2021-09-03   浏览次数:

ak-kaleidoscope 是一个小巧但可自定义的粒子插件,用于创建响应鼠标移动事件的交互式动画粒子背景。

更多功能:

  • 8 种形状:‘circle’, drop, ‘heart’, ‘oval’, ‘square’, ‘star’, ‘triangle’ or ‘wave’.

  • 允许您指定粒子的最小/最大尺寸。

  • 允许您指定粒子和镜子的数量。

  • 允许您将随机颜色应用于粒子。

  • 可配置的移动速度。

用法:

1.ak-kaleidoscope从 dist 文件夹加载插件的缩小版本。

<script src="dist/kaleidoscope.min.js"></script>

2. 创建要在其上渲染交互式粒子背景的 HTML 画布。

<canvas id="kaleidoscope"></canvas>

3. 使画布绝对定位。

.kaleidoscope {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

4. 初始化插件以创建默认粒子背景。

const myBg = new Kaleidoscope({
      selector: '#kaleidoscope'
});

5. 确定粒子和镜子的数量。

new Kaleidoscope({
    selector: '#kaleidoscope',
    edge: 10,
    quantity: 50
});

6. 覆盖用于粒子的默认形状。

new Kaleidoscope({
    selector: '#kaleidoscope',
    shapes: ['circle', drop, 'heart', 'oval', 'square', 'star', 'triangle', 'wave']
});

7. 设置粒子的最小/最大尺寸。

new Kaleidoscope({
    selector: '#kaleidoscope',
    minSize: 30,
    maxSize: 50
});

8. 为粒子指定一组颜色。

new Kaleidoscope({
    selector: '#kaleidoscope',
    color: ['#FFD1B9', '#564138', '#2E86AB', '#F5F749', '#F24236']
});

9. 确定从 0 到 1 的移动速度。

new Kaleidoscope({
    selector: '#kaleidoscope',
    speed: .3
});

10. 设置绘制新形状时应用的合成操作类型。

new Kaleidoscope({
    selector: '#kaleidoscope',
    globalCompositeOperation: 'overlay'
});

11. 暂停和恢复动画。

myBg.pauseAnimation();
myBg.resumeAnimation();

12. 销毁实例。

myBg.destroy();

官方网站:https://github.com/kawakamiakari/kaleidoscope

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库