Hướng dẫn tạo hiệu ứng đẹp mắt cho Blogspot khi cuộn chuột với WOW.js

Điểm 4.6/5 dựa vào 87 đánh giá

WOW.js hay WOWjs là thư viện javascript được tạo bởi Matt Aussaguel – Founder của webiste UpLabs, cộng đồng dành riêng cho designer và developer. Tính năng chính của nó là kết hợp với thư viện Animate.css để kích hoạt hiệu ứng khi cuộn chuột. Nghĩa là chỉ khi nào chúng ta cuộn chuột đến phần tử đó thì hiệu ứng mới được kích hoạt. Thay vì như thông thường, Animate.css sẽ tự động kích hoạt toàn bộ hiệu ứng khi trang web được tải xong.

Hướng dẫn tạo hiệu ứng đẹp mắt cho Blogspot khi cuộn chuột với WOW.js

Và bài viết này sẽ hướng dẫn cách để bạn có thể chèn hiệu ứng này vào Blogspot của mình với vài thao tác rất đơn giản. Bạn xem qua demo tại đây.

Đầu tiên bạn đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML và dán code sau vào trước thẻ </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script type="text/javascript">
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // Khoảng cách của phần tử so với viền dưới khung trình duyệt
mobile: true, // Nếu không muốn hiệu ứng khi xem trên mobile thì thay thành FALSE
live: true // default
}
)
wow.init();
</script>

boxClass: tên class để kích hoạt WOW.js cho phần tử. Mặc định là wow, các bạn có thể thay đổi thành bất cứ tên nào khác tùy thích.
animateClass: tên class để kích hoạt hiệu ứng. Ở đây WOW.js sử dụng Animate.css nên class mặc định sẽ là animated.
offset: Ý nghĩa tương tự data-wow-offset.
mobile: Bật hoặc tắt hiệu ứng đối với các thiết bị di động.
live: Bật hoặc tắt chức năng liên tục kiểm tra để áp hiệu ứng cho các phần tử vừa mới được thêm vào trang (thường là thêm vào thông qua JavaScript).
callback: hàm được kích hoạt mỗi khi hiệu ứng được kích hoạt, mặc định là null. Đối số element là phần tử được kích hoạt hiệu ứng

Các bạn có thể truy cập vào trang chủ của WOW.js tại đây để tải bản mới nhất.

Để kích hoạt khu vực mà bạn muốn áp dụng hiệu ứng của WOW thì bạn chỉ cần thêm class="wow" và phần tử đó.

Ví dụ ban đầu mình có đoạn code HTML như bên dưới
<div id="demo">
This is my Example with Animate.css
</div>

Và bây giờ mình thêm class="wow" như bên dưới
<div id="demo" class="wow">
This is my Example with Animate.css
</div>

Trường hợp bạn muốn thêm hiệu ứng cho từng phần tử riêng thì thêm như bên dưới, bạn tham khảo các kiểu hiệu ứng tại đây.
<div id="demo" class="wow bounceIn">
This is my Example with Animate.css
</div>

Một số thông số bạn có thể thêm vào cho phần tử mà bạn muốn tạo hiệu ứng:

data-wow-duration: Thời gian xảy ra hiệu ứng.
data-wow-delay: Độ trễ trước khi hiệu ứng bắt đầu.
data-wow-offset: Khoảng cách của phần tử so với viền dưới khung trình duyệt. Khi cuộn chuột đến khoảng cách này thì hiệu ứng sẽ được kích hoạt. Mặc định là 0, tức là phần tử vừa được cuộn tới sẽ chạy hiệu ứng. Tùy chỉnh này ít khi được sử dụng.
data-wow-iteration: Số lần lặp lại của hiệu ứng.

Ví dụ ta muốn thời gian xảy ra hiệu ứng là 2s, độ trễ là 0.2s và lặp lại 2 lần. Ta sẽ có mã nguồn tương tự như sau:

<div id="demo" class="wow bounceIn" data-wow-duration="2s" data-wow-delay=".2s" data-wow-iteration="2">
This is my Example with Animate.css
</div>

Như vậy là xong. Bạn có thể thiết lập cho phần tử bất kỳ.

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

Loading...

Không có nhận xét nào