강의

멘토링

로드맵

Programming

/

Front-end

Tìm hiểu danh mục fullPage + anime + SVG Animation với JavaScript

Vanilla Javascript + fullPage.js + Danh mục web tương tác SVG Animation! Một khóa học phải có cho việc làm và thay đổi công việc!

(4.2) 5 đánh giá

95 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

  • lizb
Interactive Web
Interactive Web
JavaScript
JavaScript
Interactive Web
Interactive Web
JavaScript
JavaScript

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

4.2

5.0

gangsugi

100% đã tham gia

Tôi chủ yếu tạo svg bằng cách tự viết mã, nhưng sau đó tôi nhận ra rằng tôi có thể sử dụng thứ gọi là hoạt hình... Tôi thực sự thích bài giảng giàu thông tin. Đó là một bài giảng hay và dễ nghe vì nó được giải thích một cách bình tĩnh và chậm rãi. Hoàn toàn được khuyến khích!

5.0

TaeHyun Lim

100% đã tham gia

Tôi đang cố gắng nghiên cứu anime.js và tình cờ thấy bài giảng này. Cảm ơn bạn vì bài giảng tuyệt vời~

5.0

lwshan

100% đã tham gia

Thật thú vị!

Bạn sẽ nhận được điều này sau khi học.

  • Cách sử dụng fullPage.js

  • hoạt hình cuộn toàn trang

  • cách sử dụng cơ bản của anime.js

  • Hoạt hình JavaScript sử dụng anime.js

  • Logic thanh trượt Vanilla JavaScript

  • Web tương tác sử dụng SVG

  • Bố cục linh hoạt

Hãy thực hiện nó bằng JavaScript thuần túy
Danh mục web tương tác!

VanillaJS + fullPage + Anime!

Thông qua ngữ pháp lập trình
Nếu bạn đã học cách viết ngữ pháp,
Bây giờ, cách xử lý mã
Bạn nên biết 🙂

fullPage.js là gì?

Một plugin được tạo ra bởi nhà phát triển Álvaro Trigo, đây là một thư viện JavaScript hoạt động bằng cách sử dụng thao tác di chuột .
Đây là cách nhanh chóng và dễ dàng để tạo các trang toàn màn hình chỉ bằng một cú nhấp chuột.

Trang web chính thức của fullPage.js (liên kết)

Được, được!
Sử dụng anime.js
Hoạt hình SVG.

anime.js là một thư viện hoạt hình JavaScript nhẹ với API đơn giản nhưng mạnh mẽ. Nó hoạt động với các thuộc tính CSS, SVG, thuộc tính DOM và đối tượng JavaScript.

Trang web chính thức của anime.js (liên kết)

Bài giảng này!

Tạo toàn màn hình với fullPage.js,
Triển khai hoạt ảnh SVG với anime.js
Đây là khóa học hướng đến thực hành .


Bạn học được những kỹ năng gì?

Kiến thức cơ bản về fullPage.js và anime.js

Tìm hiểu về các thiết lập cơ bản của fullPage, Navigation Anchor, cách sử dụng Active Class, cách sử dụng hàm gọi lại và Slider Logic được tạo bằng JavaScript thuần túy.

Ngoài ra, bạn sẽ học những kiến thức cơ bản về hoạt hình và các kỹ năng cần thiết cho hoạt hình tương tác, chẳng hạn như Hoạt hình dòng thời gian và Hoạt hình SVG bằng anime.js, để tạo ra các hiệu ứng hoạt hình tuyệt đẹp và thú vị.

Hoạt ảnh tương tác bắt mắt

Hãy tự mình kiểm tra năm ví dụ thực tế sau đây !

Bạn sẽ có thể tạo mẫu danh mục đầu tư web tương tác động của riêng mình, có thể áp dụng theo nhiều cách khác nhau, chẳng hạn như sử dụng hoạt ảnh đường nét, hiệu ứng đồ thị, thanh trượt được liên kết với nền, di chuyển các trang nền bằng thẻ đường dẫn SVG và các trang hoạt ảnh theo lượt nhấp.


Nhà xuất bản/thiết kế web
Nếu bạn đang chuẩn bị một danh mục đầu tư mới!

Học các nguyên tắc cơ bản

Tìm hiểu các nguyên tắc triển khai các mẫu tương tác có thể được sử dụng làm hồ sơ xin việc thực tế.

Xây dựng một bộ xương

Tạo và áp dụng danh mục đầu tư của riêng bạn bằng cách chèn thiết kế UI vào mẫu bằng JavaScript gốc.

Danh mục đầu tư tương tác

Điều này được khuyến nghị cho những người đang chuẩn bị làm việc với tư cách là nhà xuất bản/thiết kế web và cần một danh mục đầu tư tương tác sử dụng SVG Anime Animation.


Câu hỏi dự kiến Hỏi & Đáp

H. Tôi cần bao nhiêu kinh nghiệm lập trình để tham gia khóa học này?

Khóa học này được khuyến nghị cho những người có hiểu biết cơ bản về HTML, CSS và JavaScript. (Xem Điều kiện tiên quyết.)

H. Các tập lệnh được sử dụng trong bài giảng có sử dụng jQuery không?

Đây là bài giảng sử dụng Vanilla JavaScript.

H. Tôi có thể tạo danh mục đầu tư bằng cách tham gia lớp học này không?

Có, bạn có thể làm được.

Sinh viên chưa có kinh nghiệm lập trình trong các lớp học trực tuyến thường tìm được việc làm ở vị trí xuất bản web hoặc thiết kế UI/UX sau khi hoàn thành các khóa học do chính phủ tài trợ. Mẫu mặc định được sử dụng trong các khóa học này là fullPage.js, và trong khóa học này, chúng tôi cũng sử dụng SVG và hoạt ảnh so le bằng anime.js.

Vì khóa học này tập trung vào cách sử dụng và vận dụng cơ bản nên bạn có thể dễ dàng sử dụng khóa học này như một danh mục đầu tư thực tế bằng cách thêm thiết kế UI của riêng bạn vào những gì bạn đã học.

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

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

  • Những người cần tạo danh mục web để làm việc với tư cách là nhà xuất bản hoặc nhà thiết kế!

  • Nếu bạn không tự tin trong việc tạo danh mục đầu tư và cần trợ giúp!

  • Bất cứ ai muốn tìm hiểu các nguyên tắc của một trang web đều tò mò về cách nó được tạo ra!

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

  • Khái niệm cơ bản về HTML

  • Khái niệm cơ bản về CSS

  • Khái niệm cơ bản về JavaScript

Xin chào
Đây là

374

Học viên

16

Đánh giá

92

Trả lời

4.9

Xếp hạng

3

Các khóa học

Tôi là giảng viên chuyên giảng dạy về phát triển web tập trung vào thực tiễn từ Frontend đến Backend, dựa trên kinh nghiệm giảng dạy lâu năm của mình.

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

Tất cả

44 bài giảng ∙ (7giờ 13phú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ả

5 đánh giá

4.2

5 đánh giá

  • thsoon님의 프로필 이미지
    thsoon

    Đánh giá 19

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi đang cố gắng nghiên cứu anime.js và tình cờ thấy bài giảng này. Cảm ơn bạn vì bài giảng tuyệt vời~

    • lizb
      Giảng viên

      Cảm ơn. Hi vọng nó sẽ giúp ích nhiều cho bạn trong công việc. Cảm ơn bạn đã đánh giá tốt là tốt. ^^

  • gangsugi5753님의 프로필 이미지
    gangsugi5753

    Đánh giá 23

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi chủ yếu tạo svg bằng cách tự viết mã, nhưng sau đó tôi nhận ra rằng tôi có thể sử dụng thứ gọi là hoạt hình... Tôi thực sự thích bài giảng giàu thông tin. Đó là một bài giảng hay và dễ nghe vì nó được giải thích một cách bình tĩnh và chậm rãi. Hoàn toàn được khuyến khích!

    • lizb
      Giảng viên

      Cảm ơn! Tôi được khuyến khích vì nó hữu ích~~ ^^ Tôi sẽ chuẩn bị tốt cho bài giảng tiếp theo!

  • enyalife12235952님의 프로필 이미지
    enyalife12235952

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    9% đã tham gia

    Đó là một bài giảng rất hữu ích đối với tôi, một người chưa có kiến ​​thức cơ bản về Javascript.

    • lizb
      Giảng viên

      Những ngày này, tôi suy nghĩ rất nhiều về các lớp học. Chúng tôi sẽ suy nghĩ nhiều hơn và cố gắng cải thiện. Cảm ơn

  • lwshan2154님의 프로필 이미지
    lwshan2154

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Thật thú vị!

    • lizb
      Giảng viên

      Tôi rất vui và bổ ích khi biết rằng bạn thích khóa học. Cảm ơn bạn~~ ^^

  • sssisis3484님의 프로필 이미지
    sssisis3484

    Đánh giá 9

    Đánh giá trung bình 3.9

    1

    100% đã tham gia

    Tôi bị cuốn hút vào các từ khóa như SVG toàn trang trong vanilla js. Một mức độ quá dễ dàng để những người thực hành có thể nghe được, https://animejs.com/, https://alvarotrigo.com/fullPage/ Tôi nghĩ sẽ rất tốt nếu được xem nó ở đây.

    • lizb
      Giảng viên

      Đó không phải là một lớp học dành riêng cho các học viên. Như đã nêu trong phần mô tả bài giảng chi tiết, đây là khóa học dành cho người mới bắt đầu tạo danh mục đầu tư. Tôi xin lỗi vì không thể giúp bạn, nhưng không giống như bạn, có những người mới bắt đầu cảm thấy khó khăn ngay cả khi đã xem trang web chính thức. Tôi nghĩ ra câu nói 'Tôi bị cuốn hút' sau khi nghĩ về bài giảng trong vài tháng, nhưng tôi cảm thấy điều đó thật vô ích. Hãy nghĩ xem điều gì có thể hữu ích hơn cho các học viên.

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

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!