Конфетти при нажатии кнопки

Вы хотите добавить на свой сайт интересный и интерактивный элемент? Анимация конфетти может стать отличным способом привлечь пользователей и отметить особые моменты. В этом уроке мы познакомим вас с процессом создания анимации конфетти с использованием HTML, CSS и jаvascript.

HTML

Начнем с HTML-кода. Скопируйте приведенный ниже код и вставьте его в свой HTML-документ.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Confetti On Button Click</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <canvas id="canvas">Canvas is not supported in your browser</canvas>
    </div>
    <button id="display-confetti">Click Me!</button>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS

Далее мы стилизуем нашу игру с помощью CSS. Для этого скопируйте код, предоставленный вам ниже, и вставьте его в свою таблицу стилей.

body {
  overflow: hidden;
}
canvas {
  background-color: #ffffff;
}
button {
  font-size: 1em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  padding: 1.5em 3em;
  border-radius: 3em;
  background-color: #1164f4;
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

Наконец, мы добавляем функциональность с помощью jаvascript. Для этого еще раз скопируйте приведенный ниже код и вставьте его в файл сценария.

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let width = window.innerWidth;
let height = window.innerHeight;
let clicked = false;
let displayButton = document.getElementById("display-confetti");
let particles = [];
let colors = ["#141b41", "306bac", "#6f9ceb", "#98b9f2", "#918ef4"];

//Events object
let events = {
  mouse: {
    down: "mousedown",
    move: "mousemove",
    up: "mouseup",
  },
  touch: {
    down: "touchstart",
    move: "touchmovve",
    up: "touchend",
  },
};

let deviceType = "";
//Detect touch device
const isTouchDevice = () => {
  try {
    document.createEvent("TouchEvent");
    deviceType = "touch";
    return true;
  } catch (e) {
    deviceType = "mouse";
    return false;
  }
};

//For using request animationFrame on all browsers
window.requestAnimationFrame =
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequesetAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };

//Random number between range
function randomNumberGenerator(min, max) {
  return Math.random() * (max - min) + min;
}

function startConfetti() {
  let current = [];
  context.fillStyle = "rgba(255,255,255,1)";
  context.fillRect(0, 0, width, height);
  if (clicked) {
    createConfetti();
  }
  for (let i in particles) {
    particles[i].draw();
    if (particles[i].move()) {
      current.push(particles[i]);
    }
  }

  particles = current;
  window.requestAnimationFrame(startConfetti);
}

function createConfetti() {
  //Increase range for bigger confetti;
  let numberOfParticles = randomNumberGenerator(10, 20);
  let color = colors[Math.floor(randomNumberGenerator(0, colors.length))];
  for (let i = 0; i < numberOfParticles; i++) {
    let particle = new Particle();
    particle.color = color;
    particles.push(particle);
  }
}

function Particle() {
  let buttonBounds = displayButton.getBoundingClientRect();
  this.width = randomNumberGenerator(0.1, 0.9) * 5;
  this.height = randomNumberGenerator(0.1, 0.9) * 5;
  this.x = buttonBounds.x + buttonBounds.width / 2;
  this.y = buttonBounds.y + buttonBounds.height / 2;
  let angle = Math.random() * Math.PI * 2;
  let speed = randomNumberGenerator(1, 5);
  this.vx = Math.cos(angle) * speed;
  this.vy = Math.sin(angle) * speed;
}

Particle.prototype = {
  move: function () {
    if (this.x >= canvas.width || this.y >= canvas.height) {
      return false;
    }
    return true;
  },
  draw: function () {
    this.x += this.vx;
    this.y += this.vy;
    context.save();
    context.beginPath();
    context.translate(this.x, this.y);
    context.arc(0, 0, this.width, 0, Math.PI * 2);
    context.fillStyle = this.color;
    context.closePath();
    context.fill();
    context.restore();
  },
};

isTouchDevice();
displayButton.addEventListener(events[deviceType].down, function (e) {
  e.preventDefault();
  clicked = true;
});

displayButton.addEventListener(events[deviceType].up, function (e) {
  e.preventDefault();
  clicked = false;
});

window.onload = () => {
  canvas.width = width;
  canvas.height = height;
  window.requestAnimationFrame(startConfetti);
};

Поздравляем! Вы успешно создали анимацию конфетти, используя HTML, CSS и jаvascript. Этот интерактивный элемент может стать забавным дополнением к вашему сайту, особенно для торжеств и особых случаев. Не стесняйтесь настраивать цвета, размеры и поведение конфетти в соответствии с темой вашего веб-сайта.