Bạn có thể gọi nó là phô trương, bạn có thể gọi nó là kẹo mắt, nhưng hiệu ứng thị sai trong thiết kế web là ở đây để ở. Đó là một yếu tố sẽ cung cấp cho trang web của bạn yếu tố “WOW”. Mặc dù hiệu ứng đã diễn ra trong một thời gian, và có rất nhiều trang web đã triển khai nó trên thiết kế của họ, nó vẫn rất tuyệt.

Nếu bạn đã sẵn sàng tham gia phong trào và thêm hiệu ứng vào trang web WordPress của mình, hãy chú ý theo dõi.

Parallax là gì?

Đối với những người không quen thuộc với thuật ngữ, từ điển định nghĩa từ "sai" là " hiệu ứng theo đó vị trí hoặc hướng của một đối tượng xuất hiện khác nhau khi được xem từ các vị trí khác nhau. ”

Trong thế giới thiết kế trang web thị sai là một kỹ thuật mà hình ảnh nền di chuyển ở một tốc độ khác nhau, thường chậm hơn so với hình ảnh tiền cảnh. Mục đích là tạo ra một ảo tưởng về chiều sâu (hiệu ứng 3D giả) trong môi trường 2D.

Ứng dụng của thị sai đã được khoảng từ những năm 1980 trong thế giới game, nhưng các nhà thiết kế web mới bắt đầu kết hợp hiệu quả rộng rãi trong năm 2011 bằng cách sử dụng HTML5 và CSS3.

Đường dẫn đầu tiên: Chủ đề WordPress

Nếu bạn là người dùng WordPress, cách dễ nhất để có hiệu ứng thị sai trên trang web của bạn là sử dụng chủ đề WordPress với hiệu ứng được tích hợp. Chuyển chủ đề và bạn đã hoàn thành.

Có rất nhiều chủ đề WP sẵn sàng thị sai trên mạng, cả miễn phí và trả phí. Tìm kiếm nhanh trên Google và trong kho lưu trữ chủ đề WordPress sẽ cung cấp cho bạn nhiều tùy chọn hơn mà bạn có thể xử lý.

Nếu bạn muốn kiểm tra một số chủ đề, dưới đây là một vài ví dụ về chúng trong kho lưu trữ. Vì không thể kiểm tra và so sánh tất cả các chủ đề sẵn sàng thị sai sẵn có và chỉ cho bạn thấy tốt nhất, chúng chỉ được chọn dựa trên tính chủ quan của sở thích thị giác cá nhân của tôi.

1. Parallax Frame

2. Marvy

3. SimpleShift

4. Eleganto

5. Tích phân

6. Zeal

7. Juniper

8. Và đừng quên chủ đề chính thức mới nhất từ ​​WordPress, Twenty Seventeen, cũng hỗ trợ tiêu đề thị sai.

Các chủ đề này thường có một hoặc một vài trình giữ chỗ cụ thể cho hiệu ứng thị sai và tất cả những gì bạn cần làm là tải hình nền lên các vị trí đó. Nhưng sự đơn giản này cũng là một bất lợi vì bạn có ít chỗ để ứng biến.

Mỗi chủ đề khác nhau, nhưng bạn thường có thể tùy chỉnh hình ảnh thị sai nền thông qua menu “Giao diện -> Tùy chỉnh” và chọn menu cụ thể theo cài đặt chủ đề.

Đường dẫn thứ hai: Plugin WordPress

Nếu bạn muốn áp dụng hiệu ứng cho các lĩnh vực bạn chọn, bạn cần sử dụng các plugin. Mặc dù số lượng không lớn bằng các chủ đề, vẫn còn nhiều plugin song song WordPress mà bạn có thể thử. Dưới đây là một vài trong số chúng từ kho lưu trữ plugin: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider và Aesop Story Engine.

Hầu hết các plugin này sẽ cho phép bạn tạo các phần tử sai và chèn chúng vào bài đăng, trang hoặc bất kỳ khu vực được hỗ trợ nào khác bằng cách sử dụng mã ngắn. Ngoài ra còn có một số trong đó tạo ra các yếu tố trực tiếp tại nơi bạn muốn thị sai xuất hiện.

Vì chúng ta đã thảo luận về Aesop Story Engine, khả năng chèn parallax của nó, và tất cả các tính năng của nó đều nằm trong Nội dung Storytelling tương tác xây dựng trên ebook WordPress, vì vậy với mục đích của bài viết này, hãy xem một plugin khác làm ví dụ.

Ví dụ, trong Parallax Scroll, bạn có thể tạo một Parallax mới tương tự như việc tạo một bài đăng mới. Giao diện chỉnh sửa cũng trông tương tự. Để thêm hình nền sai, hãy sử dụng tùy chọn "Đặt hình nổi bật". Tiêu đề và nội dung bài đăng là tùy chọn.

Có nhiều tùy chọn mà bạn có thể tinker bên dưới hộp nội dung, nhưng chúng cũng là tùy chọn.

Sau khi nhấn nút “Xuất bản”, bạn sẽ nhận được một mã ngắn. Chèn mã ngắn này vào bất kỳ vị trí được hỗ trợ nào (bài đăng, trang, tiện ích, v.v.) và bạn sẽ có hiệu ứng thị sai.

Lưu ý rằng ngay cả khi bạn có thể điều chỉnh nhiều thứ trong các tùy chọn, kết quả cuối cùng của thị sai sẽ phụ thuộc rất nhiều vào các chủ đề mà bạn sử dụng. Nếu chủ đề hỗ trợ chiều rộng đầy đủ, thì phần tử thị sai có thể xuất hiện trong vinh quang toàn chiều rộng của nó. Nếu không, bạn có thể chấp nhận những gì cuộc sống đã cho bạn với vòng tay rộng mở, hoặc bạn có thể cố gắng để hack theo cách của bạn vào sự xuất hiện ưa thích của bạn bằng cách sử dụng CSS và JavaScript.

Một mẹo nhỏ để thêm vào kho vũ khí của bạn: không ai nói rằng bạn không thể kết hợp chủ đề và plugin. Sử dụng nhiều plugin cũng hợp pháp. Ví dụ, bạn có thể sử dụng Twenty Seventeen cho chủ đề của mình và cài đặt Aesop Story Engine cùng với Parallax Scroll để tăng thêm công sức cho công thức web của bạn.

Bây giờ bạn có thể đi trên một cuộc hành trình sai và wow khách truy cập của bạn trên đường đi.