
GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
J.영
GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!
Basic
HTML/CSS, scrolltrigger, gsap
This is a lecture that creates and implements the actual website main page as an application course for the Dopda site production. It is a lecture that completes the web page production by modifying and supplementing each coding, adding Fixed header, Image Slider, Mobile navigation, Scroll Animation, and responsiveness, from the simple structure coding centered on the layout and animation of the Dopda site Basic Course that was opened as a free lecture! (You can see that the learning effect is greater if you take this lecture after listening to the Dopda-Basic Course.)
152 learners
FixHeader jQuery that changes design when scrolling
Scroll event animation jQuery (scrolla.js) utilization and application
Image slides with animation using jQuery (slick.js) and its application
Creating a GNB navBar that appears when the Open button is clicked
Now that you understand layout and animation creation, let's move on to implementing some more active elements.
You can learn everything you need to know about jQuery, from the basics to its use in web page creation, and we'll help you create stunning, colorful web pages in a short period of time by utilizing libraries and plugins.
You can acquire both work skills and core practical know-how through webpage lectures comprised of interactive elements essential for practical work.
The real deal is speed and scalability.
Only those who can quickly complete high-quality projects within the given timeframe will be recognized and treated as skilled designers and publishers.
Let's learn the know-how to quickly create a gorgeous website by creating an Application Course together with the help site!





For a smoother learning experience, join the Jalnan Webdi open chat room run by J.young.
We'll share some great tips and free webinar links related to Figma, UI/UX, coding, and portfolio creation.
- Open chat room name: Jalnan Webdi
- Code: jyoung
Who is this course right for?
Those who have basic knowledge of HTML/CSS but are afraid of creating web pages
Anyone who wants to quickly create a portfolio for employment as a web designer or publisher
Anyone who wants to learn the jQuery source code needed on the web
Anyone who wants to easily implement interactive web required in practice without basic JavaScript knowledge
Currently a graphic designer who wants to transition to a front-end developer or publisher
Anyone who wants to improve their work skills as a web designer
Anyone who wants to quickly implement an interactive web with scalability in mind
Need to know before starting?
HTML/CSS Basics
Practice! Website Creation! Step by Step! ('Help' Website Creation_Basic Course) You can take the following course after listening to the lecture.
8,794
Learners
354
Reviews
227
Answers
4.8
Rating
14
Courses
안녕하세요? 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
All
17 lectures ∙ (2hr 54min)
Course Materials:
All
5 reviews
5.0
5 reviews
Reviews 8
∙
Average Rating 5.0
5
제이영님!!!! 강의는 다 듣고있습니당 ㅋㅋㅋ 유투브로 무료강의 완강하고 실제 돕다 사이트처럼 슬라이드랑 반응형 해보고싶엇는데 깔끔한 강의 감사드려요!!! 편집이 타이트 하고 깔끔해서 직접 대면으로 강의 하는것처럼 내용이 바로바로 들려서 너무 좋아요!!! 앞으로도 좋은강의 많이 부탁드려요!!! 감사합니다1!!
janey23님 이번에도 역시 빠르게 완강하셨군요 감사드립니다. janey23님 수강평을 읽고나니 ... 더 열심히 좋은 홈페이지로 강좌를 올려드려야겠다는 욕심이 생깁니다. 다시 한번 감사드리구요... 오늘도 좋은 하루 되십시요^^ J.young드림
Reviews 3
∙
Average Rating 5.0
5
돕다 베이직 강의 부터 어플리케이션 강의 까지 넘 좋은 강의 였습니다. 기술위주로 흐르다 보면 지루 할 수 있는데 직접 같이 홈페이지를 만들다 보니 확실히 많은 습득이 이루어지는거 같아요.^^ html/css 코딩 뿐 아니라 크롬 개발자모드로 유지보수(?) 하는 부분까지 쭉 접하게 되어 전체적인 흐름을 알게되어 너무 좋았습니다. 추가로 디테일한 부분(서브메뉴, 모바일 서브 메뉴 등)의 추가 강의도 생기면 좋겠네요 명품 강의 감사합니다.
석문님 감사합니다. 여러가지로 도움이 되시고 좋으셨다니 제가 정말 기쁩니다~~ 현재도 강의를 준비중에 있으니...더 많은 것을 배우실 수 있도록 준비하여 뵙도록 하겠습니다 감사합니다^^
Reviews 7
∙
Average Rating 5.0
$17.60
Check out other courses by the instructor!
Explore other courses in the same field!