colorfulballoonsboyang77/index.js

This simple JavaScript script aims to create a visually pleasing effect of colorful balloons.

const colors = ['#FF5733', '#C70039', '#900C3F', '#581845', '#FFC300', '#FF5733', '#FF5733'];
const balloonSizeRange = [50, 150];
const balloonSpeedRange = [2000, 8000];
const balloonSpawnInterval = 1000;
const maxBalloons = 50;
let balloonCount = 0;

function createBalloon() {
  if (balloonCount >= maxBalloons) return;
  const balloon = document.createElement('div');
  balloon.className = 'balloon';
  const size = Math.random() * (balloonSizeRange[1] - balloonSizeRange[0]) + balloonSizeRange[0];
  const color = colors[Math.floor(Math.random() * colors.length)];
  balloon.style.width = `${size}px`;
  balloon.style.height = `${size}px`;
  balloon.style.background = color;
  balloon.style.left = `${Math.random() * window.innerWidth}px`;
  document.body.appendChild(balloon);

  balloonCount++;

  setTimeout(() => {
    balloon.remove();
    balloonCount--;
  }, Math.random() * (balloonSpeedRange[1] - balloonSpeedRange[0]) + balloonSpeedRange[0]);
}

function createBalloons() {
  setInterval(createBalloon, balloonSpawnInterval);
}

createBalloons();
function randomizeBalloonSize(balloon) {
  const newSize = Math.random() * (balloonSizeRange[1] - balloonSizeRange[0]) + balloonSizeRange[0];
  balloon.style.width = `${newSize}px`;
  balloon.style.height = `${newSize}px`;
}

function randomizeBalloonPosition(balloon) {
  balloon.style.left = `${Math.random() * window.innerWidth}px`;
  balloon.style.top = `${Math.random() * window.innerHeight}px`;
}

function randomizeBalloonColor(balloon) {
  const newColor = colors[Math.floor(Math.random() * colors.length)];
  balloon.style.background = newColor;
}

function addBalloonHoverEffect(balloon) {
  balloon.addEventListener('mouseover', () => {
    balloon.style.transform = 'scale(1.1)';
  });

  balloon.addEventListener('mouseout', () => {
    balloon.style.transform = 'scale(1)';
  });
}

function addClickToRemove(balloon) {
  balloon.addEventListener('click', () => {
    balloon.remove();
    balloonCount--;
  });
}

const balloonFunctions = [randomizeBalloonSize, randomizeBalloonPosition, randomizeBalloonColor, addBalloonHoverEffect, addClickToRemove];

function applyRandomBalloonFunction(balloon) {
  const randomFunctionIndex = Math.floor(Math.random() * balloonFunctions.length);
  balloonFunctions[randomFunctionIndex](balloon);
}

function createBalloon() {
  if (balloonCount >= maxBalloons) return;
  const balloon = document.createElement('div');
  balloon.className = 'balloon';
  applyRandomBalloonFunction(balloon);
  document.body.appendChild(balloon);

  balloonCount++;

  setTimeout(() => {
    balloon.remove();
    balloonCount--;
  }, Math.random() * (balloonSpeedRange[1] - balloonSpeedRange[0]) + balloonSpeedRange[0]);
}

function createBalloons() {
  setInterval(createBalloon, balloonSpawnInterval);
}
function addBalloonsOnResize() {
  window.addEventListener('resize', () => {
    const currentBalloonCount = document.querySelectorAll('.balloon').length;
    const balloonsToAdd = maxBalloons - currentBalloonCount;
    for (let i = 0; i < balloonsToAdd; i++) {
      createBalloon();
    }
  });
}

function createBalloonsOnClick() {
  document.addEventListener('click', (event) => {
    if (event.target.tagName === 'BODY') {
      createBalloon();
    }
  });
}

function randomizeBalloonRotation(balloon) {
  const rotation = Math.random() * 360;
  balloon.style.transform = `rotate(${rotation}deg)`;
}

function randomizeBalloonOpacity(balloon) {
  const opacity = Math.random();
  balloon.style.opacity = opacity;
}

function addBounceEffect(balloon) {
  const maxHeight = window.innerHeight - parseInt(balloon.style.height);
  let currentHeight = parseInt(balloon.style.top);
  let direction = 1;
  setInterval(() => {
    if (currentHeight <= 0 || currentHeight >= maxHeight) {
      direction *= -1;
    }
    currentHeight += direction * 5;
    balloon.style.top = `${currentHeight}px`;
  }, 100);
}

balloonFunctions.push(randomizeBalloonRotation, randomizeBalloonOpacity, addBounceEffect);

function applyRandomBalloonFunction(balloon) {
  const randomFunctionIndex = Math.floor(Math.random() * balloonFunctions.length);
  balloonFunctions[randomFunctionIndex](balloon);
}

function addRandomAnimation(balloon) {
  const animations = ['bounce', 'rotate', 'shake', 'fade'];
  const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
  balloon.style.animation = `${randomAnimation} 1s ease infinite alternate`;
}

function randomizeBalloonBorderColor(balloon) {
  const newColor = colors[Math.floor(Math.random() * colors.length)];
  balloon.style.border = `2px solid ${newColor}`;
}

function addHoverScaleEffect(balloon) {
  balloon.addEventListener('mouseover', () => {
    balloon.style.transform = 'scale(1.2)';
  });

  balloon.addEventListener('mouseout', () => {
    balloon.style.transform = 'scale(1)';
  });
}

function addRandomZIndex(balloon) {
  const zIndex = Math.floor(Math.random() * 10);
  balloon.style.zIndex = zIndex;
}

function addTextInsideBalloon(balloon) {
  const text = document.createElement('span');
  text.innerText = '🎈';
  text.style.fontSize = '20px';
  text.style.position = 'absolute';
  text.style.top = '50%';
  text.style.left = '50%';
  text.style.transform = 'translate(-50%, -50%)';
  balloon.appendChild(text);
}

balloonFunctions.push(addRandomAnimation, randomizeBalloonBorderColor, addHoverScaleEffect, addRandomZIndex, addTextInsideBalloon);

function applyRandomBalloonFunction(balloon) {
  const randomFunctionIndex = Math.floor(Math.random() * balloonFunctions.length);
  balloonFunctions[randomFunctionIndex](balloon);
}