비전공자 개발일기

CSS & JS Bubble Effect 본문

Javascript

CSS & JS Bubble Effect

HiroDaegu 2022. 8. 14. 23:03
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS & JS ANIMATION EFFECTS</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <h2>Happy<br>Birth<br>Day</h2>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  background-color: #2598EB;
}

h2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  font-size: 12vw;
  line-height: 1em;
  font-weight: 800;
  color: #667ABA;
  text-transform: uppercase;
  z-index: 3;
}

i {
  position: absolute;
  display: block;
  background-color: #000;
  border-radius: 50%;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    transform: translateY(calc(100vh + 350px));
  }
  100% {
    transform: translateY(-300px);
  }
}

i:nth-child(5n + 1) {
  background-color: #FFF;
}

i:nth-child(5n + 2) {
  background-color: #FFB03C;
}

i:nth-child(5n + 3) {
  background-color: #FFF;
  border: 5px solid #FF9933;
}

i:nth-child(5n + 4) {
  background-color: #2BD11B;
}

i:nth-child(5n + 5) {
  background-color: #FFF;
  border: 5px soild #2BD11B;
}
function circle() {
  let amount = 100;
  let body = document.querySelector("body");
  let i = 0;
  while(i < amount) {

    let el = document.createElement('i');
    let posX = Math.floor(Math.random() * window.innerWidth);
    let delay = Math.random() * -20;
    let duration = Math.random() * 10;

    let size = Math.random() * 250;
    el.style.width = 10 + size + 'px';
    el.style.height = 10 + size + 'px';
    el.style.left = posX + 'px';
    el.style.animationDelay = delay + 's'; 
    el.style.animationDirection = 5 + duration + 's';
    el.style.webkitBoxShadow = "0 30px 50px #0002"; 

    body.appendChild(el);
    i++;
  }
}

circle();
728x90
LIST

'Javascript' 카테고리의 다른 글

Chart  (0) 2022.08.24
Ecommerce Website  (0) 2022.08.21
Word Guess Game  (0) 2022.08.12
Search Filter  (0) 2022.08.02
ColorFul Rain  (0) 2022.07.31
'Javascript' Related Articles more