Code thêm hiệu ứng hiện dần khi cuộn cho widget trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách thêm hiệu ứng hiện dần khi cuộn cho widget trong Elementor nhé.

Một trang dài mà nội dung cứ hiện hết ngay từ lúc tải trang thì nhìn rất phẳng, người đọc cuộn tới đâu nội dung hiện dần tới đó thì trang sống động hơn nhiều. Elementor bản miễn phí không có hiệu ứng hiện dần khi cuộn cho widget, muốn có thì bạn phải code thêm nhé.

Thêm code hiệu ứng hiện dần khi cuộn

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
add_action('wp_enqueue_scripts', 'nn_elementor_hien_dan_khi_cuon');
function nn_elementor_hien_dan_khi_cuon() {
    wp_register_style('nn-hien-dan', false);
    wp_enqueue_style('nn-hien-dan');
    wp_add_inline_style('nn-hien-dan', '.nn-hien-dan { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .nn-hien-dan.nn-da-hien { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .nn-hien-dan { opacity: 1; transform: none; transition: none; } }');
    wp_register_script('nn-hien-dan', false, array(), false, true);
    wp_enqueue_script('nn-hien-dan');
    wp_add_inline_script('nn-hien-dan', 'document.addEventListener("DOMContentLoaded", function () { var khoi = document.querySelectorAll(".nn-hien-dan"); if (!("IntersectionObserver" in window) || khoi.length === 0) { khoi.forEach(function (el) { el.classList.add("nn-da-hien"); }); return; } var quanSat = new IntersectionObserver(function (muc) { muc.forEach(function (m) { if (m.isIntersecting) { m.target.classList.add("nn-da-hien"); quanSat.unobserve(m.target); } }); }, { threshold: 0.15 }); khoi.forEach(function (el) { quanSat.observe(el); }); });');
}

Code trên dùng hook wp_enqueue_scripts để nạp một đoạn CSS và một đoạn JS vào trang. Đoạn CSS cho mọi khối có class nn-hien-dan trạng thái ban đầu là mờ hẳn và trượt xuống 24px, khi có thêm class nn-da-hien thì hiện rõ lại trong 0,7 giây. Đoạn JS dùng IntersectionObserver để canh: khi khối nào lọt vào khung nhìn khoảng 15% thì gắn class nn-da-hien cho khối đó rồi thôi không canh nữa, nên hiệu ứng chỉ chạy đúng một lần. Nếu trình duyệt cũ không có IntersectionObserver thì code tự hiện hết nội dung luôn, trang không bị trống. Ngoài ra code còn tôn trọng chế độ giảm chuyển động của hệ điều hành qua prefers-reduced-motion, ai bật chế độ này thì nội dung hiện ngay không chờ hiệu ứng.

Gắn class cho widget trong Elementor

Bạn mở trang trong Elementor, bấm vào widget muốn có hiệu ứng, sang tab Nâng cao (Advanced) rồi nhập nn-hien-dan vào ô Lớp CSS (CSS Classes) là xong. Muốn cả một section hay một cột cùng hiện dần thì bạn gắn class đó cho section hoặc cột thay vì từng widget. Widget nào không gắn class thì vẫn hiện bình thường như cũ, không ảnh hưởng gì.

Lưu ý khi dùng

Bạn chỉ nên gắn hiệu ứng cho vài khối quan trọng như tiêu đề section, thẻ dịch vụ hay lời chứng thực thôi, đừng gắn cho cả trang vì người đọc sẽ phải chờ từng khối hiện ra rất khó chịu. Cũng đừng gắn cho khối hero ở đầu trang, vì đó là phần người đọc phải thấy ngay khi vừa vào. Nếu widget đã có sẵn hiệu ứng xuất hiện của Elementor Pro thì bạn đừng gắn thêm class này nữa, hai hiệu ứng chồng lên nhau sẽ làm khối nhấp nháy lạ.

Kết luận

Vậy là chỉ với 1 class CSS bạn đã thêm được hiệu ứng hiện dần khi cuộn cho widget trong Elementor rồi nhé. Tính năng này đi chung với bài code thêm hiệu ứng gõ chữ cho tiêu đề trong Elementor và bài code thêm nút sao chép link bài viết trong Elementor là thành combo làm trang sinh động hơn khá nhiều.

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