Animate CSS: Hoạt ảnh chữ Fade In đơn giản

Animate CSS cực kì đơn giản này có thể được sử dụng để làm loading screen cho website của bạn trở nên đẹp hơn.

Snippet này mình sưu tầm được trong quá trình làm việc với những project cần Animate CSS, bạn có thể tham khảo code và codepen dưới đây:

<div class="text-loading">
  <span>共</span>
  <span>に</span>
  <span>、</span>
  <span>そ</span>
  <span>の</span>
  <span>先</span>
  <span>へ</span>
</div>

@keyframes text-animation {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}  

.text-loading {
    margin-top: 14px;
    text-align: center;

    span {
      display: inline-block;
      color: #000;
      font-size: 40px;
      font-weight: bold;
      opacity: 0;
      transform: translateX(-50%);
      letter-spacing: .38em;

      &:nth-child(1) {
        animation: text-animation .6s 1.5s forwards;
      }

      &:nth-child(2) {
        animation: text-animation .6s 1.7s forwards;
      }

      &:nth-child(3) {
        animation: text-animation .6s 1.9s forwards;
      }

      &:nth-child(4) {
        animation: text-animation .6s 2.1s forwards;
      }

      &:nth-child(5) {
        animation: text-animation .6s 2.3s forwards;
      }

      &:nth-child(6) {
        animation: text-animation .6s 2.5s forwards;
      }

      &:nth-child(7) {
        animation: text-animation .6s 2.7s forwards;
      }
    }
  }

See the Pen text animation by minhchau (@ngocminhxx) on CodePen.

Như các bạn đã thấy, chúng ta cần tách mỗi chữ ra thành các kí tự để chúng xuất hiện lần lượt. Tuy nhiên, nếu code bằng tay thì sẽ rất tốn thời gian. Vì vậy, mình xin giới thiệu một cách tách chữ ra thành các kí tự và bọc chúng bằng thẻ span đơn giản nhất bằng Jquery. Trước tiên là HTML:

<div class="text-loading">共に、その先 </div>

Jquery chúng ta cần đoạn code như sau:

 $(".text-loading").text(function () {
    var str = $(this).text().trim();
    var html = "";

    for (var i = 0; i < str.length; i++) {
      html += "<span>" + str.charAt(i) + "</span>"; //Có thể thay thế wrapper tùy ý
    }

    $(this).empty().html(html);
  });

Và khi kết hợp với animate CSS, chúng ta sẽ có kết quả như sau:

See the Pen Spilt by minhchau (@ngocminhxx) on CodePen.

Chúc các bạn vui vẻ và thật nhiều năng lượng trong công việc!