비전공자 개발일기

Confetti Text Effect 본문

HTML _CSS

Confetti Text Effect

HiroDaegu 2023. 2. 9. 23:17
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>CONFETTI TEXT EFFECT</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="wrapper">
        <span class="particletext confetti">OLLEH!!!</span>
    </div>
</body>

</html>
body {
    height: 100vh;
    display: grid;
    place-items: center;
    font-family: "bebas", sans-serif;
    background-color: #000;
  }
  
  .particletext {
    text-align: center;
    font-size: 48px;
    position: relative;
    color: #fff;
  }
  
  .particletext.confetti > .particle {
    opacity: 0;
    position: absolute;
    -webkit-animation: confetti 3s ease-in infinite;
            animation: confetti 3s ease-in infinite;
  }
  
  .particletext.confetti > .particle.c1 {
    background-color: #4CAF50;
  }
  
  .particletext.confetti > .particle.c2 {
    background-color: #9C27B0;
  }
  
  @keyframes confetti {
    0% {
      opacity: 0;
      transform: translateY(0%) rotate(0deg);
    }
    10% {
      opacity: 1;
    }
    35% {
      transform: translateY(-800%) rotate(270deg);
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(2000%) rotate(1440deg);
    }
  }
function initparticles() {
  confetti();
}

function confetti() {
  $.each($(".particletext.confetti"), function () {
    var confetticount = ($(this).width() / 50) * 10;
    for (var i = 0; i <= confetticount; i++) {
      $(this).append(
        '<span class="particle c' +
          $.rnd(1, 2) +
          '" style="top:' +
          $.rnd(10, 50) +
          "%; left:" +
          $.rnd(0, 100) +
          "%;width:" +
          $.rnd(6, 8) +
          "px; height:" +
          $.rnd(3, 4) +
          "px;animation-delay: " +
          $.rnd(0, 30) / 10 +
          's;"></span>'
      );
    }
  });
}

jQuery.rnd = function (m, n) {
  m = parseInt(m);
  n = parseInt(n);
  return Math.floor(Math.random() * (n - m + 1)) + m;
};

initparticles();
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Custome Upload File  (0) 2023.02.11
Neon Love  (0) 2023.02.10
Send Button Animation  (0) 2023.02.08
Bouncing Ball  (0) 2023.02.07
Pulse effect on button hover  (0) 2023.02.06
'HTML _CSS' Related Articles more