Sample code hiệu ứng fadeIn từng ký tự

HTML

CSS

JavaScript

const text1 = "PolyXGO welcomes you!";
    const text2 = "This is the typing effect with fadeIn!";
    const textContainer = document.getElementById('text-container');

function createFadeInEffect(text, container, callback) {
        container.innerHTML = '';  // Clear the container
        text.split('').forEach((char, index) => {
            const span = document.createElement('span');
            span.classList.add('fade-in-char');
            span.textContent = char;
            container.appendChild(span);

// Set a timeout to gradually show each character
            setTimeout(() => {
                span.classList.add('visible');
                // Call the callback after the last character fades in
                if (index === text.length - 1 && callback) {
                    setTimeout(callback, 500); // Delay before starting next text
                }
            }, index * 100);  // Delay increases for each character
        });
    }
        // Apply the fade-in effect when the page loads
/*window.onload = () => {
            createFadeInEffect(text1, textContainer, () => {
            createFadeInEffect(text2, textContainer);
        });
        };*/
       setTimeout(() => {
         // Apply the fade-in effect for both texts, one after the other
          createFadeInEffect(text1, textContainer, () => {
            createFadeInEffect(text2, textContainer);
        });
      }, 100);

Preview: Sample code hiệu ứng fadeIn từng ký tự

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Sample code hiệu ứng fadeIn từng ký tự

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Sample code hiệu ứng fadeIn từng ký tự

Đăng nhập