Thiết kế logo
Parallax Effects với sự sinh động, hấp dẫn khiến giao diện ứng dụng nó trở nên sáng tạo hơn, cải thiện tỷ lệ thoát trang cũng như cho người truy cập quyền chủ động tiếp xúc với nội dung web. Tuy nhiên, bạn đã biết cách thêm hiệu ứng này vào thiết kế giao diện của mình? Nếu chưa, hướng dẫn dưới đây sẽ giúp bạn!
Xem thêm:
- Xây dựng thương hiệu thông qua thiết kế giao diện, bạn đã thử?
- 6 Cách kết nối khách hàng truy cập website
Cách thêm Parallax Effects vào thiết kế giao diện
Thủ công
Hiệu ứng Parallax có thể được thêm vào thiết kế giao diện theo kiểu thủ công. Tuy nhiên, cách này đòi hỏi bạn phải có kiến thức sâu rộng về mã hóa HTML và CSS. Thêm nữa, phương pháp thủ công không chỉ gây khó khăn cho những người không chuyên mà nó cũng hạn chế các tùy chọn hiệu ứng Parallax có thể lựa chọn.
Để thêm Parallax Effects vào web thủ công, bạn cần:
- Tải về hình ảnh muốn sử dụng với hiệu ứng Parallax lên WordPress.
- Sao chép URL hình ảnh đó.
- Thêm đoạn mã sau vào source code:
.parallax {
background-image: url (“URL hình ảnh.jpg”);
Chiều cao: (xxx)px;
background-attachment: cố định;
background-position: trung tâm;
background-repeat: không lặp lại;
background-size: bìa;
}
<div class = “parallax”> </div>
Để có được giao diện đẹp nhất với 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ã hoá. Chính vì thế, nó không được đánh giá cao so với những cách khác.
Xem thêm: Những xu hướng thiết kế landing page nổi bật nhất năm 2021
Thêm với Plugins
Nếu phương pháp thủ công quá khó khăn thì bạn có thể cân nhắc sử dụng các plugins để thêm Parallax Effects vào thiết kế giao diện. Đây là giải pháp được nhiều người lựa chọn vì chúng khá dễ thực hiện. Có nhiều plugins hỗ trợ việc này như Essential Addons for Elementor, ScrollMagic, Plugin Kreatura Slide for WordPress, Advanced WordPress Background, Parallax Image,… Đặc điểm chung của chúng là cần một số chỉnh sửa nhỏ về mã hóa.
Ví dụ: với plugin Parallax Image, sau khi cài đặt từ kho Plugin của WordPress và kích hoạt, bạn cần thêm các mã ngắn vào trang để tạo ra hiệu ứng Parallax bằng Plugin này. Parallax Image có những hướng dẫn rất chi tiết và cụ thể – khá dễ dàng thao tác theo.
Xem thêm: 2021: 5 Xu hướng digital marketing cho giao diện công ty
Thêm với các Elementor
Elementor là một plugin hỗ trợ thêm hiệu ứng Parallax vào thiết kế giao diện dễ dàng và trực quan. Có 2 cách để bạn thêm hiệu ứng Parallax với Elementor là: thêm hiệu ứng Parallax cho một phần tử web hoặc thêm hiệu ứng Parallax cho nền.
Parallax Effect cho một phần tử web
Bước 1: Chọn một phần tử để bắt đầu thêm hiệu ứng Parallax
Phần tử này không nhất định phải là hình ảnh website mà có thể là văn bản, video,… Sau khi chọn được phần tử muốn thêm hiệu ứng Parallax, hãy đến mục Widget (Tiện ích), click vào Advanced Tab (Tab nâng cao).
Bước 2: Chuyển sang hiệu ứng cuộn
Tại Advanced Tab, hãy nhấp vào menu của mục Motion Effects (Hiệu ứng chuyển động) và bật hiệu ứng Scrolling Effects. Tại đây có 6 lựa chọn cho bạn, đó là:
- Cuộc dọc (Vertical Scroll)
- Cuộn ngang (Horizontal Scroll)
- Hiệu ứng minh bạch (Transparency)
- Hiệu ứng làm mờ (Blur)
- Hiệu ứng xoay (Rotate)
- Hiệu ứng tỷ lệ (Scale)
Bước 3: Điều chỉnh hoạt cảnh
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 ý. Hãy nhấn vào biểu tượng bút chì và một bảng điều khiển hiện ra cho bạn thực hiện các đ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 – kết thúc (viewport).
Bước 4: Áp dụng nhiều hoạt ảnh cho một yếu tố
Tại Elementor, mỗi yếu tố cho phép áp dụng không giới hạn các hiệu ứng, nhưng đừng lạm dụng nó và làm website trở nên khó hiểu, rối mắt.
Hãy 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 ưng ý. Bạn cũng cần lưu ý đến các điểm neo khi sử dụng hiệu ứng xoay và tỉ lệ để xác định trục mà hoạt ảnh sẽ quay xung quanh hoặc tỷ lệ mà phần tử sẽ chia.
Bước 5: Thêm hiệu ứng Theo dõi chuột và 3D Tilt
Hãy lưu ý các hiệu ứng này chỉ hoạt động trên máy tính chứ không hoạt động trên thiết bị di động. Chúng tạo cảm giác sâu hơn cho hình ảnh website và nâng cao trải nghiệm người dùng.
Theo dõi chuột cho phép phần tử chuyển động theo sự di chuột của khách truy cập. Hiệu ứng 3D Tilt thì làm phần tử nghiêng 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
Phiên bản Elementor 2.5 cho phép bạn chọn loại thiết bị muốn áp dụng hiệu ứng. Đừng lo hiệu ứng hoạt động tốt trên máy tính nhưng không tốt trên điện thoại 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
Parallax Effects cho nền
Bước 1: Truy cập trang web Elementor
Để thêm hiệu ứng Parallax cho nền website, bạn hãy nhấp vào một trong các phần tử của trang web và bắt đầu với tab Style.
Bước 2: Sử dụng hiệu ứng
Áp dụng Parallax Effects cho thiết kế giao diện nền cũng có 2 hiệu ứng cho bạn lựa chọn và hiệu ứng cuộn và hiệu ứng chuột tương tự trên.
Bước 3: Lặp lại từ bước 3 đến bước 6 giống phần trên
Xem thêm: Nâng cấp website để tăng lợi nhuận – Tại sao không?
Thêm Parallax Effects vào thiết kế giao diện không hề khó, dù là dân không chuyên 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. Hãy liên hệ với CHILI để nếu bạn muốn hợp tác với một đối tác tin cậy, giàu kinh nghiệm!
