How to design bubble background with javascript

Bubble backgrounds are an often used design element that provide a visual impact and interest by imitating the shape and inflating effect of bubbles. In the world of web development, JavaScript is a very flexible language that can be used to create a variety of dynamic effects, including bubble backgrounds. This article will introduce readers to how to use JavaScript to design bubble backgrounds, as well as several common implementation methods.

The first implementation method: using CSS and JavaScript

In this implementation method, we use CSS to draw the style of the bubbles, and then control the position and animation of the bubbles through JavaScript. The following are the implementation steps:

1. Create HTML and CSS code

We need to use HTML and CSS to create the style of the bubble background. The HTML code is as follows:

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

The CSS code is as follows:

.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;
  }
}

Among them, the .bubbles-container element is used to contain all elements of bubbles and is set to relative positioning. The .bubble element is the style of a bubble, using absolute positioning and setting a circular border and background color.

2. Create JavaScript code

Next, we need to use JavaScript to control the position and animation of the bubbles. The code is as follows:

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

This code first finds the .bubbles-container element and gets the width and height of the browser window. Then, use a loop to create a certain number of bubbles (50 in this case). Each bubble is a div element with class bubble. We also use the Math.random() function to randomly set the position and animation delay of each bubble.

Second implementation method: using Canvas and JavaScript

Another way to implement the bubble background is to write code using Canvas and JavaScript. This approach allows for more customization and is more flexible. The following are the implementation steps:

1. Create HTML code

In this case, we only need to add a Canvas element to the HTML file for drawing the bubble background:

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

2. Create JavaScript code

Next, we need to use JavaScript to draw the bubble background. The code is as follows:

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

This code creates a Canvas element and creates a 2D context for it. We also create a bubble object and use a loop to create multiple bubbles. In each bubble's draw() function, we use context.beginPath(), context.arc() and context.fill( )Draws a circle. In the update() function, we set the speed and edge check for each bubble. Finally, we use the requestAnimationFrame() function to create an infinite loop to dynamically display the bubble taste.

Conclusion

This article introduces two common JavaScript methods to implement bubble backgrounds, namely using CSS and JavaScript and using Canvas and JavaScript. These techniques can certainly add interest and visual appeal to the website you create. Whether you are new to web development or a veteran, learning to use these techniques will make you stand out in the world of web development.

The above is the detailed content of How to design bubble background with javascript. For more information, please follow other related articles on the PHP Chinese website!