GSAPのScrollTriggerを活用したポートフォリオ制作
jyoung
GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう！
Cơ bản
HTML/CSS, scrolltrigger, gsap
BEST
本当！ウェブサイト制作！ Step by Step！ （対バン産業_InteractiveWeb）
[ウェブサイト制作 Step By Step] 3段階講義で、大方産業メインページをそのまま製作してみる過程です。 サイトで盛り込んでいる華やかなインタラクティブウェブをそのまま製作実装してみる過程で華やかな分、難易度のある講義です。
学習した受講者のレビュー
こんなことが学べます
マウスオーバー時に2depthが見えるGNB jQuery
スクロール時にデザインが変更される FixHeader jQuery
テキストアニメーションjQuery（Splitting.js）の活用とアプリケーション
スクロールイベントアニメーションjQuery（scrolla.js）の活用とアプリケーション
アニメーション化された画像スライドjQuery（slick.js）の活用とアプリケーション
HTMLとCSSだけを知っていても
Webページ＆Interative Web制作OK！
本講義はウェブサイト制作Step By Step！ 3段階で大方産業（https://www.db-dvp.co.kr/）メインページをそのまま製作してみる過程です。サイトに盛り込まれた華やかなインタラクティブウェブをそのまま製作実装してみる講座です。
Step By Step!
今すぐ始めましょう。
講義は、HTMLとCSSに関する基本的な知識を持つ方々を対象に、実際のWebページをそのまま実装して進行されます。難しいJavaScriptとjQueryを知らなくても、 HTMLとCSSに基づいてライブラリとプラグインを活用して、短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。実務で必須のインタラクティブ要素で構成されたWebページ講義を聞くと、実務拡張性、スキルアップ保証、ポートフォリオ完成の3つを一度に得ることができます。
1.Header領域を作る（GNB、Fixed header）
- マウスオーバー時に2depthが表示されるGNB jQuery
- GNBメニューバーにマウスホバーシースムーズにスライドするサブメニューバー製作
- 仮想セレクタ（before、after）を利用した多様なマウスオーバー効果
- スクロール時にデザインが変更され、上部に修正される header jQuery
2.Visual領域の製作(Image Slider)
- Splitting .jsを使用して作成したテキストアニメーション
- Slick .jsを使用してスライド画像を作成する
- スライド「prev」、「next」ボタン製作
- スライドインジケーターの製作
- ゲージバーアニメーション
- 画像分割アニメーション
3.Contents_imformation領域(Banner Slider)
- Scrolla.jsで2つずつ見えるスライドアニメーション
- CSSでdotボタンを作る
- スクロールボタンをクリックすると、スムーズに目的の位置に移動するjQuery
- 仮想セレクタを（before、after）利用した多様なマウスオーバー効果（下線効果、ボーダー効果、イメージスケール効果）
4.Contents_videoゾーン＆Contents_newsゾーン
- スクロールアニメーションjQuery（scrolla.js）
- YouTubeビデオのインポート
- グラデーションカラー適用
- Motionアニメーションの適用
講義が終わったら
得るもの：D
1. しっかりしたレイアウト製作実力
Webページ制作のためには、HTMLとCSSをベースにした、正確なレイアウト作成が最も重要です。 HTMLとCSSの基礎はありますが、 Layout Designについて全く感が来ない方も、基礎から丁寧にお知らせする本講義に誠実に従えば、いつのまにかレイアウト制作のしっかりした基本基盤が固まっていることを感じられるでしょう！
2. 業務生産性UP！
業務生産性を向上させるには、ライブラリとプラグインを使用して、短時間でインタラクティブなウェブサイトを実装できる必要があります。本講義では、ウェブページのレイアウト制作からレスポンシブページの製作まで確実に勉強することができ、実務で必要とするスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞いて着実に実習してみると、いつのまにか業務能力がUP！ UP！
3. 高品質ポートフォリオ
仕事の能力を明らかにし、新しい機会をつかむための効果的な準備の1つは、高品質のポートフォリオです。講義を聞いて実習してみると、自分だけのポートフォリオが積み上げられます。本講義だけでなく、以後のウェブサイト制作実習講義を聞きながら着実にWebページを実装してみると、就職で私の最大の武器になってくれるポートフォリオを完成できるはずです。
4. オープンチャット방運営
よりスムーズな学習のために、J.youngが運営するよくあるウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連の核蜂蜜チップと無料ウェビやリンクなどを共有いたします。
オープンチャットルーム：よく知られたウェブディ
コード：jyoung
html, css, html/css, website, ウェブサイト, コーディング
こんな方に
おすすめです
学習対象は
誰でしょう？
1.HTML/CSS基礎はあるがウェブページ制作が恐ろしい方。
2.ウェブデザイナー、パブリッシャーとして就職のために迅速にポートフォリオを制作したい方
3.Webで必要なJQueryソースを身につけたい方
4.JavaScript基礎なしに実務で必要なインタラクティブWebを手軽に実装したい方
5.現在グラフィックデザイナーでフロントエンド開発者やパブリッシャーに転向したい方
6.ウェブデザイナーとして、業務スキルを向上させたい方
7.拡張性を考慮したインタラクティブWebを迅速に実装したい方
前提知識、
必要でしょうか？
HTML /CSS
8,570
受講生
339
受講レビュー
225
回答
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
共同知識共有者
カリキュラム
全体
29件 ∙ (4時間 50分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
13件
5.0
13件の受講レビュー
ihu07182702受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成フロントエンドの開発を一人で学んでいるうちの1つですが、無料の講義はまともな講義がいくつかなかったので、すぐに見て終わって有料講義を見つけましたが、大方産業開発サイトがただ素敵に見えるという理由で始めましたが、詳しく教えてください。わかってくれて楽しく学びました:)おもしろい講義であり、頑張れば中学校の学生の方も十分に頑張っていただけると思います！
- jyoung知識共有者
イム・ヒョンウ~~ 私は拍手を送ります^^ 両親がとても心強いと思います。 大方産業なら…大人も難しいかもしれません。 とても楽しく頑張ったなんて本当に本当にすごいです~~ 一言でちゃん!!!です。 ありがとうございます~~~ 勉強する気になったらいつでも…。 応援また応援します^^ 今日も楽しい午後になって…週末も楽しく過ごしてください^^ J.youngドリーム^^
- winterlove
受講レビュー 4
∙
平均評価 4.8
5
97% 受講後に作成J.ヤング講師の講義はすべて受講して頑張りました^^ 今回の大方産業ウェブサイトは派手なインタラクティブウェブをそのまま実装できるので 他の講座よりも楽しくよくフォローしました。 何よりここで学んだ様々なジェイクエリーアニメーションで 私のポートフォリオサイトをレベルアップしなければならないという意志が活発に燃えますね！ 次に、モバイルアプリ制作中心の講義も開設してください。 たくさん役に立つと思います。 コロナ19でオンラインで厳しく独学する数多くの人に J.ヤングの良い川の多くをお願いします。 ありがとうございます。
- hurbaam1568
受講レビュー 4
∙
平均評価 5.0
- jinfx4205171
受講レビュー 1
∙
平均評価 5.0
￥5,941
jyoungの他の講座
知識共有者の他の講座を見てみましょう！
.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![Bootstrapを活用したレスポンシブWeb制作[実践編]ブートキャンプHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/333141/cover/2e0b10d5-7e3c-4dd9-ace8-b3374cb55007/333141.jpg?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[2025年出題基準] Webデザイン技能士実技試験完全ガイドHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[幻想的な足足]デザインからコーディングまでHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
