gsap实现可调参数的鼠标跟随粒子动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：gsap实现可调参数的鼠标跟随粒子动画效果代码

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

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

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

  
  
  
<style>
body {
  margin: 0;
  cursor: none;
  overflow: hidden;
}

#panel {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

canvas {
  display: block;
}
</style>

 
  
</head>

<body translate="no">
  <div id="panel">
  <canvas id="magic-dust"></canvas>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Physics2DPlugin3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script>
(() => {
  const isMobile = window.innerWidth < 768;
  const params = {
    ambientParticleCount: 10000,
    ambientMinScale: 1,
    ambientMaxScale: 2,
    ambientVelocityMin: 1,
    ambientVelocityMax: 20,
    ambientTweenDurationMin: 10,
    ambientTweenDurationMax: 20,
    ambientEase: "power1.inOut",

    ambientFadeInDurationMin: 1,
    ambientFadeInDurationMax: 5,
    ambientOpaqueTimeMin: 2,
    ambientOpaqueTimeMax: 2,
    ambientFadeOutDurationMin: 1,
    ambientFadeOutDurationMax: 5,
    ambientMovementDelayMin: 0,
    ambientMovementDelayMax: 10,
    ambientMinTravel: 20,
    ambientMaxTravel: 100,
    ambientAngleChange: Math.PI / 2,
    ambientCurveOffsetMin: -50,
    ambientCurveOffsetMax: 50,

    mouseParticleCount: 8,
    mouseMinScale: 1,
    mouseMaxScale: 5,
    mouseVelocityMin: 10,
    mouseVelocityMax: 60,
    mouseGravity: 10,
    mouseTweenDurationMin: 0.3,
    mouseTweenDurationMax: 2.1,
    mouseEase: "power2.inOut",
    mouseSpawnWidth: 20,
    mouseSpawnHeight: 50,
    mouseRandomAngle: false, // false: use fixed angle; true: random
    mouseFixedAngle: 5, // fixed angle when toggle is off

    rippleEffectRadius: 400,
    rippleDisplacementMin: 5,
    rippleDisplacementMax: 100,
    rippleRandomYOffset: 10,

    subtleRippleRadius: 0,
    subtleRippleDisplacementMin: 0,
    subtleRippleDisplacementMax: 0,
    subtleRippleRandomYOffset: 0,

    bloomIntensity: 1.5,
    backgroundWaveAmp: 0.35,
    backgroundIntensity: 20.0,
    bgTopColor: "#0A0011",
    bgBottomColor: "#000000" };


  if (!isMobile && typeof dat !== "undefined") {
    const gui = new dat.GUI();
    gui.domElement.style.zIndex = "1000";
    const ambientFolder = gui.addFolder("Ambient Particles");
    ambientFolder.add(params, "ambientParticleCount", 100, 50000, 1).name("Count").onFinishChange(resetAmbientParticles);
    ambientFolder.add(params, "ambientMinScale", 0.5, 10, 0.1).name("Min Scale");
    ambientFolder.add(params, "ambientMaxScale", 0.5, 10, 0.1).name("Max Scale");
    ambientFolder.add(params, "ambientVelocityMin", 0, 100, 1).name("Min Velocity");
    ambientFolder.add(params, "ambientVelocityMax", 0, 100, 1).name("Max Velocity");
    ambientFolder.add(params, "ambientTweenDurationMin", 1, 30, 0.1).name("Move Min Duration");
    ambientFolder.add(params, "ambientTweenDurationMax", 1, 30, 0.1).name("Move Max Duration");
    ambientFolder.add(params, "ambientEase").name("Move Easing");
    ambientFolder.add(params, "ambientMovementDelayMin", 0, 5, 0.1).name("Move Min Delay");
    ambientFolder.add(params, "ambientMovementDelayMax", 0, 5, 0.1).name("Move Max Delay");
    ambientFolder.add(params, "ambientMinTravel", 10, 200, 1).name("Min Travel");
    ambientFolder.add(params, "ambientMaxTravel", 10, 200, 1).name("Max Travel");
    ambientFolder.add(params, "ambientAngleChange", 0, Math.PI, 0.01).name("Max Angle Change");
    ambientFolder.add(params, "ambientCurveOffsetMin", -100, 0, 1).name("Min Curve Offset");
    ambientFolder.add(params, "ambientCurveOffsetMax", 0, 100, 1).name("Max Curve Offset");
    ambientFolder.add(params, "ambientFadeInDurationMin", 1, 5, 0.1).name("Fade In Min (s)");
    ambientFolder.add(params, "ambientFadeInDurationMax", 1, 5, 0.1).name("Fade In Max (s)");
    ambientFolder.add(params, "ambientOpaqueTimeMin", 1, 5, 0.1).name("Opaque Time Min (s)");
    ambientFolder.add(params, "ambi.........完整代码请登录后点击上方下载按钮下载查看