Hiệu ứng Parallax với sự sinh động, hấp dẫn làm cho giao diện ứng dụng của nó sáng tạo hơn, cải thiện tỷ lệ thoát cũng như mang lại cho người truy cập quyền chủ động tương tác với nội dung trang web. Tuy nhiên, bạn đã biết cách thêm hiệu ứng này 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:
Hiệu ứng Parallax làm cho giao diện trang web trở nên hấp dẫn và thú vị hơn
Cách thêm Hiệu ứng thị sai 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ủ đề theo cách thủ công. Tuy nhiên, phương pháp 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. 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 của hiệu ứng Parallax có thể được lựa 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 thị sai trên WordPress.
- Sao chép URL hình ảnh đó.
- Thêm mã sau vào mã nguồn:
.parallax {
background-image: url (“URL image.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;
}
Để có được giao diện đẹp Đối với hiệu ứng thị sai 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ế trang đích 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 các plugin
Nếu phương pháp thủ công quá khó thì bạn có thể cân nhắc sử dụng các plugin để thêm Hiệu ứng thị sai vào đó 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ợ điều này như Essential Addons cho Elementor, ScrollMagic, Plugin Kreatura Slide cho 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 WordPress và kích hoạt, bạn cần thêm shortcode 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 công ty
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
Phim khác có sự tham gia của Elementor
Elementor là một plugin hỗ trợ thêm các hiệu ứng Parallax vào 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 một phần tử web
Bước 1: Chọn một phần tử để bắt đầu thêm hiệu ứng Thị sai
Phần tử này không nhất thiết phải hình ảnh trang web đó có thể là văn bản, video,… Sau khi chọn phần tử muốn thêm Hiệu ứng thị sai, bạn vào phần Widget, bấm vào Tab nâng cao.
Bước 2: Chuyển sang hiệu ứng cuộn
Tại Tab Nâng cao, nhấp vào menu Hiệu ứng Chuyển động và bật hiệu ứng Hiệu ứng cuộn. Ở đây có 6 lựa chọn cho bạn, đó là:
- Cuộn dọc
- Cuộn ngang
- Hiệu ứng minh bạch
- Hiệu ứng làm mờ (Blur)
- Hiệu ứng xoay
- Hiệu ứng quy mô (Quy mô)
Bước 3: Điều chỉnh hoạt ả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 ý. Nhấn vào biểu tượng bút chì và một bảng sẽ xuất hiện để bạn điều chỉnh.
Đối với mỗi hiệu ứng, bạn có thể điều chỉnh hướng (hướng), tốc độ (speed) và thời điểm hoạt ảnh bắt đầu và kết thúc (khung nhìn).
Bước 4: Áp dụng nhiều hoạt ảnh cho một phần tử
Ở Elementor, mỗi phần tử đều cho phép áp dụng không giới hạn hiệu ứng, nhưng đừng lạm dụng quá sẽ khiến trang web trở nên rối rắm và 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 với các hoạt ảnh cho đến khi bạn thích. Bạn cũng cần ghi nhớ 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 xung quanh hoặc tỷ lệ phần tử sẽ tách ra.
Bước 5: Thêm Theo dõi chuột và Nghiêng 3D. 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 phải thiết bị di động. Chúng tạo ra 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 3D Tilt làm nghiêng phần tử theo chuyển động của con trỏ.
Bước 6: Áp dụng các 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ị 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 của bạn, 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à các hiệu ứng cuộn, chuột tương 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 trang web của bạn để 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ù bạn là dân nghiệp dư 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, uy tín. Xin vui lòng liên hệ CHILI 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!
