Parallax Effects với sự sinh động, hấp dẫn giúp giao diện ứng dụng của nó trở nên sáng tạo hơn, cải thiện tỷ lệ thoát cũng như trao cho người truy cập quyền tương tác chủ động với nội dung trang web. Tuy nhiên, bạn đã biết cách thêm hiệu ứng này chưa thiết kế chủ đề của tôi? Nếu chưa, hướng dẫn dưới đây sẽ giúp bạn!
Xem thêm:
Parallax Effects giúp giao diện website hấp dẫn và thú vị hơn
Cách thêm Parallax Effects vào thiết kế giao diện
thủ công
Hiệu ứng thị sai có thể được thêm vào thiết kế chủ đề một cách thủ công. Tuy nhiên, phương pháp này yêu cầu bạn phải có kiến thức sâu rộng về mã hóa HTML và CSS. Ngoài ra, phương pháp thủ công không chỉ gây khó khăn cho những người nghiệp dư mà còn hạn chế các tùy chọn Hiệu ứng thị sai có thể chọn.
Để thêm Hiệu ứng thị sai vào web theo cách thủ công, bạn cần:
- Tải xuống hình ảnh bạn muốn sử dụng với hiệu ứng Parallax trên WordPress.
- Sao chép URL hình ảnh đó.
- Thêm đoạn mã sau vào mã nguồn:
.parallax {
hình nền: url (“URL image.jpg”);
Chiều cao: (xxx)px;
tệp đính kèm nền: đã sửa;
vị trí nền: trung tâm;
lặp lại nền: không lặp lại;
kích thước nền: bìa;
}
để có được giao diện đẹp Để có hiệu ứng Parallax với phương pháp này, bạn phải có kiến thức rất sâu về mã hóa. Vì vậy, nó không được đánh giá cao so với những cách khác.
Xem thêm: Xu hướng thiết kế landing page nổi bật nhất năm 2021
Phương pháp truyền thống đòi hỏi bạn phải có kiến thức sâu về lập trình
Thêm bằng Plugin
Nếu phương pháp thủ công quá khó thì bạn có thể cân nhắc sử dụng plugin để thêm Hiệu ứng thị sai cho nó thiết kế chủ đề. Đây là giải pháp được nhiều người lựa chọn bởi chúng khá dễ thực hiện. Có rất nhiều plugin hỗ trợ việc này như Essential Addons for Elementor, ScrollMagic, Plugin Kreatura Slide for WordPress, Advanced WordPress Background, Parallax Image, v.v. Đặc điểm chung của chúng là cần một số chỉnh sửa mã hóa nhỏ.
Chẳng hạn với plugin Parallax Image, sau khi cài đặt từ kho Plugin WordPress và kích hoạt, bạn cần thêm mã ngắn vào trang để tạo hiệu ứng Parallax bằng Plugin này. Parallax Image có hướng dẫn rất chi tiết và cụ thể – khá dễ làm theo.
Xem thêm: 2021: 5 Xu hướng tiếp thị kỹ thuật số cho giao diện doanh nghiệp
Các plugin giúp tích hợp các kiểu hiệu ứng Parallax vào web dễ dàng hơn
Thêm với Elementor
Elementor là plugin hỗ trợ thêm hiệu ứng Parallax cho thiết kế chủ đề dễ dàng và trực quan. Có 2 cách để bạn thêm hiệu ứng Parallax với Elementor: thêm hiệu ứng Parallax vào phần tử web hoặc thêm hiệu ứng Parallax vào nền.
Hiệu ứng thị sai cho phần tử web
Bước 1: Chọn một phần tử để bắt đầu thêm hiệu ứng Parallax
Yếu tố này không nhất thiết phải là hình ảnh trang web đó có thể là văn bản, video,… Sau khi chọn thành phần muốn thêm hiệu ứng Parallax, bạn vào phần Widget, nhấn vào Tab Advanced.
Bước 2: Chuyển sang hiệu ứng cuộn
Tại Tab Advanced, nhấn chọn menu Motion Effects và bật hiệu ứng Scrolling Effects. Tại đây có 6 lựa chọn cho bạn, đó là:
- Cuộn dọc
- Cuộn ngang
- hiệu ứng trong suốt
- Hiệu ứng làm mờ (Blur)
- Xoay hiệu ứng
- Hiệu ứng tỷ lệ (Scale)
Bước 3: Điều chỉnh hình ảnh động
Thêm hiệu ứng Parallax với Elementor, bạn có thể tinh chỉnh từng hiệu ứng cho đến khi ưng ý. Nhấn vào biểu tượng bút chì và một bảng điều khiển sẽ xuất hiện để bạn điều chỉnh.
Với mỗi hiệu ứng, bạn có thể điều chỉnh hướng (direction), tốc độ (speed) và thời điểm hoạt ảnh bắt đầu và kết thúc (viewport).
Bước 4: Áp dụng nhiều hoạt ảnh cho một phần tử
Tại Elementor, mỗi phần tử cho phép áp dụng hiệu ứng không giới hạn, nhưng đừng quá lạm dụng sẽ khiến website rối rắm, khó hiểu.
Sử dụng nút hoàn tác bên cạnh biểu tượng bút chì và thử nghiệm các hoạt ảnh cho đến khi bạn thích. Bạn cũng cần lưu ý các điểm neo khi sử dụng hiệu ứng xoay và chia tỷ lệ để xác định trục mà hoạt ảnh sẽ xoay quanh hoặc tỷ lệ phần tử sẽ phân chia.
Bước 5: Thêm Mouse Tracking và 3D Tilt. các hiệu ứng
Xin lưu ý rằng những hiệu ứng này chỉ hoạt động trên máy tính, không hoạt động trên thiết bị di động. Chúng tạo cảm giác sâu sắc hơn cho hình ảnh trang web và cải thiện trải nghiệm người dùng.
Theo dõi chuột cho phép phần tử di chuyển theo di chuột của khách truy cập. Hiệu ứng Nghiêng 3D làm nghiêng phần tử theo chuyển động của con trỏ.
Bước 6: Áp dụng hiệu ứng trên các thiết bị khác nhau
Elementor phiên bản 2.5 cho phép bạn chọn loại thiết bị mà bạn muốn áp dụng hiệu ứng. Đừng lo lắng, hiệu ứng hoạt động tốt trên máy tính để bàn nhưng không hoạt động trên thiết bị di động và ngược lại!
Xem thêm: Website doanh nghiệp – Vũ khí truyền thông hiệu quả trong thời đại 4.0
Thêm hiệu ứng thị sai vào trang web của bạn với Elementor
Hiệu ứng thị sai cho nền
Bước 1: Truy cập trang web Elementor
Để thêm hiệu ứng Thị sai vào nền trang web, hãy nhấp vào một trong các thành phần của trang web và bắt đầu với tab Kiểu.
Bước 2: Sử dụng hiệu ứng
Áp dụng hiệu ứng thị sai cho thiết kế chủ đề Hình nền cũng có 2 hiệu ứng cho bạn lựa chọn và tương tự như hiệu ứng cuộn và chuột trên.
Bước 3: Lặp lại từ bước 3 đến bước 6 như trên
Xem thêm: Nâng cấp website để tăng lợi nhuận – Tại sao không?
Áp dụng Hiệu ứng thị sai cho nền không khác gì đối với phần tử trang web
Thêm hiệu ứng thị sai thiết kế chủ đề Không hề khó, dù là dân nghiệp dư bạn vẫn có thể làm được. Nhưng để có được giao diện hoàn hảo, bạn nên tìm đến những đơn vị thiết kế chuyên nghiệp và uy tín. Vui lòng liên hệ ỚT vì vậy nếu bạn muốn hợp tác với một đối tác đáng tin cậy, có kinh nghiệm!
