LẬP TRÌNH WEB HTML - CSS - JAVA SCRIPT

BÀI 26: TẠO HIỆU ỨNG NHANH TRONG WEB JS

Mã nguồn và hướng dẫn ở đây nè: https://animate.style/

  • Đầu tiên, cài đặt nó vào thư mục dự án của bạn: Có 2 cách tùy theo bạn sử dụng công cụ nào (npm hoặc yarn)

npm install animate.css --save

yarn add animate.css

  • Tiếp theo là import vào file cần dùng. Cũng có 2 cách luôn

import 'animate.css';

  • Tiếp theo bạn vào mã nguồn trên và chọn hiệu mình cần sử dụng sau đó copy để lấy tên class của hiệu đó. Giống như bên dưới

<h1 class="animate__animated animate__bounce">An animated element</h1>

  • Cuối cùng, vào CSS và tùy chỉnh lại thời gian diễn ra hiệu ứng nữa là xong.

.animate__animated animate__bounce {

display: inline-block;

margin: 0 0.5rem;


animation: bounce; /* referring directly to the animation's @keyframe declaration */

animation-duration: 2s; /* don't forget to set a duration! */

}

  • Ngoài ra, còn có thể tùy chỉnh nhiều thứ khác và trong mã nguồn tác giả có hướng dẫn hết cả rồi.