Tích hợp thư viện animation hiệu ứng đẹp vào blog

Animation hiểu nôm na là hiệu ứng chuyển động của một phần tử nào đó. Nhờ có animation mà blog/website của bạn trở nên bắt mắt và chuyên nghiệp hơn. Hiện nay, mọi người sử dụng animation chủ yếu ở các giao diện kiểu Landing Page. Ngoài ra, bạn hoàn toàn có thể sử dụng hiệu ứng hoạt cảnh này vào bất kì vị trí bạn mong muốn, phần tử bạn thích. Đối với blog mình, mình có sử dụng ở banner giới thiệu tại chuyên mục Blogger Template.

Nếu như đã học và biết CSS, bạn có thể tự tạo cho mình một thuộc tính animation đơn giản hoặc phức tạp tùy ý thích. Còn đối với những ai muốn dùng hàng có sẵn thì thay vì tự viết CSS, bạn hãy sử dụng thư viện có sẵn. Việc chọn thư viện animation có rất nhiều trên mạng, hôm nay mình sẽ gửi đến các bạn thư viện khá ổn của Daniel Eden nhé.

Adding awesome animation library to blogger template

Tích hợp thư viện animation hiệu ứng đẹp vào blog

Cách thực hiện

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML

Bước 2: Thêm thư viện animation bên dưới trước thẻ

</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Cách dùng

Sau khi đã có thư viện trên, giờ có 2 cách dùng cơ bản bạn có thể tham khảo.

Cách 1: Chèn thẳng vào class của phần tử cần dùng animation

Ta sẽ thêm vào class của các phần tử có sẵn 3 class mới theo thứ tự:

animated + infinite (không bắt buộc) + tên class hiệu ứng

Ví dụ:

<h1 class="animated infinite bounce">Example</h1>

Trong đoạn code trên có thể hiểu rằng ta vừa thêm hiệu ứng animation "bounce" cho thẻ h1. Thuộc tính "infinite" chính là lặp vô hạn, nếu bạn thêm thuộc tính này vào thì hiệu ứng sẽ lặp đi lặp lại không giới hạn số lần. Tương tự với các phần tử còn lại, bạn hoàn toàn có thể thực hiện cách trên. Lưu ý là tên hiệu ứng bạn phải ghi đúng cả chữ hoa lẫn chữ thường nhé.

Xem toàn bộ hiệu ứng thư viện hỗ trợ tại: https://daneden.github.io/animate.css/

Cách 2: Dùng Jquery và CSS

Jquery để kích hoạt hiệu ứng animation còn CSS để bạn tùy biến các thông số: animation-duration (xác định thời gian để hoàn thành một chuyển động, mặc định là 0s), animation-delay (xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0) và animation-iteration-count (xác định số lần thực hiện chuyển động)

Jquery: chèn trước

</body>

<script type="text/javascript">
$('class(id)_phần_tử').addClass('animated tên_animation');
</script>

CSS: chèn trước

]]></b:skin>

.(#)_phần_tử {
  -vendor-animation-duration: value;
  -vendor-animation-delay: value;
  -vendor-animation-iteration-count: value; // value: giá trị, vendor: loại trình duyệt (moz: Firefox, webkit: Chrome + Safari, o: Opera)
}

Ví dụ: Ta muốn tạo chuyển động cho cho phần tử logo của blog chẳng hạn thì ta cần xác định được Class (hoặc ID) và CSS của phần tử logo đó. Đối với blog mình thì logo sẽ có class là header-logo và có CSS như hình dưới:

Bây giờ, áp dụng đoạn Jquery và CSS theo mẫu trên ta được:

Jquery:

<script type="text/javascript">
$('.header-logo').addClass('animated bounceOutLeft');
</script>

CSS:

.header-logo {
  -webkit-animation-duration: 3s; // hiệu ứng sẽ hoàn thành trong 3s
  -webkit-animation-delay: 2s; // hiệu ứng sẽ bắt đầu sau 2s
  -webkit-animation-iteration-count: infinite; // lặp vô hạn, có thể thay bằng số tự nhiên 1,2,3...
  -moz-animation-duration: 3s; 
  -moz-animation-delay: 2s; 
  -moz-animation-iteration-count: infinite; 
  -o-animation-duration: 3s; 
  -o-animation-delay: 2s; 
  -o-animation-iteration-count: infinite; 
}

Sau khi thêm 2 code trên vào template thì logo sẽ nhận hiệu ứng animation tên bounceOutLeft và có CSS tùy chỉnh theo ý bạn rồi đó.

Xem thêm về cách sử dụng: https://github.com/daneden/animate.css

Lời kết

Như vậy, mình đã vừa hướng dẫn các bạn cách để tích hợp thư viện animation gồm nhiều hiệu ứng đẹp vào blog rồi đấy. Như mình đã nói thì còn nhiều thư viện khác lắm, bạn nên chỉ dùng duy nhất 1 thư viện thôi để tránh xung đột. Nếu chỉ thích 1 vài hiệu ứng thì tốt nhất nên mở thư viện ở bước 2 ra và copy + paste chỗ CSS hiệu ứng cần dùng thôi để đỡ mất công tải hết tài nguyên. Nếu có khó khăn về bước làm hãy để lại bình luận phía dưới, mình sẽ trả lời sớm nhất có thể. Chúc các bạn buổi tối vui vẻ!