Một số animation effect đẹp mắt để apply cho website của bạn

Khi bạn là một lập trình viên web, ít nhất đôi lần bạn sẽ phải va chạm với css và js. Với 2 thứ bảo bối này kết hợp cho html, bạn sẽ thực sự ngạc nhiên nếu thấy những trang web độc đáo và cực kỳ bắt mắt mà chúng có thể tạo ra đấy. Chúng ta thử tìm hiểu một số hiệu ứng cool ngầu có thể áp dụng vào website nhé.

Đầu tiên là phần banner

1. Sakura Animation
Banner có animation như 1 cơn mưa những cánh anh đào cực kỳ ấn tượng, phù hợp với các trang web du lịch hoặc thời trang. CSS đơn giản, tuy nhiên JS rất phức tạp.

2. Hiệu ứng thay đổi màu
Banner có animation khi bạn click vào sẽ đổi màu tuỳ theo thứ tự bạn đã setting trước. Cũng giống như Sakura Animation, css đơn giản và js rất phức tạp, và cũng rất bắt mắt. Phù hợp với các trang web về thiết kế nội thất.

3. Hiệu ứng chòm sao
Banner có animation như các chòm sao (hoặc như các cấu trúc hoá học, nếu chỉnh sửa lại tí xíu). Đây là animation mình rất thích, vì nó hoàn toàn làm bằng css, không có js. Banner này phù hợp các website về thiên văn hoặc vật lý, hoá học.

Mời bạn tham khảo Demo tại đây.

4. Hiệu ứng hoạt hình
Banner có animation như cảnh hoạt hình. Đây cũng là animation hoàn toàn làm bằng css.
Banner này phù hợp các website về anime, manga.

5. Hiệu ứng Clean Slider With Curved Background
Banner này tạo hiệu ứng chuyển đổi hình ảnh background khá đẹp, sử dụng cả js và css.

6. Hiệu ứng Shattering
Đây là hiệu ứng tạo kiểu broken text cho banner, sử dụng cả js và css. Nếu kết hợp với các hiệu ứng banner khác, sẽ tạo ra 1 banner tuyệt vời cho website của bạn đấy.

Mình vừa chia sẻ với các bạn một số hiệu ứng banner mà mình thấy ấn tượng, có thể áp dụng trong quá trình thiết kế website. Ngoài ra các bạn có thể tham khảo thêm từ những nguồn bên dưới. Cá nhân mình thì thích các banner không sử dụng hoặc ít dùng js, vì mình thấy nó khá là rối rắm, nếu có dùng thì đa số chúng ta đều sử dụng js được chia sẻ trên mạng. Mai mốt chúng ta cùng tìm hiểu một số trang web có ý tưởng thiết kế thật độc đáo cool ngầu từ thiết kế menu cho tới cách hiển thị nội dung nhé.

Link tham khảo:
https://bashooka.com/coding/web-background-animation-effects/
https://speckyboy.com/css-javascript-text-animation-snippets/