강의

멘토링

로드맵

BEST
Programming

/

Front-end

Tiêu chuẩn mới cho hoạt hình web, API hoạt hình web

Thư viện là tùy chọn, nhưng các kỹ năng về tiêu chuẩn web là cần thiết. Thích ứng với API Web Animation, tiêu chuẩn mới cho hoạt ảnh web, nhanh hơn các tiêu chuẩn khác và sử dụng nó trong thực tế ngay lập tức!

(5.0) 41 đánh giá

841 học viên

  • studiomeal
웹개발
animation
애니메이션
실습 중심
웹디자인
인터랙티브웹
Web Animations API
JavaScript
HTML/CSS
Interactive Web
frontend

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Hoạt hình CSS

  • API hoạt ảnh web JavaScript

Một API hoạt hình web có thể sử dụng trong thời gian dài.
Học với 1 Minute Coding! 😎

Có thể áp dụng trực tiếp vào thực hành
API hoạt hình web ✨

Nếu bạn đồng ý với những điều trên, bạn chắc chắn nên tìm hiểu về Web Animation API! Đây là một đặc tả tiêu chuẩn mở rộng mạnh mẽ khả năng hoạt ảnh web dựa trên CSS với JavaScript . Do đó, nó được kỳ vọng sẽ được sử dụng rộng rãi hơn nữa trong tương lai. Các tính năng ấn tượng của thư viện, ban đầu được giới thiệu để tạo sự thuận tiện cho các nhà phát triển, hiện đang liên tục được triển khai thành các công nghệ tiêu chuẩn.

Nếu bạn đang làm việc với hoạt ảnh web hoặc dự định làm việc với nó, Web Animation API là tài liệu không thể bỏ qua. Hãy làm quen với nó ngay!

API hoạt hình web?

API Web Animation là một triển khai chuẩn cho các tính năng liên quan đến hoạt ảnh web vốn đã có sẵn thông qua các thư viện. Được thiết kế dựa trên các triển khai hoạt ảnh CSS, API này tận dụng thế mạnh của các hoạt ảnh CSS hiện có đồng thời cung cấp khả năng triển khai đơn giản hơn.

✔️ Bạn có thể thoải mái kiểm soát hoạt ảnh CSS bằng JavaScript .

✔️ Vì đây là công nghệ chuẩn hoạt hình web (Web Standard) nên sau khi học xong bạn có thể sử dụng lâu dài.


Xem trước nội dung học tập theo từng phần 📚

Phần 0

Chúng ta hãy cùng xem xét khái niệm ngắn gọn về hoạt ảnh CSS, hoạt ảnh JS và API hoạt ảnh web.

Phần 1

Trước khi tìm hiểu về Web Animation API, chúng ta hãy cùng tìm hiểu về CSS Transition.

Phần 2

Trước khi tìm hiểu về Web Animation API, chúng ta hãy cùng tìm hiểu về CSS Animation.

Phần 3

Chúng ta hãy cùng xem xét những điều cơ bản của Web Animation API.

Phần 4

Chúng ta sẽ khám phá cách điều khiển nhiều đối tượng cùng lúc và thậm chí tạo hoạt ảnh Starfield.

Phần 5

Chúng ta hãy cùng xem xét Motion Path, công cụ này di chuyển các thành phần dọc theo đường dẫn mong muốn.

Mục 6

Chúng tôi sẽ khám phá cách triển khai hoạt ảnh dựa trên cuộn bằng Web Animation API và tạo một số ví dụ hữu ích để bạn bắt đầu.

Sau khi tham dự bài giảng, bạn sẽ

  • Bạn có thể phát triển hoạt ảnh CSS hiệu suất cao bằng cách tận dụng các công nghệ chuẩn web.
  • Bạn có thể thu thập kiến thức có thể áp dụng trực tiếp vào thực tiễn thông qua nhiều ví dụ ứng dụng khác nhau .
  • API hoạt ảnh web cho phép bạn phát triển các hoạt ảnh web mạnh mẽ và chuyển động UI hiệu quả hơn.

Chúng tôi sẽ trả lời những câu hỏi bạn mong đợi nhất! 💬

H. Đây có phải là khóa học mà ngay cả người mới bắt đầu cũng có thể tham gia không?

Bất kỳ ai có kiến thức cơ bản về CSS và JavaScript đều có thể tham gia. CSS Animation, nền tảng của các chủ đề trong khóa học, cũng được đề cập trong các phần đầu, vì vậy ngay cả khi bạn chưa quen với nó, bạn vẫn có thể tham gia khóa học mà không gặp nhiều khó khăn. Mặc dù đây không phải là khóa học JavaScript, chúng tôi sẽ giải thích các khái niệm JavaScript xuất hiện xuyên suốt khóa học, vì vậy bạn sẽ không gặp nhiều khó khăn.

H. Nội dung bài học được trình bày ở mức độ nào?

Sau khi tìm hiểu các khái niệm về Web Animation API, chủ đề của bài giảng, chúng ta sẽ xem xét các ví dụ từ cơ bản đến khó vừa phải, vì vậy tôi nghĩ rằng điều này sẽ hữu ích khi áp dụng chúng vào các dự án của bạn.

H. Tôi có thể mong đợi tiến bộ đến mức nào sau khi tham gia khóa học này?

Bạn sẽ có khả năng kiểm soát hiệu ứng động CSS mạnh mẽ hơn khi sử dụng JavaScript , cho phép bạn phát triển hiệu ứng động web hiệu suất cao và hành vi UI hiệu quả hơn.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người làm việc với giao diện người dùng web

  • Những người muốn triển khai hoạt ảnh web bằng công nghệ chuẩn web

  • Những người muốn nghiên cứu triển khai hoạt hình web hiệu suất cao

  • Những người muốn nghiên cứu trước các tiêu chuẩn tương lai của hoạt hình web và áp dụng ngay vào thực tế

Cần biết trước khi bắt đầu?

  • Kiến thức cơ bản về CSS

  • Kiến thức cơ bản về JavaScript

Xin chào
Đây là

19,455

Học viên

1,247

Đánh giá

1,175

Trả lời

5.0

Xếp hạng

11

Các khóa học

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

Chương trình giảng dạy

Tất cả

48 bài giảng ∙ (4giờ 58phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

41 đánh giá

5.0

41 đánh giá

  • highbilble20님의 프로필 이미지
    highbilble20

    Đánh giá 10

    Đánh giá trung bình 4.6

    5

    96% đã tham gia

    근래에 1분 코딩님 새로운 강의가 없어서 이제 강의 안 올리시는 줄 알았는데 이렇게 좋은 강의 들고 와주셔서 너무 감사해요! 강의 들으면서 실무에서 바로 사용하고 있습니다! 강의가 이해하기도 쉽고 재미있어요! 너무 좋아용! 다른 강의도 자주 올려주세욯ㅎㅎ

    • 티라미수님의 프로필 이미지
      티라미수

      Đánh giá 19

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      이전에 애플 강의는 따라가기 조금 어려웠는데 이거 보고 다시 반복해보려고 합니다!! 그림 설명이 너무 좋아요~

      • 1분코딩
        Giảng viên

        웹 애니메이션 API는 다루기가 간단해서, 더 쉽게 활용하실 수 있을 거예요 :) 감사합니다!

    • 웹개바르르님의 프로필 이미지
      웹개바르르

      Đánh giá 16

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      gsap 라이브러리 말고도 웹 표준 기술로 스크롤 애니메이션을 쉽게 구현하니 좋네요 설명도 이해 잘 됩니다 감사합니다

      • th_kim님의 프로필 이미지
        th_kim

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        이번에도 재밌게 학습할 수 있었습니다 앞으로도 많은 강의 부탁드리겠습니다

        • 1분코딩
          Giảng viên

          감사합니다 th_kim님! 계속해서 도움될만한 콘텐츠 만들어 볼게요 :)

      • 박의태님의 프로필 이미지
        박의태

        Đánh giá 14

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        명불허전입니다. 최근 상업사이트에도 스크롤 애니메이션이 자주 사용된다고 느끼고 있는데, 이런 유용한 수업을 열어주셔서 감사합니다. 감사한 마음으로 공부해서 잘 사용하도록 하겠습니다. ps. 강의 불륨이 일반적인 음량보다 살짝 작게 되어있는 것 같습니다.

        • 1분코딩
          Giảng viên

          좋은 말씀 넘 감사합니다 의태님, 유용하게 활용하시길 바라겠습니다 ^^ 음량에 대한 피드백도 감사합니다!

      1.402.365 ₫

      Khóa học khác của studiomeal

      Hãy khám phá các khóa học khác của giảng viên!

      Khóa học tương tự

      Khám phá các khóa học khác trong cùng lĩnh vực!