inflearn logo
inflearn logo

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

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

難易度 初級

受講期間 無制限

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
날개 달린 동전

講座 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

マーケティングパートナーズ

講座 추천하고 성장과 수익을 만들어 보세요!

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

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

5.0

5.0

너굴이

30% 受講後に作成

現役のウェブパブリッシャーですが、私のポートフォリオはまだまだ不足しているため、転職がなかなかうまくいっていません。講義を 열심히 聞いており、この講義を必ず最後まで受講して、転職だけが目的ではなく、私だけのストーリーと素敵なインタラクションを見せられるポートフォリオサイトを作ろうと思っています。面白く分かりやすく説明していただきありがとうございます。必ず転職を成功させます…!

5.0

제니

100% 受講後に作成

この講座を受講して、GSAPのScrollTriggerを活用したスクロールアニメーションの制作について多くのことを学びました。 講義の内容が実践的で、実際にユーザーの目を引くことができるインタラクティブなウェブサイトを作る上で大きな助けになりました。 HTMLとCSSを活用したレイアウト制作に関する理解も深まり、自分だけのポートフォリオをより素敵に飾ることができるようになりました。特に、トレンディなポートフォリオ制作の秘訣が常にアップデートされて実務にすぐに適用できる点が本当に有益でした。 講師のKindな説明と実習中心の授業のおかげで、自信を持ってプロジェクトに取り組めるようになりました。

5.0

마르크스

25% 受講後に作成

アニメーションの実装に関する理解度が格段に上がりました。 単に文法だけを教えてくれるのではなく、実際にどのように活用すべきかを例を通して詳しく説明してくださったので、実力向上に大変役立ちました。 専門外の私でもついていきやすいように構成されているため、誰にでもお勧めしたいです! 一番良かったのは、私が疑問に思っていた部分だけを選んで見られる点です!

受講後に得られること

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

  • GSAPのScrollTriggerアニメーション

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

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

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

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

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

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

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

目に留まり、面接官の心を掴むことができる
ポートフォリオを制作したい人なら注目!🙋‍♂️

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

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

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





2023年、
エージェンシーに合格したポートフォリオ
事例を見てみよう!

✨ このような視覚的なポートフォリオ、皆さんも直接作ってみたくありませんか?


こんな方におすすめです

GSAPのscroll Triggerを
使用して華やかなサイト
制作したい方

エージェンシーに合格が
可能なポートフォリオ
作りたい方

2023年最新トレンドに
合った華やかなインタラクション
実装したい方

GSAP Scroll Trigger
Animationの
基礎から
応用まで 学びたい方

Webポートフォリオを
制作したいすべての方へ 🌱

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

GSAPのScrollTriggerを活用したスクロールアニメーション制作方法だけでなく、ユーザーの目を引くことができ、マウスに反応するインタラクティブなウェブを制作できます。HTMLとCSSを活用したレイアウト制作に対する理解度も高めることができます。トレンディなポートフォリオ制作のコツも継続的にアップデートしてお届けします!


学習内容 📚

🫡 この講義は!

  • 2023年にエージェンシーに合格した学生たちのポートフォリオ事例を見ながら、面接官を感動させるポートフォリオ制作方法を学んでみましょう。
  • ポートフォリオ企画において必須で必要な部分を見てみましょう。
  • 2023年海外のアワード受賞や国内の大規模エージェンシーでウェブサイト制作にホットに活用されているGSAPのScrollTriggerの基礎と実務を学んでみましょう。
  • Header領域のScroll Direction Eventを学ぶことができます。
  • ナビゲーションバーがスクロール方向を検知して、下にスクロールする時は消え、上にスクロールする時は現れるイベントを作ります。
  • SVGを活用したAnimation制作
  • Splitting.jsを活用したMouseHover効果Animation制作
  • 3dプロパティを活用したText Animation制作
  • SimplyScrollを活用して背景に流れるバナーを制作することができます。
  • GSAPScrollTriggerを活用した華やかなインタラクティブウェブを実装することができます。
  • Responsive Web(max-width: 1650px) を制作することができます。
  • Responsive Web(max-width: 1300px) を制作できます。
  • Responsive Web(max-width: 800px) を制作できます。
  • Responsive Web(max-width: 500px)を制作できます。
  • 1次アップデート動画です。
  • scrollTriggerに反応して現れる画像とテキストアニメーションです。
  • 2次アップデート動画です。
  • X軸にスクロールするギャラリーを制作してみました。
  • 2차_アップデート動画 レスポンシブウェブ
  • X軸にスクロールするギャラリー領域のレスポンシブウェブです。
  • 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プロセスを理解することができ、それに合わせた自分のポートフォリオを企画して制作することができ、現在実務者であればより トレンディでインタラクティブなレスポンシブWebを実装することができます。

Q. 追加でアップデートされる内容にはどのようなものがありますか?

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

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

3. トレンディでインタラクティブなWeb制作に必要な応用例題がアップデートされます。
4. よりスムーズな学習のため、J.youngが運営する잘난웹디オープンチャットルームに参加していただくと、
Figma、UI.UX、コーディング、ポートフォリオ制作関連の極秘テクニックや無料ウェビナーリンクなどを共有いたします。

オープンチャットルーム名:잘난웹디
コード:jyoung

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

  • GsapのScrollTriggerを学びたい方

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

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

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

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

こんにちは
jyoungです。

9,112

受講生

367

受講レビュー

227

回答

4.8

講座評価

14

講座

「デザイン・開発ポートフォリオメンターのJ.Youngです。」

私は過去20年間にわたり、ウェブデザインおよびアプリ開発会社を運営しながら、現場の厳しさを身をもって経験してきました。その経験を活かし、現在は大学や専門教育機関でUI/UXデザインからフロントエンド開発まで、後進の専門家育成に邁進しています。

私の講義哲学は明確です。

  1. 基礎から実務まで 滞りのない繋がり

  2. 現場が求める核心技術の凝縮

  3. 就職成功を導く実務型ポートフォリオの完成

何から始めればいいか分からず途方に暮れている方、転職を夢見ているものの時間が足りない社会人の方、そしてコーディングが自分とは無縁の話に感じられる初心者の方まで。私が歩んできた20年の道のりを、皆さんの近道へと変えて差し上げます。堂々と実務家として立てるその日まで、皆さんの心強い教育係(サス)となり、最善を尽くしてサポートいたします。

J.youngがお手伝いいたします!!
また!!学習中にご不明な点がございましたら、コメントを残していただければ
お役に立てるよう最善を尽くして回答させていただきます。

実務経歴

- 2017~現在) Web開発ディレクター
- 2015年~2017年 (株)エリエゼル 総括理事
- 2003年~2015年 (株)アミュージングウェア 総括理事
- 2003年: ソウC&D デザイン室長


- 現)
- UIUXウェブ企画/デザイン/フロントエンド ブートキャンプ講師(Ezen DXアカデミー -瑞草店)
- デザイン・開発ポートフォリオ専門講義およびグループ・個人指導


* 運営中のYouTube(コーディングするデザイナー)

よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ(デキるWebデザイナー)」オープンチャットに参加していただければ、
講義の質問やポートフォリオに関するフィードバックを差し上げます。

- オープンチャット名:잘난웹디
- コード:jyoung

 

もっと見る

カリキュラム

全体

75件 ∙ (10時間 13分)

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

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

受講レビュー

全体

41件

5.0

41件の受講レビュー

  • yobab07121584님의 프로필 이미지
    yobab07121584

    受講レビュー 4

    平均評価 5.0

    5

    6% 受講後に作成

    J.young先生の講義をいくつか聞いた受講生です。 gsapスクロールトリガーはインタラクションが好きなデザイナーには学べない ライブラリの一つだと思います。しかし、デザイナーにとってはJavaScriptが 多少難易度がありますが、先生ができるだけ簡単に説明していただきました。 インフラでgsap講義をしている人は数分いますが、私はこの講義が一番好きです 聞いた理由は、デザイナーになじみがあるということです。 特にトレンディなシアンに基づいて学んでみると、学習の欲求がさらに盛り上がりましたㅎㅎ 👉コーディングに興味があるデザイナーの方には無条件にお勧めします。 👉ポートフォリオを今回新たに作ってくださる方にはぜひ一度聞いてみると役に立つと思います。 👉単純な関心があって聞く方には実務に応用が無条件になると思います。 良い講義を作ってくれてありがとう。💕 何よりも質問したら、できるだけ早く関心をお寄せいただきありがとうございます。

    • jyoung
      知識共有者

      おじさん〜本気の受講坪以上ありがとうございます。 私もデザイナー出身だから…まずはデザイン的に気に入らなければ講義もしたい欲が出るのは仕方ない現象のようです~~ デザインがきれいなら…作ってみたい欲求とやる気が馬鹿になりますよ.. 心からの受講評ありがとうございました^^ 楽しい週末を送ってください^^ J.youngドリーム

  • jyjl825568님의 프로필 이미지
    jyjl825568

    受講レビュー 3

    平均評価 5.0

    5

    31% 受講後に作成

    • merrybmc님의 프로필 이미지
      merrybmc

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      Webパブリッシャーとして就職を準備しながら、いつも悩んでいたのがまさに「どうすれば他の人との差別化できるポートフォリオを作れるか?」でした。最近のトレンドであるインタラクション効果をぜひ入れたかったのですが、独学ではどうしてもコツがつかめず... YouTubeを探してみても、何かが一つずつ抜けている感じで、かなり迷っていました。そんな時にJ.young先生のこの講座を聞くことになり、本当に人生最高の講座だと言いたいです! ScrollTriggerを活用したアニメーションをただ真似させるだけでなく、実際のポートフォリオでどのように応用すればいいのか「コツ」をつかめるように助けてくださいました。例題も本当にトレンディで、講座に沿って作りながらも「わぁ、これ私のポートフォリオにすぐに使おう!」という考えが自然と湧いてきました。 特に講師の方が初心者の目線に合わせて一つ一つ説明してくださるので、私のようなコード初心者(?)も負担なく最後まで完講することができました。途中で詰まった時はコミュニティで質問すると、回答も親切にしてくださってとても感謝しています。おかげで、自分だけのポートフォリオに素敵なインタラクションを一つ一つ適用しながら、「あ、私にもこういうことができるんだ!」という自信まで得ました。 今では、全く面白みがなかった私のポートフォリオが、生き生きとして見る人の視線をぐっと引きつけることができるウェブサイトに変わりました。こういう講座、本当に自分だけ知っていたいほど最高です! 講師の方、良い講座本当にありがとうございます。次の講座も楽しみにしています😊💖

      • onlyjuhee7058님의 프로필 이미지
        onlyjuhee7058

        受講レビュー 1

        平均評価 5.0

        5

        15% 受講後に作成

        • tomango님의 프로필 이미지
          tomango

          受講レビュー 1

          平均評価 5.0

          5

          30% 受講後に作成

          jyoungの他の講座

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

          似ている講座

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

          ¥8,163