Text Animation WIth Html Css And Javascript With Free Source Code

Author - personCodeatnow

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | Playful</title>
  <link rel='stylesheet'
    href='https://fonts.googleapis.com/css2?family=B612+Mono&amp;family=Roboto+Mono:wght@400;600&amp;family=Slackey&amp;display=swap'>
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <div>
    <span><span>Co</span></span><span><span>de</span></span><span><span>at</span></span><span><span>now</span></span>
  </div>

  <script src="./script.js"></script>

</body>

</html>

CSS

body {
  align-items: center;
  background: #11131e;
  box-sizing: border-box;
  color: #3a4066;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: 'Slackey', sans-serif;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  padding: 100px;
}

div {
  font-size: 10vw;
  line-height: 1;
}

div > span {
  display: inline-block;
  overflow: hidden;
  transition-duration: 0.5s;
  transition-property: transform;
}

div > span span {
  display: inline-block;
  transition-duration: 0.5s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

div > span:nth-child(odd) {
  transform: translateY(50%);
}

div > span:nth-child(odd) span {
  transform: translateY(-100%);
}

div > span:nth-child(even) {
  transform: translateY(-50%);
}

div > span:nth-child(even) span {
  transform: translateY(100%);
}

div.loaded  > span {
  transform: translateY(0);
}

div.loaded > span span {
  transform: translateY(0);
}

const d =  document.querySelector('div');

setTimeout(() => {
 d.classList.add('loaded');
}, 500);

document.body.addEventListener('click', () => {
  d.classList.toggle('loaded');
});