Tạo hiệu ứng nâng cao cho Landing page với WOW.js

Chắc hẳn nhiều bạn đã biết  đến WOW.js và việc áp dụng WOW Animations vào website sẽ tạo ra được nhiều hiệu ứng sinh động, sự chuyển động mượt mà, hấp dẫn người xem hơn. Trong bài viết này, Thắng sẽ hướng dẫn các bạn cách áp dụng WOW Animations vào Landing Page.

Yêu cầu bạn cần phải tải và cài đặt theme PPO Landing Page phiên bản mới nhất tại đây. Ở phiên bản cũ không có hiệu ứng này nên các bạn cần cập nhật lên phiên bản 1.9 trở lên nhé!

Bình thường ở các phần tử của Visual Composer cũng đã có 5 hiệu ứng cơ bản rồi, nhưng bây giờ bạn có thể không cần sử dụng 5 hiệu ứng đó nữa mà chỉ cần dùng WOW Animations cho ngay chính website của bạn.

Tạo hiệu ứng với WOW Animations

Sẽ rất đơn giản nếu bạn có hiểu biết căn bản về HTML và CSS, cách làm như sau:

Trên trình soạn thảo của WordPress bạn cần để về chế độ soạn thảo là Text 

Bạn cần dùng thuộc tính class cho thẻ HTML để sử dụng WOW Animations. Ví dụ như sau:

Sau đó là chọn hiệu ứng và điền tên class vào thẻ HTML. Ví dụ như sau:

Có rất nhiều hiệu ứng, bạn có thể lựa chọn hiệu ứng phù hợp tại đây để sử dụng.

Tùy chỉnh nâng cao với WOW Animations

Bạn có thể tùy chỉnh nâng cao như thời gian, độ trễ, lặp đi lặp lại… riêng cho từng phần tử mà bạn thiết lập hiệu ứng.

data-wow-duration: Thời gian thay đổi hiệu ứng
data-wow-delay: Độ trễ trước khi hiệu ứng được bắt đầu
data-wow-offset: Khoảng cách để bắt đầu các hiệu ứng (liên quan đến phía dưới của trình duyệt)
data-wow-iteration: Thời gian lặp đi lặp lại của hiệu ứng

Giờ chúng ta sẽ sử dụng class kết hợp với các thuộc tính ở trên. Ví dụ như sau:

Cuối cùng bạn hãy lưu lại những thay đổi này rồi ra ngoài truy cập vào landing page của bạn để xem kết quả.

Chúc bạn thành công!