30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Animation
Webdesign

9 Khoá học phổ biến về CSS Animation

by
Length:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong những ngày đầu của web, animation (hiệu ứng động) đã được biết đến với những hiệu ứng vụng về, phức tạp, nó có thể trông tuyệt vời, nhưng đã làm chậm tốc độ tải trang tải và thường khó sử dụng.

Nhưng khi nó được sử dụng đúng cách, animation có thể là một công cụ tuyệt vời mà các nhà thiết kế web cần phải có trong bộ công cụ của họ. Một chút tinh tế, chuyển động bắt mắt là một cách tuyệt vời để giúp người dùng khám phá giao diện và cảm thấy hứng thú khi sử dụng các trang web hoặc ứng dụng của bạn.

Bạn đã cập nhật tất cả các kỹ thuật mới nhất của web animation sử dụng CSS, JavaScript, easing, SVGs, và các framework đặc biệt như GreenSock Animation Platform hay chưa?

Nếu chưa thì đừng lo lắng — dưới đây là chín khoá học sẽ dạy bạn mọi thứ mà bạn cần.

1. Thực hành Web Animation

Trong khoá học này, giảng viên của Envato Tuts+ Craig Campbell sẽ hướng dẫn bạn các cách bài thực hành để tạo hiệu ứng động cho các button, bảng giá (pricing table), và các thành phần web khác, sử dụng CSS ngắn gọn và jQuery để làm điều đó.

2. Nền tảng GreenSock Animation: Những bước đầu tiên

GreenSock là một framework JavaScript giúp dễ dàng tạo hiệu ứng các phần tử HTML. Trong khóa học này, bạn sẽ học những bước đầu tiên trong việc tìm hiểu cách sử dụng framework mạnh mẽ này. Miễn là bạn có kiến thức về HTML và CSS, cùng với một kiến thức cơ bản về JavaScript, bạn sẽ được trang bị tất cả mọi thứ bạn cần.

3. Hiệu ứng nâng cao với các Plugin GSAP

Đây là một khoá học lý tưởng tiếp sau những khoá học đã liệt kê ở trên. Trong khóa học này, bạn sẽ đi vượt ra ngoài khái niệm cơ bản của GreenSock Animation khi giảng viên Craig Campbell của Envato Tuts+ sẽ dẫn dắt bạn qua các plugin đi kèm với GSAP.

4. Ba dự án GreenSock: Thực hành Animation với GSAP

Trong khoá học GSAP thứ ba, Craig Campbell sẽ hướng dẫn bạn đi qua ba dự án nơi bạn sẽ tìm hiểu cách làm thế nào để tạo ra hình hiệu ứng động, trong thực tế, bằng cách sử dụng nền tảng GreenSock Animation. Bạn sẽ tìm hiểu cách để tạo ra một preloader động, một logo SVG động và một slider tuỳ biến.

5. Hiệu ứng động với Snap.svg

SVG là một cách mạnh mẽ để tạo ra đồ họa dựa trên véctơ trong đó việc thay đổi kích thước trở nên hoàn hảo. Trong khóa học này, bạn sẽ tìm hiểu cách làm thế nào để sử dụng famework Snap.svg để tạo, kiểm soát, và hoạt hình các hình ảnh SVG của bạn một cách dễ dàng.

6. Kỹ thuật Easing với Cubic Bezier Function

Một cách để thổi hồn và một ít cá nhân hoá vào trong hiệu ứng động trên web là thử nghiệm với các thiết lập khác nhau của kỹ thuật easing. Trong khoá học nhanh, chỉ mười phút này với Guy Routledge, bạn sẽ được học kỹ thuật easing là gì, tại sao nó hữu ích, cách điều khiển nó, và cách áp dụng nó ở trong ngữ cảnh của CSS.

7. Làm việc với CSS Transition

Trong khoá học ngắn này, Craig Campbell sẽ hướng dẫn bạn mọi thứ bạn cần để nhanh chóng bắt đầu tạo các hiệu ứng động bằng cách sử dụng các thuộc tính CSS Transition. Chỉ trong mười phút, bạn sẽ học cách tạo ra một chuyển động không sử dụng bất cứ thứ gì khác ngoài một số thuộc tính CSS.

8. Làm việc với CSS Keyframe Animation

Khoá học ngắn này sẽ dạy bạn cách tạo các hiệu ứng động bằng cách sử dụng CSS Keyframe và các thuộc tính Animation. Chỉ trong vòng mười phút, bạn sẽ học cách tạo các hiệu ứng động bên trong trình duyệt mà không cần dựa vào các plugin hay ứng dụng lập trình phụ nào.

9. Những thư viện CSS cần thiết cho các Nhà thiết kế Web

Trong khoá học này bạn sẽ học cách sử dụng mười thư viện CSS cần thiết, sẵn có dành cho các nhà thiết kế web. Bạn sẽ học về các thư viện reset, animation, transition, typography, và các thư viện có liên quan. Bạn sẽ học cùng với Adi Purdila, và bạn sẽ sử dụng Bower để quản lý các dự án của bạn, đảm bảo mọi thứ được cập nhật và dễ dàng bảo trì.

Hãy bắt đầu học với chương trình Khuyến mãi miễn phí

Bạn có thể học tất cả những khoá học này và thêm các khoá học về thiết kế web khác với 10 ngày miễn phí trong gói đăng ký hàng tháng của chúng tôi. Vì vậy hãy bắt đầu ngay hôm nay, và trở thành một người thành thạo CSS Animation để gây ấn tượng với khách hàng của bạn và làm cho các thiết kế web của bạn trở nên nổi bật.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.