pixi实现页面滚动多彩泡泡上升动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：pixi实现页面滚动多彩泡泡上升动画效果代码

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

canvas {
  position: fixed;
  inset: 0;
}

:root {
  --color-text: #3a0ca3;
  --color-heading: #f72585;
  --color-heading-shadow: #921850;
  --color-button: cyan;
  --color-button-active: rgba(255,255,255,0.6);
}

.dark:root {
  --color-text: #a2d2ff;
  --color-heading: #ffc8dd;
  --color-heading-shadow: #9B6379;
  --color-button: indigo;
  --color-button-active: rgba(0,0,0,0.3);
}

.intro {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1em;
  max-width: 60vw;
  margin: 0 auto;
  text-align: center;
}

h1 {
  margin: 0;
  font-family: "Cherry Bomb One", sans-serif;
  font-size: 10vw;
  color: var(--color-heading);
  text-shadow:     0 1px 0 var(--color-heading-shadow),
	                 0 2px 0 var(--color-heading-shadow),
	                 0 3px 0 var(--color-heading-shadow),
	                 0 4px 0 var(--color-heading-shadow),
	                 0 5px 0 var(--color-heading-shadow),
	                 0 6px 0 var(--color-heading-shadow),
	                 0 7px 0 var(--color-heading-shadow),
	                 0 8px 0 var(--color-heading-shadow),
	
	                 0 0 5px rgba(10,0,0,.05),
	                0 1px 3px rgba(10,0,0,.2),
	                0 3px 5px rgba(10,0,0,.2),
	               0 5px 10px rgba(10,0,0,.2),
	              0 10px 10px rgba(10,0,0,.2),
	              0 20px 20px rgba(10,0,0,.3);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--color-text);
}

button {
  background: var(--color-button);
  border: 1px solid currentColor;
  padding: 0.5em 1em;
  border-radius: 2em;
  color: var(--color-text);
}

button:hover, button:focus-visible {
  background: var(--color-button-active);
}
</style>


  
</head>

<body >
  <div class="intro">
  <h1>Bubbles</h1>
  <p>Could be rethemed as dust or other particles. The bubbles wrap as you scroll with a slight parallax effect and some inertia after stopping.</p>
  <button id="toggle-theme">Toggle Color Theme</button>
  <button id="toggle-motion">Toggle Motion Preference</button>
</div>

<!-- spacing to allow scroll -->
<div style="height:500vw;"></div>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.7.2.4.js"></script>
      <script type="module">

let THEME = "light";
let MOTION_PREF = "allow";

const PARTICLE_COUNT = 40;
const DARK_COLORS = ["0x4361ee", "0x3a0ca3", "0x7209b7", "0xf72585"];
const LIGHT_COLORS = ["0xbde0fe", "0xa2d2ff", "0xffafcc", "0xffc8dd"];

// from: https://www.joshwcomeau.com/snippets/javascript/debounce/
const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(null, args);
    }, wait);
  };
};

class Particle {
  constructor(texture, radius, x, y, speed, bounds) {
    this.radius = radius;
    this.sprite = PIXI.Sprite.from(texture);
    this.sprite.anchor.set(0.5);
    this.sprite.direction = Math.random() * Math.PI * 2;
    this.sprite.turnSpeed = Math.random() - 0.8;
    this.sprite.scale.set(1 + Math.random() * 0.3);
    this.sprite.original = new PIXI.Point();
    this.sprite.original.copyFrom(this.sprite.scale);
    this.sprite.x = x;
    this.sprite.y = y;
    this.sprite.speed = speed;
    this.bounds = bounds;
    this.interactive = true;
    this.sprite.eventMode = "static";
    this.sprite.inertia = 0;
    this.scrollDelta = 0;
  }

  move(delta, count) {
    this.sprite.direction += this.sprite.turnSpeed * 0.01;
    this.sprite.x += Math.sin(this.sprite.direction) * this.sprite.speed;
    this.sprite.y += Math.cos(this.sprite.direction) * this.sprite.speed;
    this.sprite.rotation = -this.sprite.direction - Math.PI / 2;

    if (this.sprite.inertia > 0) {
      const depthShift =
        (this.radius / 10) * this.scrollDelta * this.sprite.inertia;
      this.sprite.y += depthShift;
      this.sprite.inertia -= delta * 0.02;
    }

    if (this.sprite.x < this.bounds.x) {
      this.sprite.x += this.bounds.width;
    } else if (this.sprite.x > this.bounds.x + this.bounds.width) {
      this.sprite.x -= this.bounds.width;
    }

    if (this.sprite.y < this.bounds.y) {
      this.sprite.y += this.bounds.height;
    } else if (this.sprite.y > this.bounds.y + this.bounds.height) {
      this.sprite.y -= this.bounds.height;
    }
  }

  shift(amount) {
    const depthShift = (this.radius / 10) * amount;
    this.sprite.y += depthShift;
  }
}

export default class Bubbles {
  constructor() {
    this.setVars();
    this.init();
    this.createParticles();
    this.bindEvents();
  }

  // these would be tied to getters for REAL system preferences, not the fake demo ones
  get isLightTheme() {
    return THEME === "light";
  }

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