原生js实现可配置粒子跟随拖影动画效果代码-html代码-BFW代码库

原生js实现可配置粒子跟随拖影动画效果代码

代码语言：html

所属分类：粒子

代码描述：原生js实现可配置粒子跟随拖影动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
/* Click/Touch to add more particles */

body {
  
    margin: 0px;
    overflow: hidden;
  
}
</style>

  
</head>

<body translate="no">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script >


var Orbit = {};

;(function (Orbit, undefined) {

  var self = window.Orbit || {},canvas,context,mouse = { x: innerWidth / 2, y: innerHeight / 2 },particles = [],FPS = 60;

  // Dat GUI default values
  var ease = 0.05,size = 10,speed = 0.02,orbit = 100,trail = 0.05,interactive = true;

  /*
   * Settings.
   */

  var Settings = function () {

    this.ease = 0.05;
    this.size = 10;
    this.speed = 0.02;
    this.orbit = 100;
    this.trail = 0.05;
    this.interactive = true;

    this.changeEase = function (value) {

      ease = value;

    };

    this.changeSize = function (value) {

      size = value;

    };

    this.changeSpeed = function (value) {

      speed = value;

    };

    this.changeOrbit = function (value) {

      orbit = value;

    };

    this.changeTrail = function (value) {

      trail = value;

    };

    this.enableInteractivity = function (value) {

      interactive = value;

      mouse = {

        x: innerWidth * 0.5,
        y: innerHeight * 0.5 };



    };

    this.deleteAll = function (value) {

      particles = [];

    };

  };

  /*
 .........完整代码请登录后点击上方下载按钮下载查看