Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Web Development

GSAPのScrollTriggerを活用したポートフォリオ制作

GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう!

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

学習した受講者のレビュー

こんなことが学べます

  • エージェンシー就職のためのポートフォリオ作成ノウハウ

  • GSAPのScrollTriggerアニメーション

  • スクロール方向感知ナビゲーション

  • 時間順にSVGアニメーションを制作

  • HTML/CSS を活用したレイアウト製作技法

  • スクロールに反応するScrolla Animationの制作

  • 多様なデバイスに対応したレスポンシブWebパブリッシング制作

  • JavaScriptライブラリプラグインによる華麗なインタラクション実装

  • 個人ポートフォリオ制作に必要なインタラクティブ制作の秘訣

目立つ、面接官の心をひきつける
ポートフォリオを制作したい人なら注目! 🙋‍♂️

2025年2月大規模企業&エージェンシー合格事例更新中

* 2025年2月 エージェンシー合格ポートフォリオ公開
大規模エージェンシー合格ポートフォリオ事例集中分析(シリーズで公開予定)

* 2024年下半期エージェンシー合格ポートフォリオ公開
大規模エージェンシー合格ポートフォリオ事例集中分析!





2023年、
代理店に合格したポートフォリオの
ケースを見てください!

✨ こんな視覚的なポートフォリオ、みなさんも自分で作ってみたくないですか?


こんな方におすすめです

GSAPのスクロールトリガー
使用してカラフルなサイト
作りたい人

代理店に合格
可能なポートフォリオ
作りたい人

2023年の最新トレンド
フィットカラフルなインタラクション
実装したい方

GSAPスクロールトリガー
Animationの
基礎から
応用まで学びたい方

Webポートフォリオ
制作したいすべての人に🌱

この講義は理論だけで伝える成功就職ガイドではなく、2023年代理店や大規模なインハウスに合格した学生の実際のポートフォリオ事例を見ながら、ポポール制作に必要な要素を学び、成功就職のためのポポールを構想することができます!

GSAPのScrollTriggerを活用したスクロールアニメーションの制作方法だけでなく、ユーザーの目を引くことができ、マウスに反応するインタラクティブWebを制作できます。 HTMLとCSSを活用したレイアウト制作の理解も高めることができます。トレンディなポートフォリオ製作ハニーチップも絶えずアップデートしていきます!


学習内容📚

🫡この講義は!

  • 2023年代理店に合格した学生たちのポートフォリオ事例を見ながら、面接官を感動させるポートフォリオ制作方法を見てみましょう。
  • ポートフォリオの企画に不可欠で必要な部分を見てみましょう。
  • 2023年海外のアワード受賞及び国内の大規模なエージェンシーでウェブサイト制作に熱く活用されるGSAPのScrollTriggerの基礎と実務を学びましょう。
  • Header 領域 Scroll Direction Event を学ぶことができます。
  • ナビゲーションバーがスクロール方向を検出し、降りると消えて上げると表示されるイベントを作成します。
  • SVGを活用したアニメーション制作
  • Splitting.jsを活用したMouseHover効果アニメーションの制作
  • Translate 3d 属性を活用した Text Animation の制作
  • SimplyScrollを活用して、背景に流れるバナーを作成できます。
  • GSAPScrollTriggerを活用したカラフルなインタラクティブWebを実装できます。
  • Responsive Web (max-width: 1650px)製作できます。
  • Responsive Web(max-width: 1300px)製作できます。
  • Responsive Web(max-width: 800px)製作できます。
  • Responsive Web(max-width: 500px)製作できます。
  • 1次_アップデート映像です。
  • scrollTriggerに応答して表示される画像とテキストアニメーション。
  • 2次_更新映像です。
  • X軸にスクロールするギャラリーを制作してみました。
  • セカンド_アップデートビデオレスポンシブWeb
  • X軸にスクロールするギャラリーエリアレスポンシブWeb。
  • 3次_アップデート映像です。
  • Y軸にスクロールするギャラリーを作成してみます。
  • 4次_更新映像です。
  • マウスポインタに従う画像を制作してみます。
  • 5次_アップデート映像です。
  • Y軸にセクション固定され、サブセクションにスクロールするインタラクション。
  • 6次_アップデート映像です。
  • X軸で左右に揺れながらスクロールするギャラリーを製作してみます。
  • 7次_アップデート映像です。
  • スクロール時に挨拶するキャラクターを制作してみます。
  • マウスで塗りつぶされるテキストアニメーションを作成してみます。
  • Clip_pathで波打つテキストアニメーションを作成してみます。

  • 8次_1.アップデート映像です。
  • スクロールを下げると横に無限に繰り返しスクロールするアニメーション制作方法です
  • Z軸に歪んで浮いている画像をスクロール時に所定の位置に来て伸ばすように制作したアニメーションです。

  • 8次_2.アップデート映像です。
  • スクロール時にテキストにカラーが塗りつぶされるアニメーションです。

  • 9次_1.アップデート映像です。
  • スクロール時にシャバンシャバンに進むGSAP ScrollTrigger Animationです
  • 9次_2.アップデート映像です。
  • Position: Sticky を活用した Z 軸に分かれる Animation

予想されるQ&A

Q. この講義を受講すればどんなことを学べますか?

UI/UXプロセスを理解し、それに合った自分にポートフォリオを企画して製作することができ、現在の実務者ならよりトレンディでインタラクティブなレスポンシブウェブを実装できます。

Q. 追加的に更新される内容にはどんなものがありますか?

1. 実務で知るべきUI/UXプロセスとこれに基づいてポートフォリオを企画して設計する方法

2. UI/UXデザイナー、ウェブパブリッシャー、フロントエンド開発者として就職するためのポポール製作に適用できるリファレンス

3.トレンディでインタラクティブなWeb制作に必要なアプリケーション例が更新されます。
4. よりスムーズな学習のために、J.youngが運営する上手なウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連核蜂蜜チップと無料ウェビやリンクなどを共有いたします。

オープンチャットルーム:よく知られたウェブディ
コード:jyoung

こんな方に
おすすめです

学習対象は
誰でしょう?

  • エージェンシーに合格できるようなハイクオリティなポートフォリオを制作したい方

  • エージェンシーに合格したポートフォリオの事例を知りたい方

  • トレンディで華やかなポートフォリオを作成したい方

  • GsapのScrollTriggerを学びたい方

  • インタラクションが華やかなウェブサイトを制作したい方

  • 難しいJavaScriptよりも、html/css/jQueryを通じて華やかなインタラクションを実装したい方

前提知識、
必要でしょうか?

  • HTML/CSS基礎、レイアウト制作基礎、JavaScript基礎

こんにちは
です。

8,240

受講生

326

受講レビュー

224

回答

4.8

講座評価

14

講座

 안녕하세요? 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

カリキュラム

全体

76件 ∙ (12時間 1分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

39件

5.0

39件の受講レビュー

  • yobab07121584님의 프로필 이미지
    yobab07121584

    受講レビュー 4

    平均評価 5.0

    5

    6% 受講後に作成

    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
      知識共有者

      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ơ

  • onlyjuhee7058님의 프로필 이미지
    onlyjuhee7058

    受講レビュー 1

    平均評価 5.0

    5

    15% 受講後に作成

    • tomango님의 프로필 이미지
      tomango

      受講レビュー 1

      平均評価 5.0

      5

      30% 受講後に作成

      • merrybmc님의 프로필 이미지
        merrybmc

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        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 ạ 😊💖

        • yebullove0106님의 프로필 이미지
          yebullove0106

          受講レビュー 1

          平均評価 5.0

          5

          14% 受講後に作成

          Thưa thầy, không biết 강의 선생님 현재 유튜브에 있는 강의와 Inflearn에 올려져있는 이 gsap 강의의 차이점 무엇일까요?

          • jyoung
            知識共有者

            Chào bạn, Kang Ye Bin. Mặc dù có 30% nội dung trùng lặp với bài giảng trên YouTube... Nhưng thực tế, chỉ có bài giảng này mới có nội dung giúp bạn hoàn thành toàn bộ portfolio. Bạn có thể hoàn thành portfolio chỉ bằng cách làm theo bài giảng này. Cảm ơn bạn ^^ J Young Dream

        ¥7,893

        jyoungの他の講座

        知識共有者の他の講座を見てみましょう!

        似ている講座

        同じ分野の他の講座を見てみましょう!