강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Web Development

Sử dụng ScrollTrigger của GSAP để tạo portfolio

Hãy tạo một trang web portfolio phản ứng nhanh, tương tác và phản hồi theo thao tác cuộn bằng cách sử dụng ScrollTrigger của GSAP!

(5.0) 39 đánh giá

336 học viên

  • jyoung
실습 중심
퍼블리셔
HTML/CSS
scrolltrigger
gsap
Portfolio
Responsive Web

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

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

  • Bí quyết xây dựng portfolio xin việc vào agency

  • Hoạt ảnh ScrollTrigger của GSAP

  • Điều hướng phát hiện hướng cuộn

  • Tạo hoạt ảnh SVG theo thứ tự thời gian

  • Kỹ thuật tạo bố cục bằng HTML/CSS

  • Tạo hiệu ứng Scrolla Animation phản hồi cuộn trang

  • Thiết kế và phát triển xuất bản web responsive, tương thích với nhiều thiết bị khác nhau

  • Thực hiện các tương tác đẹp mắt thông qua plug-in thư viện JavaScript

  • Mẹo hay để thực hiện thiết kế tương tác cho việc xây dựng portfolio cá nhân.

Nổi bật và thu hút sự chú ý của người phỏng vấn
Lưu ý cho những ai muốn tạo danh mục đầu tư! 🙋‍♂️

Cập nhật những câu chuyện thành công của doanh nghiệp và cơ quan lớn trong tháng 2 năm 2025

* Công bố danh mục thành công của Cơ quan vào tháng 2 năm 2025
Phân tích chuyên sâu các trường hợp danh mục đầu tư thành công của các cơ quan quy mô lớn (sẽ được xuất bản thành một loạt bài)

* Công bố danh mục đầu tư chấp thuận của cơ quan trong nửa cuối năm 2024
Phân tích chuyên sâu các trường hợp chuyển nhượng danh mục đầu tư của cơ quan quy mô lớn!





Vào năm 2023,
Hãy xem qua các mẫu danh mục đầu tư đã được các công ty chấp nhận của chúng tôi!

✨ Bạn có muốn tạo cho mình một portfolio trực quan như thế này không?


Tôi giới thiệu điều này cho những người này

Kích hoạt cuộn GSAP
Sử dụng nó để tạo ra một trang web lạ mắt
Bất cứ ai muốn làm điều đó

Vượt qua cơ quan
Danh mục đầu tư có thể
Bất cứ ai muốn làm điều đó

Những xu hướng mới nhất năm 2023
Sự tương tác đúng đắn và tuyệt đẹp
Bất kỳ ai muốn thực hiện

Kích hoạt cuộn GSAP
Từ những điều cơ bản của hoạt hình
Dành cho những ai muốn học ứng dụng

Danh mục đầu tư web
Gửi đến tất cả những ai muốn sáng tạo 🌱

Bài giảng này không phải là hướng dẫn về việc làm thành công chỉ truyền đạt lý thuyết. Thay vào đó, bạn có thể tìm hiểu các yếu tố cần thiết để tạo danh mục đầu tư và thiết kế danh mục đầu tư để có việc làm thành công bằng cách xem xét các trường hợp danh mục đầu tư thực tế của sinh viên đã vượt qua các cơ quan và công ty nội bộ quy mô lớn vào năm 2023!

Bạn có thể tạo trang web tương tác thu hút sự chú ý của người dùng và phản hồi bằng chuột, cũng như tạo hoạt ảnh cuộn bằng ScrollTrigger của GSAP. Bạn cũng có thể nâng cao hiểu biết của mình về cách tạo bố cục bằng HTML và CSS. Chúng tôi cũng sẽ liên tục cập nhật cho bạn những mẹo tạo danh mục đầu tư hợp thời trang!


Bạn sẽ học được gì 📚

🫡 Bài giảng này!

  • Tìm hiểu cách tạo một danh mục đầu tư gây ấn tượng với người phỏng vấn bằng cách xem các ví dụ về danh mục đầu tư của những sinh viên được các công ty tuyển dụng chấp nhận vào năm 2023.
  • Tìm hiểu những điều cơ bản về lập kế hoạch danh mục đầu tư.
  • Tìm hiểu những kiến ​​thức cơ bản và ứng dụng thực tế của ScrollTrigger của GSAP, công cụ đã giành giải thưởng ở nước ngoài năm 2023 và đang được nhiều công ty lớn trong nước sử dụng để sản xuất trang web.
  • Bạn có thể tìm hiểu về Sự kiện Hướng cuộn ở vùng Tiêu đề.
  • Tạo sự kiện trong đó thanh điều hướng phát hiện hướng cuộn và biến mất khi hạ xuống và xuất hiện khi nâng lên.
  • Tạo hoạt ảnh bằng SVG
  • Tạo hiệu ứng hoạt hình di chuột bằng Splitting.js
  • Tạo hoạt ảnh văn bản bằng cách sử dụng thuộc tính Translate 3d
  • Bạn có thể tạo biểu ngữ chạy ở chế độ nền bằng SimplyScroll .
  • Bạn có thể triển khai một trang web tương tác tuyệt đẹp bằng cách sử dụng ScrollTrigger của GSAP .
  • Bạn có thể tạo một Web đáp ứng (chiều rộng tối đa: 1650px) .
  • Bạn có thể tạo một Web đáp ứng (chiều rộng tối đa: 1300px) .
  • Bạn có thể tạo một Web đáp ứng (chiều rộng tối đa: 800px) .
  • Bạn có thể tạo một Web đáp ứng (chiều rộng tối đa: 500px) .
  • Đây là video cập nhật đầu tiên .
  • Hình ảnh động và văn bản xuất hiện khi có scrollTrigger.
  • Đây là video cập nhật thứ 2.
  • Tôi đã tạo một thư viện cuộn dọc theo trục X.
  • 2nd_Update_Video_Web_Phản_hồi
  • Đây là một trang web có khả năng phản hồi với khu vực thư viện cuộn dọc theo trục X.
  • Đây là video cập nhật thứ 3.
  • Hãy tạo một thư viện cuộn dọc theo trục Y.
  • Đây là video cập nhật thứ 4.
  • Hãy tạo một hình ảnh theo dõi con trỏ chuột.
  • Đây là video cập nhật thứ 5.
  • Đây là một tương tác trong đó phần được cố định dọc theo trục Y và các phần phụ được cuộn.
  • Đây là video cập nhật thứ 6.
  • Hãy tạo một thư viện cuộn sang trái và phải dọc theo trục X.
  • Đây là video cập nhật thứ 7.
  • Hãy tạo một nhân vật chào đón bạn khi bạn cuộn trang.
  • Hãy tạo một hình ảnh động văn bản tự động điền vào theo chuyển động của chuột.
  • Hãy tạo hoạt ảnh văn bản lượn sóng bằng clip_path.

  • 8th_1. Đây là video cập nhật.
  • Đây là phương pháp tạo hoạt ảnh cuộn ngang vô hạn và lặp đi lặp lại khi cuộn xuống.
  • Đây là hình ảnh động được tạo ra sao cho hình ảnh đang nổi khi bị xoắn trên trục Z sẽ trở về vị trí ban đầu khi cuộn.

  • 8th_2. Đây là video cập nhật.
  • Một hình ảnh động trong đó văn bản sẽ được tô màu khi bạn cuộn.

  • 9th_1. Đây là video cập nhật.
  • Đây là hoạt ảnh GSAP ScrollTrigger di chuyển một cách trôi chảy khi cuộn.
  • 9th_2. Đây là video cập nhật.
  • Vị trí: Hoạt ảnh xoay dọc theo trục Z bằng Sticky

Hỏi & Đáp dự kiến

H. Tôi có thể học được gì khi tham gia khóa học này?

Bạn có thể hiểu quy trình UI/UX, lập kế hoạch và tạo danh mục đầu tư phù hợp với quy trình đó và nếu bạn hiện là người thực hành, bạn có thể triển khai một trang web phản hồi tương tác và hợp thời trang hơn.

H. Có những bản cập nhật bổ sung nào?

1. Các quy trình UI/UX mà bạn cần biết trong thực tế và cách lập kế hoạch và thiết kế danh mục đầu tư dựa trên chúng

2. Tài liệu tham khảo có thể áp dụng để tạo danh mục đầu tư cho việc làm nhà thiết kế UI/UX, nhà xuất bản web hoặc nhà phát triển front-end

3. Các ví dụ ứng dụng cần thiết để tạo trang web tương tác và hợp thời trang đã được cập nhật.
4. Để học dễ dàng hơn, hãy tham gia phòng trò chuyện mở Jalnan Webdi do J.young điều hành.
Chúng tôi chia sẻ với bạn một số mẹo tuyệt vời về Figma, UI/UX, mã hóa, tạo danh mục đầu tư và liên kết đến các hội thảo trên web miễn phí.

Mở tên phòng chat: Jalnan Webdi
Mã số: jyoung

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

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

  • Dành cho những ai muốn tạo một portfolio chất lượng cao để có thể trúng tuyển vào agency

  • Những ai tò mò về các trường hợp portfolio được chấp nhận vào agency

  • Dành cho những ai muốn tạo một portfolio thời thượng và lộng lẫy

  • Những ai muốn học ScrollTrigger của Gsap

  • Bạn muốn tạo một trang web có tương tác bắt mắt?

  • Dành cho những ai muốn tạo ra các tương tác đẹp mắt thông qua html/css/jQuery hơn là JavaScript phức tạp.

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

  • Cơ bản về HTML/CSS, cơ bản về tạo bố cục, cơ bản về JavaScript

Xin chào
Đây là

8,328

Học viên

329

Đánh giá

224

Trả lời

4.8

Xếp hạng

14

Các khóa học

 안녕하세요? J.young 임자영입니다.

20여년간의 웹디자인 & 앱개발회사를 운영하며, 대학과 전문학교 및 직업훈련기관에서 UI.UX디자인,웹디자인, 웹퍼블리셔, 프론트엔드개발 강의를 하고 있습니다.

디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로, 전문가(UI.UX디자이너/ 퍼블리셔/코딩하는 디자이너) 양성을 위해!!
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오 제작! 강의로 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.

그런 만큼... 많은 제자들이 실무자로써의 그 역량을 발휘하고 있습니다.

-UI/UX디자이너, 퍼블리셔, 프론트엔드개발자가 되고 싶어도 어디서 부터
어떻게 시작할지 막막하신 분들..
- 이직을 위한 정규 코스 학원을 다니고 싶어도 직장 생활로 인해 엄두도 못 내시는 분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 HTML/CSS기초는 배웠지만 -
도통...웹 퍼블리싱 개발 구현이란 남의 이야기이신 분들....

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

* 오픈채팅방운영

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.

오픈채팅방명 : 잘난웹디
코드 : jyoung

 

실무경력

- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장


- 현) UIUX & 웹포트폴리오 강의 진행 중(실무 진출 90프로 이상)

 

감사합니다^^ 


운영중인유튜브

잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ

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

Tất cả

76 bài giảng ∙ (12giờ 1phú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ả

39 đánh giá

5.0

39 đánh giá

  • yobab07121584님의 프로필 이미지
    yobab07121584

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    6% đã tham gia

    I am a student who has taken several of Mr. J.young's lectures. I think gsap scroll trigger is one of the libraries that designers who like interaction cannot miss. However, JavaScript is somewhat difficult for designers, but the teacher explained it as easily as possible. There are several people who teach gsap at Inflearn, but the reason I liked this lecture the most is that it is familiar to designers. Especially, since I learned based on trendy cyan, my desire to learn increased even more ㅎㅎ 👉 I definitely recommend it to designers who are interested in coding. 👉 I think it will be helpful for those who are creating a new portfolio this time. 👉 I think it will definitely be applied to practical work for those who are simply interested. Thank you so much for making such a great lecture.💕 Above all, I appreciate that you give me your attention as quickly as possible when I ask you a question.

    • jyoung
      Giảng viên

      Sir~ Thank you so much for your sincere course review. I am also a designer...I think it is inevitable that I want to teach only when I like the design~~ If the design is pretty...I get the desire and motivation to make it.. Thank you again for your sincere course review^^ Have a nice weekend^^ J.young Dream

  • onlyjuhee7058님의 프로필 이미지
    onlyjuhee7058

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    15% đã tham gia

    • tomango님의 프로필 이미지
      tomango

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      30% đã tham gia

      • merrybmc님의 프로필 이미지
        merrybmc

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        While preparing for a web publisher job, what I always worried about was 'How can I create a portfolio that stands out?' I really wanted to include interaction effects, which are a current trend, but I couldn't grasp it at all by self-studying... I searched YouTube, but something always seemed missing, and I was struggling for a long time. Then I took this lecture by J.young, and I want to say it's truly a life-changing course! Instead of just having us follow along with animations using ScrollTrigger, they helped us get a 'feel' for how to apply them in an actual portfolio. The examples were so trendy that even while following the lecture to create them, I naturally thought, 'Wow, I need to use this in my portfolio right away!' Especially since the instructor explained everything step-by-step at a beginner's level, even someone like me, who's a coding novice (?), could comfortably finish the course. When I got stuck in the middle, I was so grateful that they kindly answered my questions when I posted them in the community. Thanks to that, as I applied wonderful interactions one by one to my own portfolio, I even gained confidence, thinking, 'Ah, I can do things like this too!' Now, my completely plain portfolio has transformed into a dynamic website that is vibrant and can really grab viewers' attention. This kind of lecture is truly the best, to the point where I want to keep it to myself! Instructor, thank you so much for the great lecture, and I look forward to the next one 😊💖

        • yebullove0106님의 프로필 이미지
          yebullove0106

          Đánh giá 1

          Đánh giá trung bình 5.0

          5

          14% đã tham gia

          What are the differences between the lectures you have on YouTube and the GSAP lectures on Inflearn?

          • jyoung
            Giảng viên

            Hello, Ms. Kang Ye-bin. There is a 30% overlap with the YouTube lectures, but the content that allows you to actually complete the entire portfolio is only available in this course. You can complete your portfolio just by following along with this course. Thank you. Jay Young Dream

        1.405.028 ₫

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

        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!