Vanilla JS: Tạo hiệu ứng chữ slide up

https://viblo.asia/p/vanilla-js-tao-hieu-ung-chu-slide-up-RQqKLeQ0Z7z

by trung ken

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<h1 class="my-5 text-center">Sliding Texts</h1>
<h4 class="wrapper text-center mt-5">
  Code đêm có thể khiến bạn
  <div class="control">
    <div id="slider" class="text-white bg-danger">
      <div>trầm cảm</div>
      <div>căng thẳng</div>
      <div>gay</div>
    </div>
  </div>
</h4>

CSS

.wrapper { display: flex; justify-content: center; align-items: center;}
.control { display: inline-block; transition: all 0.3s; height: 60px; overflow: hidden; margin-left: 10px; }
#slider div { height: 60px; line-height: 60px;padding: 0 5px; }
.animated { transition: all 0.5s; margin-top: -60px; }

JavaScript

const wrapElement = document.querySelector('#slider')

setInterval(slidingText, 3000)

function slidingText() {
  wrapElement.classList.add('animated')
  setTimeout(loopText, 500)
}

function loopText() {
  const firstElement = document.querySelector('#slider div')
  wrapElement.appendChild(firstElement)
  wrapElement.classList.remove('animated')
}