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>

2. Cipta kod JavaScript

Seterusnya, kita perlu menggunakan JavaScript untuk melukis latar belakang gelembung. Kodnya adalah seperti berikut:

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();

Kod ini mencipta elemen Kanvas dan mencipta konteks 2D untuknya. Kami juga mencipta objek gelembung dan menggunakan gelung untuk mencipta berbilang buih. Dalam setiap fungsi

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()

Kesimpulan

Artikel ini memperkenalkan dua kaedah JavaScript biasa untuk melaksanakan latar belakang gelembung, iaitu menggunakan CSS dan JavaScript serta menggunakan Kanvas dan JavaScript. Teknik ini pastinya boleh menambah minat dan daya tarikan visual pada tapak web yang anda buat. Sama ada anda baru dalam pembangunan web atau veteran, belajar menggunakan teknik ini akan menjadikan anda menonjol dalam dunia pembangunan web.

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!