js实现可编辑调节文字粒子动画效果代码-html代码-BFW代码库

js实现可编辑调节文字粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现可编辑调节文字粒子动画效果代码，可输入文字，调节时间、重力、角度、数量等参数。

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

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

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

    <style>
        canvas {
      position: absolute;
      left: 0;
      top: 0;
    }
    
    body {
      overflow: hidden;
      background: #EDEDED;
      margin: 0;
      padding: 0;
      font-family: arial;
    }
    p {
      margin: 15px 0px;
    }
    #interface {
      width: 250px;
      position: absolute;
      border: 0px solid black;
      padding: 40px;
      box-sizing: border-box;
      color: #222;
      height: 100%;
      overflow-y: scroll;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 1px 0px 10px #999;
    }
    
    input[type="range"] {
      width: 100%;
    }
    
    input[type=range] {
      -webkit-appearance: none;
      background-color: silver;
      height: 10px;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      background-color: #666;
      width: 10px;
      height: 26px;
    }
    
    input[type="button"] {
      padding: 5px;
      margin-bottom: 5px;
      margin-top: 5px;
      background-color: #FF2948;
      border: 0px;
      width: 100%;
      color: white;
      font-weight: bold;
      font-size: 14px;
    }
    
    input {
      border: 0px;
      background-color: transparent;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    h1 {
      padding: 0px;
    
      margin-top: 0px;
    }
    
    select {
      padding: 5px;
      margin-bottom: 5px;
      margin-top: 5px;
    
      width: 100%;
    }
    a {
      color: #FF2948;
      font-weight: 700;
    }
    
    input[type="text"] {
      width: 100%;
      font-family: sans-serif;
      font-size: 30px;
      appearance: none;
      box-shadow: none;
      border-radius: none;
      border: 0px;
      border-bottom: 2px solid #FF2948;
      text-align: center;
    }
    ::-webkit-scrollbar {
      width: 14px;
      height: 14px;
    }
    
    ::-webkit-scrollbar-thumb {
      height: 6px;
      border: 4px solid rgba(0, 0, 0, 0);
      background-clip: padding-box;
      -webkit-border-radius: 7px;
      background-color: rgba(0, 0, 0, .5);
      -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05),
        inset 1px 1px 0px rgba(0, 0, 0, 0.05);
    }
    
    ::-webkit-scrollbar-button {
      width: 0;
      height: 0;
      display: none;
    }
    
    ::-webkit-scrollbar-corner {
      background-color: transparent;
    }
    
    
    img {
      width: 418px;
      position: absolute;
      top: 56px;
      left: 507px;
      z-index: -1;
    }
    </style>
</head>

<body>

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


    <div id="interface">
        <h1>Text particle</h1>
        <p>feel free to change the value of the variable "message" </p>

        Message:
        <input id="message" type="text" value="BFW" onchange="change()"> Gravity:
        <input onchange="changeV()" type="range" id="2" value="-0.7" max="1" min="-1" step="0.1"> Duration:
        <input onchange="changeV()" type="range" id="3" value=".16" max="0.99" min="0.1" step="0.01"> Speed:
        <input onchange="changeV()" type="range" id="5" value="0" max="5" min="0" step="0.01"> Radius:
        <input onchange="changeV()" type="range" id="6" value="3" max="20" min="1.8" step="0.1"> Resolution:
        <input type="range" id="4" value="5" max="20" min="3" step="1" onchange="change()">

    </div>
    <!-- partial -->
    <script>
        var utils = {
  degreesToRads: function(degrees) {
    return degrees / 180 * Math.PI;
  },

  randomInt: function(min, max) {
    return min + Math.random() * (max - min + 1);
  }
};

// basic setup  :)

canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//ctx.globalCompositeOperation = "light";
W = canvas.width = window.innerWidth;
H = canvas..........完整代码请登录后点击上方下载按钮下载查看