Interactive JavaScript Effects

var rotation = 0;
var element = document.querySelector('body');

function rotatePropeller() {
    rotation += 10;
    element.style.transform = 'rotate(' + rotation + 'deg)';
    element.style.webkitTransform = 'rotate(' + rotation + 'deg)';
    element.style.MozTransform = 'rotate(' + rotation + 'deg)';
    element.style.msTransform = 'rotate(' + rotation + 'deg)';
    element.style.OTransform = 'rotate(' + rotation + 'deg)';
    requestAnimationFrame(rotatePropeller);
}

rotatePropeller();

var zoomLevel = 1; 
var zoomStep = 0.05;
var zoomOut = true;

function animateZoom() {
  if (zoomOut) {
    zoomLevel -= zoomStep;
    if (zoomLevel <= 0.1) {
      zoomOut = false;
    }
  } else {
    zoomLevel += zoomStep;
    if (zoomLevel >= 1) {
      zoomOut = true;
    }
  }

  document.body.style.zoom = zoomLevel;

  requestAnimationFrame(animateZoom);
}

animateZoom();

function updateGradientBackground() {
  const colors = ['#ff6b6b', '#ffa07a', '#f0e68c', '#98fb98', '#dda0dd', '#87ceeb'];
  let currentIndex = 0;

  function changeColor() {
    document.body.style.transition = 'background-color 1s ease-in-out';
    document.body.style.backgroundColor = colors[currentIndex];
    currentIndex = (currentIndex + 1) % colors.length;
    setTimeout(changeColor, 2000);
  }

  changeColor();
}

updateGradientBackground();

var trailElements = [];
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];

document.addEventListener('mousemove', function (event) {
  var trailElement = document.createElement('div');
  trailElement.className = 'trail';
  var color = colors[Math.floor(Math.random() * colors.length)];
  trailElement.style.backgroundColor = color;
  trailElement.style.position = 'absolute';
  trailElement.style.width = '10px';
  trailElement.style.height = '10px';
  trailElement.style.borderRadius = '50%';
  trailElement.style.left = event.pageX - 5 + 'px';
  trailElement.style.top = event.pageY - 5 + 'px';

  document.body.appendChild(trailElement);
  trailElements.push(trailElement);

  if (trailElements.length > 20) {
    document.body.removeChild(trailElements.shift());
  }
});

const binaryContainer = document.createElement('div');
binaryContainer.style.position = 'fixed';
binaryContainer.style.top = '0';
binaryContainer.style.left = '0';
binaryContainer.style.width = '100%';
binaryContainer.style.height = '100%';
binaryContainer.style.overflow = 'hidden';
binaryContainer.style.color = '#0F0'; // Color of the rain (green)
document.body.appendChild(binaryContainer);

setInterval(function () {
  const binaryDigit = Math.floor(Math.random() * 2); 
  const binaryElement = document.createElement('span');
  binaryElement.innerText = binaryDigit;
  binaryElement.style.position = 'absolute';
  binaryElement.style.left = Math.random() * 100 + 'vw';
  binaryElement.style.top = '-20px';
  binaryElement.style.fontSize = '20px'; // Adjust font size as needed
  binaryContainer.appendChild(binaryElement);

  const animationDuration = Math.random() * 3 + 2;
  binaryElement.style.animation = `fall ${animationDuration}s linear forwards`;

  // Remove the binary element after animation ends
  binaryElement.addEventListener('animationend', function() {
    binaryElement.remove();
  });
}, 100);

const styles = document.createElement('style');
styles.innerHTML = `
  @keyframes fall {
    0% {
      transform: translateY(-20px);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh);
      opacity: 0;
    }
  }
`;
document.head.appendChild(styles);

const config = {
  fontSize: 20,          
  color: '#0F0',         
  density: 0.05,         
  speedRange: [2, 5],    
  lengthRange: [30, 60]  
};

const binaryContainer = document.createElement('div');
binaryContainer.style.position = 'fixed';
binaryContainer.style.top = '0';
binaryContainer.style.left = '0';
binaryContainer.style.width = '100%';
binaryContainer.style.height = '100%';
binaryContainer.style.overflow = 'hidden';
binaryContainer.style.color = config.color;
document.body.appendChild(binaryContainer);

setInterval(() => {
  if (Math.random() < config.density) {
    const binaryStream = createBinaryStream();
    binaryContainer.appendChild(binaryStream.element);
    const animationDuration = getRandomValueInRange(config.speedRange);
    binaryStream.element.style.animation = `fall ${animationDuration}s linear forwards`;
    binaryStream.element.addEventListener('animationend', () => {
      binaryStream.element.remove();
    });
  }
}, 100); 

const styles = document.createElement('style');
styles.innerHTML = `
  @keyframes fall {
    0% {
      transform: translateY(-${config.fontSize}px);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh);
      opacity: 0;
    }
  }
`;
document.head.appendChild(styles);

function createBinaryStream() {
  const binaryStream = document.createElement('span');
  const streamLength = getRandomValueInRange(config.lengthRange);
  const binaryDigits = Array.from({ length: streamLength }, () => Math.floor(Math.random() * 2));
  binaryStream.textContent = binaryDigits.join('');
  binaryStream.style.position = 'absolute';
  binaryStream.style.left = `${Math.random() * 100}vw`;
  binaryStream.style.fontSize = `${config.fontSize}px`;
  return { element: binaryStream, length: streamLength };
}

function getRandomValueInRange(range) {
  return Math.random() * (range[1] - range[0]) + range[0];
}

var emojis = ['😀', '😍', '🚀', '💡', '🌟', '❤️', '🎉'];
var emojisContainer = document.createElement('div');
emojisContainer.style.position = 'fixed';
emojisContainer.style.top = '0';
emojisContainer.style.pointerEvents = 'none';
document.body.appendChild(emojisContainer);

setInterval(function () {
  var emoji = emojis[Math.floor(Math.random() * emojis.length)];
  var emojiElement = document.createElement('span');
  emojiElement.style.position = 'absolute';
  emojiElement.style.left = Math.random() * 100 + 'vw';
  emojiElement.style.animation = 'fall 5s linear forwards';
  emojiElement.innerText = emoji;
  emojisContainer.appendChild(emojiElement);
}, 500);

var styles = document.createElement('style');
styles.innerHTML = `
  @keyframes fall {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh);
      opacity: 0;
    }
  }
`;
document.head.appendChild(styles);

var text = "Hello, I'm a cool text-to-speech demo!";
var speechSynthesis = window.speechSynthesis;
var utterance = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(utterance);