Code thêm hiệu ứng gõ chữ cho tiêu đề trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách thêm hiệu ứng gõ chữ cho tiêu đề trong Elementor nhé.

Một tiêu đề hiện ra từng chữ một, kèm con trỏ nhấp nháy, nhìn trang sống động hơn hẳn một dòng chữ tĩnh. Widget Heading của Elementor mặc định chỉ hiện nguyên câu tiêu đề, không có hiệu ứng gõ chữ, muốn có thì bạn phải code thêm nhé.

Thêm code hiệu ứng gõ chữ

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
function nn_go_chu_tieu_de_shortcode($atts) {
    $atts = shortcode_atts(array(
        'cau' => 'Chào mừng bạn đến với blog của mình',
    ), $atts, 'go_chu_tieu_de');
    $caus = array_filter(array_map('trim', explode('|', $atts['cau'])));
    if (empty($caus)) {
        return '';
    }
    $json = wp_json_encode(array_values($caus));
    $html = '<span class="nn-go-chu" data-cau="' . esc_attr($json) . '"></span>';
    $html .= '<span class="nn-go-chu-con-tro" aria-hidden="true">|</span>';
    $html .= '<script>
    document.addEventListener("DOMContentLoaded", function () {
        var khoi = document.querySelector(".nn-go-chu");
        if (!khoi) { return; }
        var danhSach = JSON.parse(khoi.getAttribute("data-cau"));
        var viTriCau = 0;
        var viTriChu = 0;
        var dangXoa = false;
        function goChu() {
            var cauHienTai = danhSach[viTriCau];
            if (dangXoa) {
                viTriChu = viTriChu - 1;
                khoi.textContent = cauHienTai.substring(0, viTriChu);
                if (viTriChu <= 0) {
                    dangXoa = false;
                    viTriCau = (viTriCau + 1) % danhSach.length;
                    setTimeout(goChu, 400);
                    return;
                }
                setTimeout(goChu, 40);
            } else {
                viTriChu = viTriChu + 1;
                khoi.textContent = cauHienTai.substring(0, viTriChu);
                if (viTriChu >= cauHienTai.length) {
                    dangXoa = true;
                    setTimeout(goChu, 1500);
                    return;
                }
                setTimeout(goChu, 90);
            }
        }
        goChu();
    });
    </script>';
    return $html;
}
add_shortcode('go_chu_tieu_de', 'nn_go_chu_tieu_de_shortcode');

Code trên tạo shortcode [go_chu_tieu_de]: nó nhận các câu qua thuộc tính cau, ngăn cách nhau bằng dấu |, rồi đưa danh sách câu xuống trình duyệt dưới dạng JSON bằng wp_json_encode(). Đoạn JS sẽ gõ từng chữ với tốc độ 90 mili-giây một chữ, dừng 1,5 giây khi gõ xong một câu, xóa ngược lại rồi gõ câu tiếp theo, cứ thế lặp lại. Con trỏ | đứng sau chữ đang gõ, nhấp nháy nhờ đoạn CSS ở dưới.

Đưa tiêu đề gõ chữ ra giao diện trong Elementor

Bạn mở trang trong Elementor, kéo widget Shortcode vào vị trí muốn đặt tiêu đề rồi nhập, ví dụ: [go_chu_tieu_de cau=”Chào mừng bạn đến với blog của mình|Mình chia sẻ kinh nghiệm làm web tại đây”] là xong. Nếu chỉ có một câu thì bạn không cần dấu |, cứ nhập một câu là nó gõ xong rồi gõ lại từ đầu. Muốn con trỏ nhấp nháy đúng kiểu thì thêm đoạn CSS dưới vào Tùy biến → CSS bổ sung nhé.

.nn-go-chu-con-tro { display: inline-block; margin-left: 2px; color: #2271b1; animation: nn-nhap-nhay 1s step-end infinite; }
@keyframes nn-nhap-nhay { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

Lưu ý khi dùng

Đoạn JS trong code chỉ chạy cho khối gõ chữ đầu tiên tìm thấy trên trang, nên mỗi trang bạn chỉ nên đặt một tiêu đề gõ chữ thôi. Đặt hai shortcode trên cùng một trang thì khối thứ hai sẽ đứng yên, không gõ. Ngoài ra, hiệu ứng này chỉ là trang trí cho tiêu đề, bạn đừng dùng nó cho đoạn văn bản dài vì người đọc sẽ khó chịu khi phải chờ chữ hiện ra.

Kết luận

Vậy là chỉ với 1 shortcode bạn đã thêm được hiệu ứng gõ chữ cho tiêu đề trong Elementor rồi nhé. Tính năng này đi chung với bài code thêm nút sao chép link bài viết trong Elementor là thành combo giữ chân người đọc khá tốt cho blog.

Nếu cần mình kèm 1-1 về Elementor thì cứ liên hệ mình nhé.