inflearn logo

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á

360 học viên

Độ khó Cơ bản

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

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

Tin tức

2 bài viết

  • jyoung님의 프로필 이미지

    Xin chào 😊
    Tôi là giảng viên J.Young.

    Cuối cùng tôi cũng có thể gửi lời chào đến các bạn thông qua một bài giảng mới.


    🚀 [Hoàn thành Web Portfolio phản hồi trong 4 giờ với Figma MCP × AI]

    Khóa học lần này không đơn thuần là một "khóa học lập trình".

    Từ thiết kế mà AI có thể hiểu được,
    đến Vibe Coding sử dụng AI,
    và quy trình hoàn thiện Full-stack dẫn đến việc triển khai thực tế
    .


    🎯 Nội dung cốt lõi bạn sẽ học trong khóa học này

    Thiết kế hệ thống sử dụng Figma AutoLayout
    Phương pháp thiết kế cấu trúc đáp ứng (Responsive)
    Đăng ký Variable → Token hóa → Tạo cấu trúc thiết kế mà AI có thể hiểu được
    AI Vibe Coding thông qua liên kết máy chủ Figma MCP
    Cách hiện thực hóa thiết kế chính xác đến từng pixel
    Quy trình thực tế dẫn đến việc triển khai (Deployment)

    Không chỉ đơn thuần là "AI viết code thay cho bạn".

    Chúng ta sẽ cùng nhau rèn luyện khả năng tự phát hiện lỗi của AI, thấu hiểu cấu trúc,
    và thậm chí là tái cấu trúc (refactoring) thành một trang web phản hồi tối ưu.


    👩‍💻 Đề xuất cho những đối tượng sau đây

    • 🎨 Những ai muốn hiện thực hóa thiết kế của mình bằng Vibe Coding một cách trọn vẹn nhất

    • 🧠 Những người muốn trở thành nhà thiết kế full-stack có khả năng làm mọi việc từ thiết kế đến phát triển và triển khai.

    • 🔥 Những ai muốn học bài bản các tính năng nâng cao của Figma

    • 💻 Người mới bắt đầu học Front-end muốn tìm hiểu từ HTML / CSS / JavaScript / Tailwind cho đến React

    • Những ai muốn tạo một danh mục sản phẩm (portfolio) web phản hồi có tính tương tác và độ hoàn thiện cao

    • Những người muốn sử dụng AI để nâng cao năng suất công việc lên gấp 5 lần trở lên


    📘 Phương pháp học tập

    Tất cả quá trình đều được sắp xếp một cách hệ thống trên Notion.
    Từ thiết kế → thực hiện → chỉnh sửa → đến triển khai,
    nội dung được cấu trúc để bạn có thể tự ôn tập và học đi học lại nhiều lần.


    Trong thời đại AI,
    giờ đây người có năng lực cạnh tranh không phải là "người giỏi lập trình"
    mà là người tạo ra kết quả nhanh nhất cùng với AI.

    Trong vòng 4 giờ,
    hãy nâng tầm danh mục hồ sơ năng lực (portfolio) của bạn lên một bước mới.

    Hẹn gặp lại bạn trong khóa học.

    Cảm ơn bạn.
    Thân ái, Giảng viên J.Young

    0
  • jyoung님의 프로필 이미지

    Đã chỉnh sửa

    Xin chào? Đây là người hướng dẫn J.young .

    Trong thực tế! Bài giảng tạo portfolio bằng ScrollTrigger
    Video cập nhật thứ 2 cũng được sản xuất dưới dạng web đáp ứng và tiếp theo là các bản cập nhật thứ 3 đến thứ 7 .
    Chúng tôi đã tiến hành như sau.
    Vui lòng kiểm tra nó và chúng tôi hy vọng nó sẽ giúp ích rất nhiều cho việc tạo danh mục đầu tư và công việc thực tế của bạn.
    Chúc Chuseok hạnh phúc và thịnh vượng hơn~
    Cảm ơn

    J.youngGiấc mơ

    Cập nhật kết quả video =>
    - Thứ 2: Cập nhật bổ sung sản xuất thư viện đáp ứng video
    image
    -3rd: Tạo thư viện cuộn dọc theo trục Y image

    -4: Tạo hình ảnh theo con trỏ chuột
    image

    -5th: Sản xuất tương tác trong đó các phần phụ được cuộn dọc theo trục Y trong một phần cố định
    image
    - Thứ 6: Tạo bộ sưu tập cuộn và lắc sang trái và phải trên trục X
    image

    Thứ 7: Lời chào ký tự khi cuộn/Văn bản có màu tùy theo chuột/Tạo văn bản sóng
    image

    3

1.399.969 ₫