Share code

Hướng dẫn tạo animation text trong wordpress

by nhaklamweb

Đầu tiền bạn chèn code HTML, đổi các text thành text của bạn mong muốn

<div class="slick-track marquee" ><a href="/" title="Giảm 8% cho đơn hàng từ 499K" class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1">Giảm 8% cho đơn hàng từ 499K</a><a href="/" title="Giảm 10% cho đơn hàng từ 800K" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">Giảm 10% cho đơn hàng từ 800K</a><a href="/" title="Giảm 30K cho đơn hàng từ 399K" class="slick-slide slick-current slick-active slick-center" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide10">Giảm 30K cho đơn hàng từ 399K</a><a href="/" title="Giảm 8% cho đơn hàng từ 499K" class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide11">Giảm 8% cho đơn hàng từ 499K</a><a href="/" title="Giảm 10% cho đơn hàng từ 800K" class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide12">Giảm 10% cho đơn hàng từ 800K</a><a href="/" title="Giảm 30K cho đơn hàng từ 399K" class="slick-slide slick-cloned slick-center" data-slick-index="3" aria-hidden="true" tabindex="-1">Giảm 30K cho đơn hàng từ 399K</a><a href="/" title="Giảm 8% cho đơn hàng từ 499K" class="slick-slide slick-cloned" data-slick-index="4" aria-hidden="true" tabindex="-1">Giảm 8% cho đơn hàng từ 499K</a></div>

Sau đó thêm css vao file style.css của bạn

.marquee {
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  height: 61px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

.marquee a {
  display: inline-block;
  padding-left: 4.4rem;
  text-indent: 0;
  animation: marquee 6s linear infinite;
  font-weight: 500;
  font-size: 14px;
  line-height: 125%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #000;
}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}