Loading...

Series Học CSS, Javascript Animation thông qua một số mini project

Hướng dẫn
06-05-2024 09:59:41
0
0

Đã bao giờ bạn cảm thấy chán nản với việc phát triển website, không biết làm gì bổ sung cho website nữa. Thì CSS, Javascript Animation có thể là một lựa chọn, trải nghiệm thú vị. Giúp website trở nên nổi bật, fun, tăng tương tác và trải nghiệm người dùng tốt.

Series CSS, Javascript Animation

Dưới đây là một series ngắn những video mình làm hướng dẫn về CSS/JS Animation. Mà bạn có thể bắt đầu tìm hiểu, nghiên cứu.

Những video này, mình có cảm hứng từ nguồn trên Youtube và cải thiện, làm hướng dẫn chi tiết để các bạn có thể hiểu được dễ dàng hơn.

Video Hướng dẫn code Pháo nổ gồm 3 kiểu

Ở đây bạn sẽ bắt đầu với việc làm sao để thiết kế một vụ pháo nổ mỗi khi click vào vị trí mà ta setup. Sau khi làm được một vụ nổ tại vị trí ta click, ta sẽ chuyển đến với việc làm vụ nhiều nổ ngẫu nhiên tại khu vực mà mình cài đặt. Cuối cùng là vụ nổ chạy theo con trỏ chuột - từ việc bắt sự kiện khi con trỏ chuột di chuyển.

Video Hướng dẫn code Ngôi sao tóe theo con trỏ chuột

Ngôi sao tóe ra theo sự di chuyển của con trỏ chuyển. Cái css, js animation này sẽ khá giống với thằng vụ nổ bên trên. Túm lại thì đơn giản và fun.

Video Hướng dẫn code Đám mây mưa chuyển động

Ở đây, chúng ta sẽ học được cách tạo hình đám mấy chỉ với css. Sau đó sẽ viết code javascript để tạo ra các hạt mưa, ngẫu nhiên vị trí, kích thước và thời gian rơi.

Video Hướng dẫn code Hiệu ứng Hover liền kề

Đây là hiệu ứng có thể áp dụng vào các danh sách sản phẩm hoặc danh sách gì đó... Khiến người dùng ấn tượng khi hover vào. Nổi bần bật luôn với cái css javascript animation này.

Video Hướng dẫn code Cơn mưa trái tim

Khá giống với cơn mưa bên trên. Nhưng thay vì đám mây thì sẽ là một trái tim to đùng, thay vì hạt mưa sẽ là những trái tim nhỏ.

Kết

Trong mỗi video bạn sẽ học được một số điều mới, thú vị, giúp bạn luyện thêm trình độ viết Javascript, CSS. Lưu lại để thực hành lúc nào đó nhé.


Tags Bài viết:
Chia sẻ bài viết:

0 bình luận

Để lại bình luận

Thích bài viết? Nhận tin mới
Đừng quên share bài này
Top Zalo contact