Hiệu ứng Parallax (Parallax Effects) và ứng dụng nó vào thiết kế giao diện (Phần 2)

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!