- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Nếu các bạn thiết kế website thì chắc chắn các hiệu ứng chuyển động hoạt hình thường xuyên được sử dụng để làm phong phú cũng như làm nổi bật các nội dung của website. Việc thiết kế các hiệu ứng chuyển động hoạt hình có thể được thiết kế bằng CSS hoặc JavaScript, mỗi cách thức đều có ưu và nhược điểm khác nhau. Đối với tôi, việc thiết kế hiệu ứng trên website sử dụng CSS sẽ được ưu tiên, JavaScript sẽ được cân nhắc khi các hiệu ứng quá phức tạp mà CSS không thể đáp ứng được.
Để hỗ trợ cho việc thiết kế hiệu ứng chuyển động hoạt hình bằng CSS, các bạn có thể tham khảo thư viện Woah.css mà tôi giới thiệu với các bạn ở bài viết này. Woah.css là một thư viện CSS mạnh mẽ, cung cấp rất nhiều hiệu ứng chuyển động đẹp mắt, phức tạp. Các bạn có thể xem qua các hiệu ứng mà thư viện Woah.css hỗ trợ tại địa chỉ http://www.joerezendes.com/projects/Woah.css.
Để sử dụng thư viện Woah.css, các bạn tải tại địa chỉ https://github.com/joerez/Woah.css hoặc sử dụng công cụ NPM với dòng lệnh:
Bây giờ, các bạn tích hợp thư viện Woah.css vào website với dòng mã lệnh HTML như sau:
Tiếp theo, thiết kế một hiệu ứng đơn giản như ví dụ sau:
Để hỗ trợ cho việc thiết kế hiệu ứng chuyển động hoạt hình bằng CSS, các bạn có thể tham khảo thư viện Woah.css mà tôi giới thiệu với các bạn ở bài viết này. Woah.css là một thư viện CSS mạnh mẽ, cung cấp rất nhiều hiệu ứng chuyển động đẹp mắt, phức tạp. Các bạn có thể xem qua các hiệu ứng mà thư viện Woah.css hỗ trợ tại địa chỉ http://www.joerezendes.com/projects/Woah.css.
Để sử dụng thư viện Woah.css, các bạn tải tại địa chỉ https://github.com/joerez/Woah.css hoặc sử dụng công cụ NPM với dòng lệnh:
Code:
npm install woah.css --save
HTML:
<link href="path/to/woah.css" rel="stylesheet">
HTML:
<h1 class="woah wowzors">Welcome to Gextend</h1>