inflearn logo
inflearn logo

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

Interactive Web
Interactive Web
JavaScript
JavaScript
Interactive Web
Interactive Web
JavaScript
JavaScript
날개 달린 동전

Giới thiệu Khóa học và tạo ra sự phát triển cùng thu nhập nhé!

날개 달린 동전

Đối tác tiếp thị

Giới thiệu Khóa học và tạo ra sự phát triển cùng thu nhập nhé!

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

Đá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à lizb

785

Học viên

43

Đánh giá

92

Trả lời

4.7

Xếp hạng

7

Các khóa học

Xem đánh giá khóa học đào tạo quốc gia (offline) của người chia sẻ kiến thức

Đi đến đánh giá khóa học "Đào tạo Thiết kế Web thích ứng"
(2022.03-2022.07)

Từ tháng 3 đến nay, tuy là một khoảng thời gian có thể coi là dài hoặc ngắn, nhưng đối với tôi, đây là một giai đoạn thực sự quan trọng và giá trị trong cuộc đời. Mặc dù trước đó tôi đã có một chút kiến thức nền tảng, nhưng tôi vẫn luôn cảm thấy mịt mờ vì không biết phải làm thế nào, đi theo hướng nào hay phải chuẩn bị những gì. Nhờ sự dạy dỗ tận tâm của cô giáo mà tôi đã có thể đạt được sự trưởng thành vượt bậc và vững chắc cả về mặt kỹ thuật lẫn kỹ năng tìm việc. Nhờ đó, sự tự tin của tôi đã tăng lên rất nhiều, và tôi cảm thấy mình có thể làm tốt ngay cả sau khi đi làm! Tôi xin chân thành cảm ơn cô Bang Mi-jung đã dẫn dắt lớp học, cùng các thầy cô phụ trách hướng nghiệp khác! :) Tôi đi làm đây ạ! Chúc các bạn học viên khóa sau cố gắng và gặt hái được nhiều trải nghiệm tốt đẹp! Cố lên nhé :)

Tôi đã theo học khóa đào tạo Web Publisher từ tháng 3 đến tháng 7 :) Tôi đã thử thách bản thân khi chưa biết gì ngoài thiết kế, nhưng nhờ sự cổ vũ và hỗ trợ của giáo viên cũng như các bạn học mà tôi cảm thấy mình đã gặt hái được rất nhiều điều. Tôi sẽ dựa trên những gì đã học được tại trung tâm để tiếp tục chăm chỉ học tập trong tương lai~~ Con xin chân thành cảm ơn cô Bang Mi-jung, người đã luôn tận tình chỉ bảo, cùng các thầy cô phụ trách việc làm khác ạ!

Đi đến đánh giá khóa học "Đào tạo nhà phát triển Front-end"
(2020.11.17-2021.05.11)

Khoá đào tạo thú vị đến mức tôi cảm thấy khoảng thời gian 6 tháng trôi qua thật ngắn ngủi. Việc đưa ra ý tưởng và thiết kế từng tốn rất nhiều thời gian, nhưng thông qua khoá học, tôi đã học được các bí quyết và cảm thấy tự hào khi thấy kỹ năng của mình ngày càng tiến bộ, thời gian làm việc cũng được rút ngắn đáng kể. Đối với một người từng không xác định được hướng đi nghề nghiệp như tôi, những kiến thức học được từ khoá đào tạo này không chỉ là tri thức của riêng tôi mà còn là cột mốc chỉ đường giúp tôi định hướng sự nghiệp. Những người anh, người chị, người em tại phòng học số 3 của khoá Đào tạo Nhà phát triển Frontend cùng giảng viên Bang Mi-jung, những người đã cùng tôi học tập suốt 6 tháng qua, là những mối nhân duyên tốt đẹp và là chỗ dựa vững chắc cho tôi. Tôi xin chân thành cảm ơn giảng viên Bang Mi-jung, đội ngũ hỗ trợ việc làm và các nhân viên hành chính đã nhiệt tình giúp đỡ để tôi có thể tìm được việc làm ngay cả trước khi kết thúc khoá học. Ngoài khoá học này còn có rất nhiều chương trình tốt khác, nên tôi muốn giới thiệu Viện Phát triển Năng lực Nghề nghiệp Daewoo cho những người hậu bối hoặc các em còn đang lo sợ về việc làm hay chưa tìm được hướng đi cho nghề nghiệp giống như tôi.

Khi mới đến đây, tôi đã rất lo lắng rằng một người chưa từng học qua thiết kế hay lập trình như mình liệu có thể hoàn thành khóa học và tìm được việc làm hay không. Thế nhưng, càng học tôi lại càng thấy những nỗi lo đó dần tan biến. Tôi đã được học rất nhiều thứ như Illustrator, Photoshop, HTML, CSS, JS, Vue... Vì có nhiều kiến thức mới nên giai đoạn đầu có thể hơi khó khăn, nhưng cô Bang Mi-jung đầy nhiệt huyết đã hướng dẫn rất tận tình nên các bạn không cần phải lo lắng đâu. ㅎㅎ Khi xem đánh giá về các trung tâm khác, tôi thấy có nơi dạy theo giáo trình cũ rích năm này qua năm khác, thậm chí có giáo viên còn không trả lời được câu hỏi của học viên, nhưng cô giáo ở đây luôn tràn đầy nhiệt huyết, luôn cố gắng truyền đạt những điều mới mẻ và cô có kiến thức rất sâu rộng nên tôi đã nhận được sự giúp đỡ rất nhiều! Nếu bạn muốn trở thành một Web Publisher hay Web Designer, tôi cực kỳ đề xuất nơi này nhé.~~

Vào tháng 11 năm 2020, tôi tình cờ biết đến một cơ sở tuyệt vời là Viện Phát triển Năng lực Nghề nghiệp Daewoo. Tôi thực sự biết ơn vì đã được gặp một người thầy giỏi và tham gia khóa học chất lượng tại đây. Nếu không theo học khóa đào tạo này, có lẽ tôi đã khó có được cơ hội việc làm như hiện tại. Sau khi tốt nghiệp đại học, trong lúc đang mất phương hướng và loay hoay giữa những ngã rẽ sự nghiệp, khóa học kéo dài 5-6 tháng chứa đựng những kinh nghiệm thực tế và bí quyết quý báu của thầy — điều mà khó có thể học được ở bất cứ đâu khác — đã trở thành quãng thời gian học hỏi và trưởng thành to lớn đối với một người hoàn toàn không biết gì về phát triển web như tôi. Dựa trên nền tảng đó, tôi đã được học về nhiều phong cách thiết kế, lập trình web và tự mình tạo ra được bộ hồ sơ năng lực (portfolio) cá nhân. Vì việc học các ngôn ngữ lập trình quá xa lạ nên đã có nhiều lúc tôi muốn bỏ cuộc giữa chừng, nhưng nhờ sự nhiệt huyết và dẫn dắt tận tình của thầy — người sẵn sàng giảng lại hàng chục lần mà không bỏ rơi học viên — tôi đã có thể hoàn thành tốt khóa học và thậm chí là tìm được việc làm sớm trước khi kết thúc chương trình (khi mới hoàn thành hơn 80% khóa học). Tôi xin gửi lời cảm ơn sâu sắc đến thầy và Viện Phát triển Năng lực Nghề nghiệp Daewoo đã giúp tôi có thể tìm được công việc đầu tiên và bắt đầu một hành trình mới như thế này.

Giáo viên đã hướng dẫn rất dễ hiểu ngay cả với người không chuyên, và nhờ đó tôi đã tìm được việc làm tốt. Tôi rất vui vì đã tham gia khóa học này.

Chương trình giảng dạy được thiết kế bám sát thực tế, giúp người học làm quen với các công cụ thiết kế và lập trình từng bước một từ những nền tảng cơ bản nhất. Giáo viên đã tận tâm hỗ trợ hết mình để tôi có thể tự mình thực hiện các thao tác, điều này đã giúp ích cho tôi rất nhiều. Khóa học này đã phá vỡ định kiến rằng các lớp học do nhà nước tài trợ thường có chất lượng kém. Giáo viên chủ nhiệm cũng rất cầu tiến, luôn cố gắng dạy những điều mới mẻ nên tôi đã học hỏi được rất nhiều.

Giáo viên đã hướng dẫn rất dễ hiểu ngay cả với những người không chuyên, và nhờ đó tôi đã tìm được việc làm tốt. Tôi rất vui vì đã tham gia khóa học này.

Ngoài những kiến thức cơ bản đã biết trước đó, tôi đã được học hỏi thêm nhiều điều đa dạng thông qua quá trình đào tạo tại học viện. Tôi cũng đã được luyện tập để có thể lấy chứng chỉ, và dù đối với tôi lập trình khá khó nhưng tôi đã học đến mức có thể hiểu được hầu hết các thuật ngữ chuyên môn. Trong quá trình theo học tại đây, tôi cũng đã tìm được việc làm nên cảm thấy rất an tâm và hạnh phúc.


Tôi tốt nghiệp chuyên ngành kiến trúc và đã gắn bó với thiết kế web được hơn 20 năm. Trải qua nhiều thăng trầm khi vừa làm thực tế vừa giảng dạy, giờ đây tôi đã trở nên rất yêu công việc này, đồng thời sự hứng thú và cảm giác thành tựu đã giúp tôi dấn thân mạnh mẽ hơn nữa. Tôi hy vọng có thể chia sẻ những kiến thức mình biết để giúp nhiều người không thuộc chuyên ngành có thể bắt đầu một cách dễ dàng hơn, và cầu chúc cho mọi điều bạn mong muốn đều trở thành hiện thực.

Lucete!

Mọi thắc mắc liên quan đến bài giảng vui lòng liên hệ email: loo4love90@gmail.com

 

 

Kinh nghiệm giảng dạy

  • Tháng 3 năm 2018 - Hiện tại. Đang tiến hành khóa học chuyên gia Thiết kế web/Đa phương tiện/Front-end

  • Học viện Elice `HTML / CSS ở một đẳng cấp khác` đang chuẩn bị ra mắt

  • Elice Academy `Javascript ở một đẳng cấp khác` đang chuẩn bị ra mắt

□ Hiện đang giảng dạy khóa học Front-end / Đa phương tiện / Nội dung Web tại Viện Phát triển Năng lực Nghề nghiệp Daewoo
□ Giảng dạy UI/UX Web Publishing tại Hi Media

□ Giảng dạy UI/UX Web Publishing tại Ezen Computer
□ Giảng dạy Thiết kế Web tại Học viện Máy tính The Joeun cơ sở Jongno
□ Giảng dạy Thiết kế Web/Đồ họa tại Học viện Máy tính The Joeun cơ sở Gangnam
□ Giảng dạy Thiết kế Web tại Trường chuyên nghiệp Tài năng Youngjae

 

  Chứng chỉ  

□ Chứng chỉ Kỹ thuật viên Thiết kế Web
□ Chứng chỉ Kỹ thuật viên Thiết kế Đồ họa máy tính 

□ Chứng chỉ Giảng viên đào tạo KPC (GTQ, GTQi, GTQid)

Giáo viên đào tạo phát triển năng lực nghề nghiệp cấp 3 (Công nghệ thông tin, Thiết kế, Nội dung văn hóa, Chiến lược và lập kế hoạch công nghệ thông tin

Vận hành công nghệ thông tin) 
□ Chứng chỉ Tin học văn phòng (Computer Literacy) bậc 1

 

Thêm

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á

  • 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!

  • 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~~ ^^

  • 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

  • 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. ^^

  • 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!

1.382.396 ₫