Skip to content

Interactive JavaScript Effects

Discover a collection of interactive JavaScript effects to enhance your web page. From typewriter animations to rainbow-like color changes, propeller rotations, zooming effects, dynamic background changes, mouse trail effects, binary rain, emoji rain, and more, explore creative ways to engage your audience with dynamic visual elements.

A simple example for typewriter 
const textElement = document.querySelector('h1'); 
const text = "Hello, World! This is a typewriter effect.";
let index = 0;

function typeWriter() {
  if (index < text.length) {
    textElement.textContent += text.charAt(index);
    index++;
    setTimeout(typeWriter, 100); 
  }
}

typeWriter();
This effect creates a dazzling rainbow-like color change on a piece of text 
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
var currentColorIndex = 0;
var textElement = document.querySelector('h1');

function changeColor() {
  currentColorIndex = (currentColorIndex + 1) % colors.length;
  textElement.style.color = colors[currentColorIndex]; 
  setTimeout(changeColor, 500); 
}

changeColor();
Proppeller 
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();
Zoom out and Zoom in 
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();
Change background dynamically 
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();
Mouse Trail Effect 
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());
  }
});
Binary Rain 
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);
Bnary rain effect with additional customization options: 
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];
}
Emoji Rain 
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);
Dynamic particle system that reacts to mouse movement 
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let mouseX = 0;
let mouseY = 0;
document.addEventListener('mousemove', (event) => {
  mouseX = event.clientX;
  mouseY = event.clientY;
});

class Particle {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.radians = Math.random() * Math.PI * 2;
    this.velocity = 0.05;
    this.distanceFromCenter = Math.random() * 100 + 50;
    this.lastMouse = { x: x, y: y };
  }

  update() {
    const lastPoint = { x: this.x, y: this.y };

    this.radians += this.velocity;

    this.lastMouse.x += (mouseX - this.lastMouse.x) * 0.05;
    this.lastMouse.y += (mouseY - this.lastMouse.y) * 0.05;

    // Circular motion
    this.x = this.lastMouse.x + Math.cos(this.radians) * this.distanceFromCenter;
    this.y = this.lastMouse.y + Math.sin(this.radians) * this.distanceFromCenter;

    this.draw(lastPoint);
  }

  draw(lastPoint) {
    ctx.beginPath();
    ctx.strokeStyle = this.color;
    ctx.lineWidth = this.radius;
    ctx.moveTo(lastPoint.x, lastPoint.y);
    ctx.lineTo(this.x, this.y);
    ctx.stroke();
    ctx.closePath();
  }
}

const particles = [];
function init() {
  for (let i = 0; i < 50; i++) {
    const radius = (Math.random() * 2) + 1;
    particles.push(new Particle(canvas.width / 2, canvas.height / 2, radius, '#fff'));
  }
}

function animate() {
  requestAnimationFrame(animate);
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  particles.forEach(particle => {
    particle.update();
  });
}

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