10 ví dụ về animation thú vị trên Codepen (phần 1)

Hiện nay, các trình duyệt trên mobile đã mạnh mẽ và tuyệt vời hơn rất nhiều khi có những hình ảnh vô cùng sống động. Với việc sử dụng CSS3, chúng ta có thể tạo ra những tác phẩm, những chuyển động vô cùng thú vị mà không cần bất kỳ hình ảnh nào. Rõ ràng, điều đó đã hỗ trợ rất nhiều trong việc load site và để lại ấn tượng rất lớn với người sử dụng.

Bài này, tôi xin giới thiệu một số ví dụ về animation mà tôi đã sưu tầm được trên codepen. Như các bạn đã biết, codePen đang nhanh chóng trở thành nơi thường được tìm đến để thể hiện những gì chúng ta có thể làm với các ý tưởng sáng tạo web của chúng ta. Vì thế, để tìm kiếm những animation mà bạn thấy thú vị thì codepen là 1 lựa chọn khá hữu ích cho bạn.

1. Pure CSS Biker

Nhìn vào demo bên dưới các bạn cũng thấy đó, có rất nhiều thứ đang được diễn ra và thật khó tin khi hiệu ứng này được tạo chỉ bằng HTML & CSS3. Các hình ảnh chuyển động liên tục khiến chúng ta liên tưởng như một người đang đạp xe vậy. Thật tuyệt vời phải không? Hãy chú ý việc đặt tên các class theo BEM cho thật tốt nhé.

2. Pure CSS Saturn Hula Hooping

Giống như hiệu ứng đạp xe bên trên, chúng ta dễ thấy animation này có vẻ giống như một ảnh gif rất phức tạp. Nhưng không, nó cũng chỉ là HTML & CSS3 mà thôi. Kết quả cho thấy 2 hành tinh này tương tác trong khi các phần tử nhỏ lặp đi lặp lại liên tục một cách ngẫu nhiên. Hãy xem code và demo của animation này nhé.

3. Color Layers CSS Animation

Với animation này thì khi nhìn vào chúng, các lớp màu cơ bản trông có vẻ không nhiều lắm. Nhưng khi chúng chuyển động, chúng có thể hiển thị ra rất nhiều lớp. Thực tế, animation này được tạo bởi 1 tập hợp các tag văn bản HTML (p tag), sử dụng CSS3 khiến cho chúng bán trong suốt và chuyển động được. Khi đó các lớp này xếp chồng lên nhau và chuyển động khiến chúng ta như bị thôi miên khi nhìn vào đó.

4. Ice-Cream Loader

Không phải lúc nào chúng ta cũng cần nhiều ảnh JPGs hay PNGs để có thể tạo ra một bức ảnh đẹp, đây là minh chứng cho điều đó. Tất cả những gì chúng ta cần là 1 div container và 4 phần tử khác để tạo ra một cái kem trông vô cùng ngon này. Tất nhiên, code để tạo ra animation này nhỏ gọn và đơn giản hơn nhiều so với 1 ảnh gif.

5. Pure CSS Pigeons

Như cái tên của animation này, chúng ta dễ dàng nhìn thấy 2 chú bồ câu trong kết quả bên dưới. Animation này được hình thành khi bạn kết hợp HTML và CSS3 để tạo ra 2 nhân vật hoạt hình vô cùng thú vị. Rất cảm ơn Julia Muzafarova đã kỳ công xây dựng nên bộ khung hình chính vô cùng phức tạp này. Nó còn tuyệt vời hơn một vài loại cafe đấy.

Như trên tiêu đề có 10 ví dụ tuy nhiên, để viết đủ 10 ví dụ ra đây thì khá là dài. Vậy nên, bài viết này tôi chỉ giới thiệu tới 5 ví dụ đầu, 5 ví dụ còn lại sẽ được nhắc tới trong bài sau. Hi vọng các bạn thấy thú vị với các animation này.

Link tham khảo: https://webdesign.tutsplus.com/articles/pure-css-animation-inspiration-on-codepen--cms-30875

(Còn tiếp)