강의

멘토링

로드맵

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,499

受講生

330

受講レビュー

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% 受講後に作成

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

      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

    受講レビュー 1

    平均評価 5.0

    5

    15% 受講後に作成

    • tomango님의 프로필 이미지
      tomango

      受講レビュー 1

      平均評価 5.0

      5

      30% 受講後に作成

      • merrybmc님의 프로필 이미지
        merrybmc

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        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

          受講レビュー 1

          平均評価 5.0

          5

          14% 受講後に作成

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

          • jyoung
            知識共有者

            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

        ¥8,014

        jyoungの他の講座

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

        似ている講座

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