app.js

const header = document.querySelector('header');
const intro = document.querySelector('#home');
window.addEventListener('scroll',function(){
   
    if (window.scrollY > intro.clientHeight) {
        header.classList.add('sticky');
      } else {
        header.classList.remove('sticky');
      }

});
const toggleButton = document.querySelector('.bar');
const  navLinks =document.querySelector('.nav-links');
const  navLink =document.querySelectorAll('.linkk');

toggleButton.addEventListener('click',() => {
  navLinks.classList.toggle('active');
});

navLink.forEach(link => {
  link.addEventListener('click',()=>{
    navLinks.classList.remove('active');
  })
});
function reveal() {
 let reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    let windowHeight = window.innerHeight;
    let elementTop = reveals[i].getBoundingClientRect().top;
    let elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);
AOS.init();
const colors = ["#c72469", "#ffffff", "#892880", "#242424", "#f40c90"];

const numBalls = 50;
const balls = [];

for (let i = 0; i < numBalls; i++) {
  let ball = document.createElement("div");
  ball.classList.add("ball");
  ball.style.background = colors[Math.floor(Math.random() * colors.length)];
  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
  ball.style.transform = `scale(${Math.random()})`;
  ball.style.width = `${Math.random()}em`;
  ball.style.height = ball.style.width;
  
  balls.push(ball);
  document.body.append(ball);
}

// Keyframes
balls.forEach((el, i, ra) => {
  let to = {
    x: Math.random() * (i % 2 === 0 ? -11 : 11),
    y: Math.random() * 12
  };

  let anim = el.animate(
    [
      { transform: "translate(0, 0)" },
      { transform: `translate(${to.x}rem, ${to.y}rem)` }
    ],
    {
      duration: (Math.random() + 1) * 2000, // random duration
      direction: "alternate",
      fill: "both",
      iterations: Infinity,
      easing: "ease-in-out"
    }
  );
});