Bagaimana untuk mereka bentuk latar belakang gelembung dengan javascript

Latar belakang gelembung ialah elemen reka bentuk yang sering digunakan yang memberikan kesan visual dan minat dengan meniru bentuk dan kesan melambung buih. Dalam dunia pembangunan web, JavaScript ialah bahasa yang sangat fleksibel yang boleh digunakan untuk mencipta pelbagai kesan dinamik, termasuk latar belakang gelembung. Artikel ini akan memperkenalkan pembaca kepada cara menggunakan JavaScript untuk mereka bentuk latar belakang gelembung, serta beberapa kaedah pelaksanaan biasa.

Kaedah pelaksanaan pertama: menggunakan CSS dan JavaScript

Dalam kaedah pelaksanaan ini, kami menggunakan CSS untuk melukis gaya buih, dan kemudian mengawal kedudukan dan animasi buih melalui JavaScript. Berikut ialah langkah pelaksanaan:

1 Cipta kod HTML dan CSS

Kita perlu menggunakan HTML dan CSS untuk mencipta gaya latar belakang gelembung. Kod HTML adalah seperti berikut:

<div class="bubbles-container">
  <!-- 用于填充气泡的元素 -->
</div>

Kod CSS adalah seperti berikut:

.bubbles-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.8;
  z-index: 1;
  transform: scale(0);
  animation: bubble 2s ease-out infinite;
}

@keyframes bubble {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0);
    opacity: 0.8;
  }
}

Antaranya, elemen .bubbles-container digunakan untuk mengandungi semua elemen gelembung dan ditetapkan kepada kedudukan relatif. Elemen .bubble digayakan sebagai gelembung, menggunakan kedudukan mutlak dan menetapkan sempadan bulat dan warna latar belakang.

2. Cipta kod JavaScript

Seterusnya, kita perlu menggunakan JavaScript untuk mengawal kedudukan dan animasi gelembung. Kod adalah seperti berikut:

let bubbleContainer = document.querySelector('.bubbles-container');
let width = window.innerWidth;
let height = window.innerHeight;
let totalBubbles = 50;

for (let i = 0; i < totalBubbles; i++) {
  let bubble = document.createElement(&#39;div&#39;);
  bubble.classList.add(&#39;bubble&#39;);
  bubble.style.left = `${Math.random() * width}px`;
  bubble.style.top = `${Math.random() * height}px`;
  bubble.style.animationDelay = `${Math.random() * 2}s`;
  bubbleContainer.appendChild(bubble);
}

Kod ini mula-mula mencari elemen .bubbles-container dan mendapat lebar dan tinggi tetingkap penyemak imbas. Kemudian, gunakan gelung untuk mencipta bilangan buih tertentu (50 dalam kes ini). Setiap gelembung ialah elemen div, dengan kelas bubble. Kami juga menggunakan fungsi Math.random() untuk menetapkan kedudukan dan kelewatan animasi setiap gelembung secara rawak.

Kaedah pelaksanaan kedua: menggunakan Kanvas dan JavaScript

Cara lain untuk melaksanakan latar belakang gelembung ialah menulis kod menggunakan Kanvas dan JavaScript. Pendekatan ini membolehkan lebih banyak penyesuaian dan lebih fleksibel. Berikut ialah langkah pelaksanaan:

1 Cipta kod HTML

Dalam kes ini, kita hanya perlu menambah elemen Kanvas pada fail HTML untuk melukis latar belakang gelembung:

<canvas id="bubbles-canvas"></canvas>

let canvas = document.getElementById('bubbles-canvas');
let context = canvas.getContext('2d');
let width = window.innerWidth;
let height = window.innerHeight;
let bubbles = [];

canvas.width = width;
canvas.height = height;

function Bubble(x, y, r) {
  this.x = x;
  this.y = y;
  this.r = r;
  this.color = '#fff';
  this.vx = Math.random() - 0.5;
  this.vy = Math.random() * 2 - 1;

  this.draw = function() {
    context.beginPath();
    context.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    context.fillStyle = this.color;
    context.fill();
  };

  this.update = function() {
    this.x += this.vx;
    this.y += this.vy;

    if (this.x + this.r < 0) {
      this.x = width + this.r;
    }

    if (this.x - this.r > width) {
      this.x = -this.r;
    }

    if (this.y + this.r < 0) {
      this.y = height + this.r;
    }

    if (this.y - this.r > height) {
      this.y = -this.r;
    }
  };
}

for (let i = 0; i < 50; i++) {
  let bubble = new Bubble(
    Math.random() * width,
    Math.random() * height,
    Math.random() * 50
  );
  bubble.draw();
  bubbles.push(bubble);
}

function loop() {
  context.clearRect(0, 0, width, height);

  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].update();
    bubbles[i].draw();
  }

  requestAnimationFrame(loop);
}

loop();

gelembung, kami melukis bulatan menggunakan draw(), context.beginPath() dan context.arc(). Dalam fungsi context.fill(), kami menetapkan semakan kelajuan dan tepi untuk setiap gelembung. Akhir sekali, kami menggunakan fungsi update() untuk mencipta gelung tak terhingga yang memaparkan rasa gelembung secara dinamik. requestAnimationFrame()

Atas ialah kandungan terperinci Bagaimana untuk mereka bentuk latar belakang gelembung dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!