Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

👉 Để tiến hành thực hiện code chúng ta cần biết Random Text Animated hoạt động thế nào ?

Đầu tiên ta cần có một đoạn text. Để các chữ trong đoạn text này xuất hiện random thì ta phải chia nhỏ text này thành các chữ cái.

Sau đó ta sẽ cho các chữ cái này xuất hiện random cho đến khi nó tạo thành đoạn text có nghĩa như ban đầu chúng ta nhập.

Trong quá trình random ta add thêm các animation cho các letter. Cứ như vậy ta sẽ được hiệu ứng Random Text Animated.

Đây là cách làm của mình các bạn tham khảo nhé 😄😄:

HTML

<div class="wrapper">
  <h1>Text Random Appear - Homiedev</h1>
  <div class="text">Simple website to learn Frontend</div>
</div>

Chúng ta sẽ thực hiện hiệu ứng trên đoạn text có class text. Phần css mình sẽ nói trong quá trình viết JavaScript nhé 😁.

const text = document.querySelector('.text');
const charArr = text.textContent.split(''); // ["S", "i", "m", "p", "l", "e", ...]

Ở đoạn code trên mình đã get class text và gán vào biến text. Sau đó ta sẽ lấy text và lấy nội dung bên trong cho vào 1 array. Mảng này chứa các letter như mình đã nói ban đầu. 😄

Tiếp theo cần tạo một biến để chứa một string letters. Mình sẽ kiểm tra điều kiện nếu có khoảng trắng sẽ thêm &nbsp; Non-breaking space . Điều kiện sẽ thực thi nếu trong text của ta có một hay nhiều dấu cách.

Sau đó thêm các kí tự đã gắn class letter vào DOM. Mình dùng text.innerHTML = dataText;.

let dataText = '';

charArr.forEach((element, index) => {
    if (hasWhiteSpace(element)) {
        dataText += `<span class="letter letter-${index}">&nbsp;</span>`;
    } else {
        dataText += `<span class='letter letter-${index}'>${element}</span>`;
    }
});

text.innerHTML = dataText;

Chi tiết hàm hasWhiteSpace():

function hasWhiteSpace(str) {
    return str.indexOf(' ') >= 0;
}

Tiếp tục, mình tạo thêm một mảng gồm các số dựa theo độ dài của text. Mảng các số này mình sẽ thực hiện random xem số nào xuất hiện, tương ứng sẽ là kí tự trong mảng kí tự charArr.

const arrNumberRandom = [];
for (let i = 0; i < charArr.length; i++) {
    arrNumberRandom.push(i);
}

Sau các bước trên, Tất cả letter đã xuất hiện trong DOM. Lúc này các letter sẽ xuất hiện trên màn hình. Nhưng mình sẽ ẩn toàn bộ letter đi bằng css như sau:

.letter {
    opacity: 0;
    visibility: hidden;
}

Vì mình chưa thêm hiệu ứng cho letters nên đây là lí do mình ẩn nó đi.

Tiếp theo mình sẽ tạo vòng lặp. Vòng lặp này số lần chạy sẽ bằng đúng số độ dài của mảng letters.

for (let i = 0; i < charArr.length; i++) {
  ...
}

Trong vòng lặp mình sẽ thực hiện random các số trong mảng số arrNumberRandom đã tạo ở trên:

for (let i = 0; i < charArr.length; i++) {
  let indexRandom = randomNumber(arrNumberRandom.length);
}

indexRandom sẽ lưu index của số trong mảng arrNumberRandom khi random, dùng để tìm vị trí của letter

Chi tiết hàm randomNumber():

function randomNumber(length) {
    return Math.floor(Math.random() * length);
}

Tiếp tục, trong vòng lặp mình tìm vị trí letter ra bằng cách:

lấy số trong mảng arrNumberRandom sẽ là vị trí của letter gán vào biến posOfletter. Sau đó, ta lấy letter ra dễ dàng ^^

const letters = document.querySelectorAll('.letter');
for (let i = 0; i < charArr.length; i++) {
  let indexRandom = randomNumber(arrNumberRandom.length);

  const posOfletter = arrNumberRandom[indexRandom];
  const letter = letters[posOfletter];
}

Tiếp theo mình sẽ add thêm class đã style css và remove số đã random ra để mảng sẽ không random ra số đó nữa. 😅 Nếu random ra lại thì text sẽ cần nhiều thời gian để nó random ra hết letter. Bạn hiểu ý mình đúng không ^^.

Nếu khó hiểu chỗ nào hãy console.log ra để hiểu nhé.

let delay = 0;
for (let i = 0; i < charArr.length; i++) {
  let indexRandom = randomNumber(arrNumberRandom.length);

  const posOfletter = arrNumberRandom[indexRandom];
  const letter = letters[posOfletter];

  letter.style.transitionDelay = `${(delay += 0.01)}s`;
  letter.style.animationDelay = `${(delay += 0.1)}s`;
  letter.classList.add('appear', 'go-down');

  arrNumberRandom.splice(indexRandom, 1);
}

Mình cho các letter xuất hiện bằng cách add thêm class appear. class go-down sẽ làm cho letter trở về vị trí cũ. bạn xem css sẽ rõ.

Thời gian chạy animation mình tạo sẵn bên css. Mình chỉ add thêm độ trễ mỗi letter khi random ra thôi.

@keyframes ziczac {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
    }
}
.letter.appear {
    opacity: 1;
    visibility: visible;
    animation: ziczac 0.4s linear;
}
.letter.go-down {
    transform: translateX(0) rotate(0);
}

Mình muốn cho sau 1s thì các letters sẽ thực hiện random và xuất hiện nên thêm method setTimeout thời gian bắt đầu sau 1s ^^:

setTimeout(function () {
    for (let i = 0; i < charArr.length; i++) {
      ...
    }
}, 1000);

Đây là code hoàn chỉnh của chúng ta:

const text = document.querySelector('.text');
const charArr = text.textContent.split('');

let dataText = '';
const arrClass = [];
const arrNumberRandom = [];

charArr.forEach((element, index) => {
    if (hasWhiteSpace(element)) {
        dataText += `<span class="letter letter-${index}">&nbsp;</span>`;
    } else {
        dataText += `<span class='letter letter-${index}'>${element}</span>`;
    }
});

text.innerHTML = dataText;

for (let i = 0; i < charArr.length; i++) {
    arrNumberRandom.push(i);
    arrClass.push(`letter-${i}`);
}
let delay = 0;
setTimeout(function () {
    const letters = document.querySelectorAll('.letter');
    for (let i = 0; i < charArr.length; i++) {
        let indexRandom = randomNumber(arrNumberRandom.length);

        const posOfletter = arrNumberRandom[indexRandom];
        const letter = letters[posOfletter];

        letter.style.transitionDelay = `${(delay += 0.01)}s`;
        letter.style.animationDelay = `${(delay += 0.1)}s`;
        letter.classList.add('appear', 'go-down');

        arrNumberRandom.splice(indexRandom, 1);
    }
}, 1000);

function randomNumber(length) {
    return Math.floor(Math.random() * length);
}
function hasWhiteSpace(str) {
    return str.indexOf(' ') >= 0;
}

cuối cùng ta được kết quả như sau:

Như vậy là mình đã hướng dẫn các bạn xong hiệu ứng text random rồi 😁. Hy vọng các bạn sẽ hiểu và thực hành nó thành công nhé.

Các bạn có thể đọc thêm nhiều bài viết thú vị của mình tại blog này nhé.

Ngày mới tốt lành 🔥🔥

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.