Code thêm hiệu ứng parallax cho ảnh nền section trong Elementor

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

Section hero có ảnh nền đẹp mà đứng yên một chỗ khi khách cuộn trang thì nhìn hơi “chết”, trong khi ảnh nền trôi chậm hơn nội dung sẽ tạo cảm giác chiều sâu rất rõ cho trang. Elementor bản miễn phí không có sẵn tùy chọn parallax cho ảnh nền section (muốn có thì phải nâng cấp lên Elementor Pro để dùng Motion Effects), nên muốn có hiệu ứng này mà không tốn phí thì bạn phải code thêm bằng JavaScript nhé.

Thêm code hiệu ứng parallax cho ảnh nền section

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
// Hiệu ứng parallax nhẹ cho ảnh nền section trong Elementor (bản miễn phí)
// Cách dùng: mở section trong Elementor, tab Nâng cao (Advanced) -> Lớp CSS (CSS Classes) rồi gõ: nn-parallax
// Khi khách cuộn trang, ảnh nền section trôi chậm hơn nội dung, tạo cảm giác chiều sâu
add_action('wp_head', 'nn_parallax_css');
function nn_parallax_css() {
    echo '<style>.nn-parallax { background-attachment: scroll; will-change: background-position; }</style>';
}

add_action('wp_footer', 'nn_parallax_js');
function nn_parallax_js() {
    echo '<script>(function () { var sections = document.querySelectorAll(".nn-parallax"); if (!sections.length) { return; } var ticking = false; function capNhat() { if (window.innerWidth < 768) { for (var k = 0; k < sections.length; k++) { sections[k].style.backgroundPosition = "center center"; } ticking = false; return; } var giuaManHinh = window.innerHeight / 2; for (var i = 0; i < sections.length; i++) { var sec = sections[i]; var rect = sec.getBoundingClientRect(); if (rect.bottom < 0 || rect.top > window.innerHeight) { continue; } var lech = (rect.top + rect.height / 2 - giuaManHinh) * 0.3; sec.style.backgroundPosition = "center " + (-lech) + "px"; } ticking = false; } function khiCuon() { if (!ticking) { window.requestAnimationFrame(capNhat); ticking = true; } } window.addEventListener("scroll", khiCuon, { passive: true }); window.addEventListener("resize", khiCuon); capNhat(); })();</script>';
}

Code trên có hai phần. Phần đầu móc vào wp_head để chèn CSS cho section parallax: giữ background-attachment: scroll để JavaScript điều khiển được vị trí ảnh nền, và thêm will-change: background-position để trình duyệt vẽ mượt hơn khi cuộn. Phần sau móc vào wp_footer để chèn JavaScript: mỗi khi khách cuộn trang, code đo vị trí của từng section có class nn-parallax so với giữa màn hình rồi dịch vị trí ảnh nền theo hệ số 0.3, tức ảnh trôi chậm bằng 30% tốc độ cuộn, nhờ đó tạo cảm giác chiều sâu. Code dùng requestAnimationFrame để chỉ tính toán một lần mỗi khung hình nên cuộn không bị giật, và tự tắt hiệu ứng trên màn hình dưới 768px vì trên điện thoại hiệu ứng này khó thấy mà còn tốn pin.

Gắn class parallax cho section trong Elementor

Bạn mở trang đang dựng bằng Elementor, bấm vào section muốn làm parallax, sang tab Nâng cao (Advanced) rồi gõ nn-parallax vào ô Lớp CSS (CSS Classes). Nhớ đặt ảnh nền cho section đó ở tab Kiểu (Style) và cho section chiều cao tối thiểu khoảng 500px thì hiệu ứng mới thấy rõ. Lưu lại rồi tải lại trang và cuộn chậm qua section, bạn sẽ thấy ảnh nền trôi chậm hơn chữ và nút bấm bên trên, còn các section không gắn class thì vẫn cuộn bình thường.

Lưu ý khi dùng

Con số 0.3 trong code là độ trôi của ảnh nền, bạn đổi thành 0.15 nếu muốn trôi nhẹ hơn hoặc 0.5 nếu muốn trôi rõ hơn. Hiệu ứng chỉ thấy rõ khi section đủ cao và ảnh nền đủ lớn, section thấp dưới 300px thì gần như không cảm nhận được. Đừng bật thêm background-attachment: fixed cho section này vì nó xung đột với cách JavaScript dịch vị trí ảnh nền. Tính năng này đi chung với bài code thêm hiệu ứng hiện dần khi cuộn cho widget trong Elementor là thành combo hiệu ứng cuộn khá đủ cho một trang đích.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm hiệu ứng parallax cho ảnh nền section trong Elementor mà không cần nâng cấp lên bản Pro 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 hiệu ứng hiện dần khi cuộn cho widget trong Elementor là thành bộ hiệu ứng cho trang đích nhìn chuyên nghiệp hơn hẳn.

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