Hiệu ứng cuộn & chuyển động
Một núm vặn cho cả website: chọn mức chuyển động toàn site trong tab Hiệu ứng, rồi tinh chỉnh riêng từng section nếu cần. Máy của khách yếu hay bật "giảm chuyển động"? Website tự nhường.
4 mức toàn site
Mở Thiết kế → tab Hiệu ứng. Mức bạn chọn quyết định nhóm hiệu ứng nào chạy khi khách cuộn trang:
| Mức | Điều gì xảy ra |
|---|---|
| Tắt | Không có hiệu ứng — trang hoàn toàn tĩnh. |
| Nhẹ nhàng | Section mờ dần hiện ra khi cuộn tới — tinh tế, hợp phong cách sang trọng. |
| Cân bằng | Thêm parallax nền hero và số liệu đếm tăng. Mặc định của mọi website. |
| Ấn tượng | Thêm parallax cho các dải ảnh nền và hiệu ứng trôi nhẹ của trang trí/cột ảnh — trẻ trung, nổi bật. |
Mỗi mức bao gồm các mức dưới nó: "Ấn tượng" có tất cả những gì "Cân bằng" có, cộng thêm chuyển động mạnh hơn.
Ghi đè theo từng section
Mở Cài đặt section → tab Nền, có 3 quyền điều khiển riêng:
Hiệu ứng xuất hiện
Cách section này xuất hiện khi khách cuộn tới — chọn 1 trong: Mặc định (theo mức toàn site), Tắt, Mờ dần, Trượt lên, Hiện khi cuộn, Chiều sâu. Hero không có mục này — phần mở đầu trang luôn hiện ngay, không bắt khách chờ.
Parallax nền
Ảnh nền của section trôi chậm hơn nội dung khi cuộn, tạo cảm giác chiều sâu. Có cho các dải ảnh nền và hero.
Số liệu đếm tăng
Các con số trong section thống kê đếm từ 0 lên giá trị thật khi khách cuộn tới ("500+ khách hàng" chạy số). Bật sẵn ở mức Cân bằng trở lên — tắt riêng được cho từng section.
Website tự "nhường" khi cần
- Tôn trọng "giảm chuyển động" — khách bật
prefers-reduced-motiontrên thiết bị thì mọi hiệu ứng tự tắt, bất kể bạn chọn mức nào. - Điện thoại được giảm tải — biên độ parallax giảm một nửa, hiệu ứng trôi tắt hẳn trên màn hình nhỏ để cuộn luôn mượt.
- Editor luôn tĩnh — hiệu ứng chỉ chạy trên trang thật đã xuất bản; trong trình chỉnh sửa mọi thứ đứng yên để bạn thao tác chính xác.
- Không xô lệch bố cục — chuyển động chỉ dùng transform trên lớp riêng, nội dung không nhảy, điểm SEO tốc độ không bị ảnh hưởng.