Motion Effects là gì? #
Motion Effects giúp tạo hiệu ứng chuyển động khi người dùng cuộn trang, di chuột hoặc khi phần tử xuất hiện trong viewport. Đây là công cụ quan trọng để làm giao diện sinh động nhưng vẫn tối ưu UX nếu dùng đúng cách.
Các loại Motion Effects #
Trong tab Advanced → Motion Effects, Elementor hỗ trợ nhiều kiểu hiệu ứng.
1. Scrolling Effects (Hiệu ứng khi cuộn) #
- Vertical Scroll – dịch chuyển lên hoặc xuống theo chiều cuộn
- Horizontal Scroll – chạy sang trái/phải
- Transparency – mờ dần hoặc hiện dần
- Blur – nhòe mờ và sắc lại khi cuộn
- Rotate – xoay phần tử khi cuộn
- Scale – phóng to hoặc thu nhỏ
Có thể giới hạn hiệu ứng bằng:
- Viewport (%) – bắt đầu/kết thúc ở vị trí nào trên màn hình
- Direction – hướng di chuyển
- Speed – tốc độ hiệu ứng
2. Mouse Effects (Hiệu ứng theo chuột) #
- Mouse Track – phần tử di chuyển theo con trỏ
- 3D Tilt – nghiêng 3D theo vị trí con trỏ
Thường dùng để tạo card sản phẩm, hero banner tương tác.
3. Entrance Animation (Hiệu ứng khi xuất hiện) #
Khi phần tử cuộn vào màn hình, bạn có thể chọn animation như:
- Fade In
- Zoom In
- Slide In (từ trái/phải/trên/dưới)
- Bounce → hạn chế dùng để tránh “rẻ tiền”
- Rotate In
Bạn có thể điều chỉnh thêm:
- Duration – thời gian animation
- Delay – độ trễ trước khi bắt đầu
- Once – chỉ chạy 1 lần hoặc mỗi lần scroll
4. Sticky Effects #
Sticky giúp phần tử “dính” vào màn hình khi cuộn.
- Sticky: Top / Bottom
- Sticky On: Desktop / Tablet / Mobile
- Offset – khoảng cách trước khi sticky
- Effects Offset – bắt đầu hiệu ứng khi sticky
Sticky thường dùng cho:
- Menu phụ trong bài hướng dẫn
- Nút “Đăng ký / Mua ngay”
- Card thông tin sản phẩm
5. Transform #
Trong tab Advanced → Transform, bạn có thể tạo hiệu ứng chỉnh sửa hình dạng:
- Scale – phóng to/thu nhỏ
- Rotate – xoay theo trục Z
- Translate – đẩy vị trí theo trục X/Y
- Skew – nghiêng phần tử
Transform hỗ trợ cả trạng thái Normal và Hover.
Lưu ý khi sử dụng Motion Effects #
- Không lạm dụng quá nhiều hiệu ứng → gây lag và rối mắt
- Ưu tiên hiệu ứng nhẹ: Fade In, Slide In, Transparency
- Kiểm tra trên Mobile — nhiều hiệu ứng không hoạt động hoặc gây giật
- Nên disable Scrolling Effects trên Mobile/Tablet để tối ưu
- Kết hợp với Sticky và Entrance Animation để trải nghiệm mượt nhất
Ứng dụng thực tế #
- Banner Hero – dùng transparency + scale để tạo chiều sâu
- Card dịch vụ – zoom nhẹ khi hover
- Section giới thiệu – fade in khi cuộn đến
- Menu nhỏ – sticky khi cuộn xuống 150px
- Background – dùng parallax nhẹ cho chiều sâu (Vertical Scroll)
Ví dụ setup nhanh #
Mục tiêu: tạo hiệu ứng parallax cho hình nền
- Chọn Section
- Advanced → Motion Effects
- Scrolling Effects → Vertical Scroll
- Direction: Up
- Speed: 2 → 4 tùy độ mạnh
- Disable on: Mobile
Kết quả: hình nền di chuyển nhẹ khi cuộn, tạo cảm giác chuyên nghiệp.
