강의

멘토링

커뮤니티

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) 41 đánh giá

359 học viên

Độ khó Cơ bản

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

  • jyoung
HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web

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

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

5.0

5.0

너굴이

30% đã tham gia

Tôi là một web publisher hiện tại, nhưng có vẻ như tôi không thể chuyển việc tốt vì portfolio của tôi còn nhiều thiếu sót. Tôi đang chăm chỉ nghe giảng và tôi sẽ hoàn thành khóa học này để tạo một trang web portfolio không chỉ với mục đích chuyển việc mà còn có thể thể hiện câu chuyện của riêng tôi và các tương tác tuyệt vời. Cảm ơn vì đã giải thích một cách thú vị và dễ hiểu. Tôi nhất định sẽ chuyển việc thành công..!

5.0

제니

100% đã tham gia

Khi tham gia khóa học này, tôi đã học được nhiều điều về việc tạo hiệu ứng cuộn (scroll animation) sử dụng ScrollTrigger của GSAP. Nội dung bài giảng rất thực tế nên đã giúp ích rất nhiều trong việc tạo ra các trang web tương tác có thể thu hút sự chú ý của người dùng. Sự hiểu biết về việc tạo bố cục sử dụng HTML và CSS cũng tăng lên, giúp tôi có thể trang trí portfolio cá nhân của mình đẹp mắt hơn. Đặc biệt, việc các mẹo hay (tips) để tạo portfolio hợp thời trang liên tục được cập nhật, giúp tôi có thể áp dụng ngay vào thực tế công việc, điều này thực sự rất hữu ích. Nhờ những lời giải thích tốt bụng của giảng viên và phương pháp dạy tập trung vào thực hành, tôi đã có thể tự tin bắt tay vào các dự án.

5.0

마르크스

25% đã tham gia

Mức độ hiểu biết về việc triển khai animation của tôi đã tăng lên đáng kể. Không chỉ dạy ngữ pháp đơn thuần, mà còn giải thích chi tiết cách áp dụng thực tế thông qua các ví dụ, điều này đã giúp ích rất nhiều cho việc nâng cao kỹ năng của tôi. Cấu trúc được thiết kế rất dễ theo kịp, ngay cả đối với người không chuyên như tôi, nên tôi muốn giới thiệu nó cho bất kỳ ai! Điều tuyệt vời nhất là tôi có thể chọn xem những phần mà tôi tò mò muốn biết!

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

  • 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ếu bạn muốn tạo ra một
portfolio nổi bật và có thể chinh phục trái tim của các nhà tuyển dụng thì hãy chú ý! 🙋‍♂️

Đang cập nhật các trường hợp đậu vào doanh nghiệp lớn & agency tháng 2 năm 2025

* Công khai portfolio đậu agency tháng 2 năm 2025
Phân tích tập trung các trường hợp portfolio đậu agency quy mô lớn (dự kiến công khai theo series)

* Công khai portfolio đỗ agency nửa cuối năm 2024
Phân tích tập trung các trường hợp portfolio đỗ agency quy mô lớn!





Năm 2023,
Tìm hiểu
các ví dụ portfolio đã được chấp nhận vào agency!

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


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

Sử dụng scroll Trigger của GSAP để
tạo ra trang web ấn tượng
dành cho những ai muốn

Những ai muốn tạo ra
portfolio có thể đậu
vào agency

Những người muốn thực hiện
tương tác hấp dẫn phù hợp với
xu hướng mới nhất năm 2023

GSAP Scroll Trigger
Animation từ
cơ bản
đến nâng cao dành cho những ai muốn học

Dành cho tất cả những ai
muốn tạo portfolio web 🌱

Khóa học này không chỉ là hướng dẫn thành công trong việc tìm việc bằng lý thuyết, mà bạn có thể học các yếu tố cần thiết để tạo portfolio thông qua việc xem các ví dụ portfolio thực tế của những sinh viên đã đậu vào các agency và công ty in-house lớn năm 2023, và có thể lên ý tưởng cho portfolio để thành công trong việc tìm việc!

Bạn có thể học cách tạo animation cuộn bằng ScrollTrigger của GSAP, đồng thời tạo ra những trang web tương tác thu hút ánh nhìn người dùng và phản ứng với chuột. Bạn cũng có thể nâng cao hiểu biết về việc tạo layout bằng HTML và CSS. Chúng tôi cũng sẽ liên tục cập nhật những mẹo hay để tạo portfolio trendy!


Nội dung học tập 📚

🫡 Khóa học này đây!

  • Hãy cùng tìm hiểu cách tạo ra portfolio gây ấn tượng với nhà tuyển dụng thông qua việc xem xét các ví dụ portfolio của những sinh viên đã trúng tuyển vào các agency năm 2023.
  • Hãy tìm hiểu những phần cần thiết không thể thiếu trong việc lập kế hoạch portfolio.
  • Năm 2023, hãy học những kiến thức cơ bản và thực tế về ScrollTrigger của GSAP - công cụ đang được sử dụng rất phổ biến trong việc tạo website tại các agency lớn trong nước và đã giành được nhiều giải thưởng quốc tế.
  • Bạn có thể học Header 영역 Scroll Direction Event.
  • Thanh điều hướng sẽ phát hiện hướng cuộn, biến mất khi cuộn xuống và xuất hiện khi cuộn lên để tạo sự kiện.
  • Tạo Animation sử dụng SVG
  • Tạo Animation hiệu ứng MouseHover sử dụng Splitting.js
  • Tạo Text Animation sử dụng thuộc tính 3d
  • Bạn có thể tạo banner chạy nền bằng cách sử dụng SimplyScroll.
  • Bạn có thể triển khai các trang web tương tác ấn tượng bằng cách sử dụng ScrollTrigger của GSAP.
  • Responsive Web(max-width: 1650px) có thể được tạo ra.
  • Responsive Web(max-width: 1300px) có thể được tạo ra.
  • Responsive Web(max-width: 800px) có thể được tạo ra.
  • Responsive Web(max-width: 500px) có thể được tạo ra.
  • Video cập nhật lần 1 đây ạ.
  • scrollTrigger phản ứng để hiển thị hình ảnh và hoạt ảnh văn bản.
  • Đây là video cập nhật lần thứ 2.
  • Tôi đã tạo một gallery cuộn theo trục X.
  • Video cập nhật lần 2_Web responsive
  • Đây là gallery cuộn theo trục X cho web responsive.
  • Đây là video cập nhật lần thứ 3.
  • Tạo một gallery cuộn theo trục Y.
  • Đây là video cập nhật lần thứ 4.
  • Tạo hình ảnh theo con trỏ chuột.
  • Đây là video cập nhật lần thứ 5.
  • Đây là tương tác mà phần được cố định theo trục Y và các phần phụ được cuộn.
  • Đây là video cập nhật lần thứ 6.
  • Tạo một gallery cuộn với hiệu ứng lắc lư trái phải theo trục X.
  • Đây là video cập nhật lần thứ 7.
  • Chúng ta sẽ tạo một nhân vật chào hỏi khi cuộn trang.
  • Chúng ta sẽ tạo hiệu ứng hoạt hình văn bản được tô đầy theo chuyển động của chuột.
  • Tạo hiệu ứng hoạt hình văn bản sóng sánh bằng Clip_path.

  • Đây là video cập nhật lần thứ 8_1.
  • Đây là phương pháp tạo animation cuộn ngang vô hạn khi cuộn xuống
  • Đây là animation được tạo để khi cuộn trang, hình ảnh đang xoay và lơ lửng theo trục Z sẽ về đúng vị trí và được duỗi thẳng ra.

  • Đây là video cập nhật lần thứ 8_2.
  • Đây là animation tô màu văn bản khi cuộn trang.

  • Đây là video cập nhật lần thứ 9_1.
  • Đây là GSAP ScrollTrigger Animation diễn ra một cách mượt mà khi cuộn trang
  • Đây là video cập nhật lần thứ 9_2.
  • Position: Sticky được sử dụng để tạo Animation xoay theo trục Z

Q&A Dự kiến

Q. Nếu tham gia khóa học này, tôi có thể học được những gì?

Bạn có thể hiểu được quy trình UI/UX, lập kế hoạch và tạo ra portfolio phù hợp với bản thân, và nếu bạn là người đang làm việc thực tế thì có thể triển khai website responsive có tính tương tác và theo xu hướng hiện đại.

Q. Ngoài ra, những nội dung được cập nhật thêm có gì?

1. Quy trình UI/UX cần biết trong thực tế và cách lập kế hoạch, thiết kế portfolio dựa trên quy trình này

2. Tài liệu tham khảo có thể áp dụng để tạo portfolio nhằm xin việc làm vị trí UI/UX Designer, Web Publisher, Frontend Developer

3. Các ví dụ ứng dụng cần thiết để tạo web trendy và tương tác sẽ được cập nhật.
4. Để học tập thuận lợi hơn, nếu bạn tham gia phòng chat mở "잘난웹디" do J.young vận hành,
chúng tôi sẽ chia sẻ các mẹo hữu ích về Figma, UI.UX, coding, tạo portfolio và link webinar miễn phí.

Tên phòng chat mở: 잘난웹디
Mã: 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à

9,039

Học viên

366

Đánh giá

227

Trả lời

4.8

Xếp hạng

14

Các khóa học

"디자인.개발 포트폴리오 멘토 J.Young입니다."

저는 지난 20년간 웹 디자인 및 앱 개발 회사를 운영하며 현장의 치열함을 몸소 겪어왔습니다. 그 경험을 바탕으로 현재는 대학과 전문 교육 기관에서 UI/UX 디자인부터 프론트엔드 개발까지, 후배 전문가들을 양성하는 데 매진하고 있습니다.

저의 강의 철학은 명확합니다.

  1. 기초부터 실무까지 막힘없는 연결

  2. 현업이 원하는 핵심 기술의 압축

  3. 취업 성공을 부르는 실무형 포트폴리오 완성

어디서부터 시작할지 막막하신 분, 이직을 꿈꾸지만 시간이 부족한 직장인, 그리고 코딩이 남의 이야기처럼 느껴지는 초보자분들까지. 제가 걸어온 20년의 길을 여러분의 지름길로 만들어 드리겠습니다. 당당히 실무자로 서는 그날까지, 여러분의 든든한 사수가 되어 최선을 다해 돕겠습니다.

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

실무경력

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


- 현)
- UIUX웹기획/ 디자인/프론트엔드 부트캠프 강사 (이젠DX아카데미 -서초점)
- 디자인.개발 포트폴리오 전문 강의 및 그룹 및 개인 지도

 
* 운영중인 유튜브 (코딩하는 디자이너)

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
강의 질문과 포트폴리오 관련 피드백 드립니다.

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

 

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

Tất cả

75 bài giảng ∙ (10giờ 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ả

41 đánh giá

5.0

41 đánh giá

  • yobab07121584님의 프로필 이미지
    yobab07121584

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    6% đã tham gia

    Tôi là một sinh viên đã nghe một số bài giảng của Giáo sư J.young. Trình kích hoạt cuộn gsap là điều cần phải học đối với những nhà thiết kế thích tương tác. Tôi nghĩ đó là một trong những thư viện. Nhưng đối với các nhà thiết kế, JavaScript là Hơi khó một chút nhưng cô giáo đã giải thích một cách đơn giản nhất có thể. Có một số người dạy bài giảng gsap ở Infron, nhưng tôi thích bài giảng này nhất. Lý do tôi nghe nói là nó thân thiện với nhà thiết kế. Đặc biệt, khi học dựa trên những bản nháp thời thượng, ham muốn học hỏi của tôi càng tăng cao hơn haha. 👉Tôi chắc chắn sẽ giới thiệu nó cho những nhà thiết kế quan tâm đến việc viết mã. 👉Tôi nghĩ nó sẽ hữu ích cho những ai đang tạo danh mục đầu tư mới để lắng nghe. 👉Tôi nghĩ những ai nghe chỉ vì thích thú chắc chắn sẽ tìm được ứng dụng thực tế. Cảm ơn bạn rất nhiều vì đã tạo ra một khóa học tuyệt vời.💕 Trên hết, cảm ơn bạn đã trả lời nhanh nhất có thể khi tôi có câu hỏi.

    • jyoung
      Giảng viên

      Cảm ơn bạn rất nhiều vì đánh giá chân thành của bạn. Tôi cũng xuất thân là một nhà thiết kế... Tôi nghĩ rằng việc tôi phải thích thiết kế đó trước khi muốn thuyết trình là điều không thể tránh khỏi~~ Nếu thiết kế đẹp, bạn sẽ có khát khao và động lực để thực hiện nó. Một lần nữa xin cảm ơn lời nhận xét chân thành của bạn ^^ Chúc bạn cuối tuần vui vẻ ^^ J.youngGiấc mơ

  • jyjl825568님의 프로필 이미지
    jyjl825568

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    • 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

          Khi chuẩn bị xin việc làm web publisher, điều tôi luôn trăn trở là 'Làm thế nào để tạo ra một portfolio khác biệt so với người khác?'. Tôi rất muốn thêm hiệu ứng tương tác, vốn là xu hướng hiện nay, nhưng tự học thì không sao nắm bắt được cảm giác... Dù tìm kiếm trên YouTube nhưng cảm giác thiếu sót gì đó, nên tôi đã lạc lõng một thời gian dài. Thế rồi, tôi đã học được khóa học này của thầy J.young, và thực sự muốn nói rằng đây là khóa học cuộc đời! Khóa học không chỉ đơn giản là bắt chước cách sử dụng ScrollTrigger để tạo animation, mà còn giúp tôi nắm bắt được 'cảm giác' về cách ứng dụng chúng vào portfolio thực tế. Các ví dụ cũng rất trendy, nên trong lúc làm theo bài giảng, tôi đã không ngừng nghĩ 'Wow, cái này phải dùng ngay cho portfolio của mình!'. Đặc biệt, vì giảng viên giải thích từng chút một rất phù hợp với người mới bắt đầu, nên ngay cả những người 'mù code'(?) như tôi cũng có thể hoàn thành khóa học một cách thoải mái. Khi bị vướng mắc giữa chừng, tôi đăng câu hỏi lên cộng đồng và nhận được những câu trả lời rất nhiệt tình, tôi rất biết ơn. Nhờ đó, tôi đã tự mình áp dụng từng hiệu ứng tương tác tuyệt vời vào portfolio của mình và thậm chí còn có được sự tự tin 'À, mình cũng có thể làm được những điều như thế này!'. Giờ đây, portfolio từng rất tẻ nhạt của tôi đã trở nên sống động và thu hút ánh nhìn của người xem một cách mạnh mẽ. Khóa học này, thực sự là tuyệt vời đến mức chỉ muốn giữ riêng cho mình thôi! Giảng viên ơi, xin chân thành cảm ơn vì khóa học tuyệt vời này, và tôi rất mong chờ khóa học tiếp theo ạ 😊💖

          1.381.331 ₫

          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!