GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
J.영
GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!
Basic
HTML/CSS, scrolltrigger, gsap
BEST
Real! Website Creation! Step by Step! (Daebang Industry_InteractiveWeb)
[Website Creation Step By Step] This is a 3-step lecture, and it is a process of creating the main page of Daebang Industry as it is. It is a lecture that is as difficult as it is fancy, as it is a process of creating and implementing the gorgeous interactive web contained in the site.
(5.0) 13 reviews
235 learners
HTML/CSS
Responsive Web
jQuery
Clone Coding
Interactive Web
Reviews from Early Learners
What you will gain after the course
GNB jQuery showing 2depth on mouse over
FixHeader jQuery that changes design when scrolling
Text Animation jQuery (Splitting.js) Utilization and Application
Scroll event animation jQuery (scrolla.js) usage and application
Image slide with animation jQuery (slick.js) usage and application
If you only know HTML and CSS
Webpage & Interactive Web production OK!
This course covers the three-step process of website creation, replicating the main page of Daebang Industries (https://www.db-dvp.co.kr/). This course will teach you how to create and implement the vibrant interactive web experience found on the site.
Step By Step!
Get started right now.
This course is designed for those with basic knowledge of HTML and CSS, and will proceed by implementing actual web pages . Even without advanced JavaScript and jQuery knowledge, you can quickly create beautiful, vibrant web pages using HTML and CSS- based libraries and plugins . By taking this course, which features essential interactive elements for practical work, you'll gain three benefits: practical expandability, guaranteed skill improvement, and portfolio completion .
1. Creating a header area (GNB, Fixed header)
- GNB jQuery that shows 2 depths when the mouse hovers
- Create a submenu bar that slides smoothly when the mouse hovers over the GNB menu bar.
- Various mouse over effects using virtual selectors (before, after)
- Header jQuery that changes design when scrolling and is fixed at the top
2. Creating a Visual Area (Image Slider)
- Text animation created using Splitting.js
- Creating slide images using Slick .js
- Create slide 'prev', 'next' buttons
- Creating a slide indicator
- Gauge bar animation
-Image segmentation animation
3. Contents_imformation area (Banner Slider)
- Slide animation that doesn't show two at a time with Scrolla.js
- Creating a dot button with CSS
- jQuery that smoothly moves to the desired location when the scroll button is clicked
- Various mouse over effects (underline effect, border effect, image scale effect) using virtual selectors (before, after)
4. Contents_video area & Contents_news area
- Scroll animation jQuery (scrolla.js)
- Import YouTube videos
- Apply gradient color
- Apply motion animation
After the lecture is over
What you get :D
1. Solid layout production skills
When creating a web page, creating an accurate layout based on HTML and CSS is paramount . Even if you have a basic understanding of HTML and CSS but no sense of layout design , if you diligently follow this lecture, which thoroughly covers the basics , you will soon feel that you have a solid foundation in layout creation !
2. Increase work productivity!
To increase your work productivity, you need to be able to quickly create interactive websites using libraries and plugins. This course will cover everything from webpage layout creation to responsive page creation. You'll also learn practical skills like scripts, plugins, and animations to create webpages. By consistently practicing while attending the lectures, you'll find yourself improving your work skills in no time!
3. High-quality portfolio
A high-quality portfolio is one of the most effective tools for demonstrating your professional capabilities and seizing new opportunities. By attending lectures and practicing, you'll build your own portfolio. By consistently implementing web pages in subsequent website creation workshops, in addition to this lecture, you'll be able to build a portfolio that will become your most valuable weapon in your job search.
4. Open chat room operation
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
html, css, html/css, website, website, coding, jquery, jQuery, layout, interactive web, web design, portfolio, publishing
Recommended for
these people
Who is this course right for?
1. People who have basic HTML/CSS knowledge but are afraid of creating web pages.
2. Those who want to quickly create a portfolio for employment as a web designer or publisher
3. Those who want to learn the JQuery source code required on the web
4. Those who want to easily implement interactive web required in practice without basic JavaScript knowledge
5. Those who are currently graphic designers and want to transition to a front-end developer or publisher
6. As a web designer, you want to improve your work skills.
7. Those who want to quickly implement an interactive web that takes scalability into account
Need to know before starting?
HTML/CSS
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
Co-instructor
Curriculum
All
29 lectures ∙ (4hr 50min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
13 reviews
5.0
13 reviews
LHooOooReviews 1
∙
Average Rating 5.0
5
100% enrolled프론트엔드 개발을 혼자서 배워보고 있는 중1인데 무료 강의들은 괜찮은 강의들이 몇개없어서 금방 보고 끝나서 유료강의를 찾았는데 대방산업개발사이트가 단지 멋져보인다는 이유로 시작했는데 자세하게 알려주시고 무료강의에서는 잘 배울수없었던 부분까지 짚어주셔서 재밌게 배웠습니다 :) 너무 재밌는 강의였고 열심히 하시면 중학교 학생분들도 충분히 완강 하실수 있으실것같아요! J.영님이 학교과제 부탁에도 친절히 응해주시고 질문답변도 꾸준히 해주셔서 너무 좋았습니다 !
- J.영Instructor
임현우님 ~~ 제가 박수 갈채를 보냅니다^^ 부모님께서 매우 든든하실듯요.... 대방산업이면...성인들도 어려울 수 있는데 아주 재밌게 완강해냈다니 정말 정말 대단합니다~~ 한마디로 짱!!!입니다. 제가 고맙구요~~~ 공부하다 궁금한점 있으면 언제든....글 남겨놓으시고.. 응원 또 응원합니다^^ 오늘도 즐건 오후되고..주말도 행복하게 보내세요^^ J.young드림^^
- 김혜경
Reviews 4
∙
Average Rating 4.8
5
97% enrolledJ.영 강사님 강의는 모두 수강해서 완강했어요^^ 이번 대방산업 웹사이트는 화려한 인터렉티브 웹을 그대로 구현할 수 있어서 다른 강좌보다 재미있게 잘 따라했어요. 무엇보다 여기서 배운 다양한 제이쿼리 애니메이션으로 제 포트폴리오 사이트를 레벨업 해야겠다는 의지가 활활 불타오르네요!! 다음에는 모바일앱 제작 위주로의 강의도 개설해주시면 많은 도움이 될것 같아요. 코로나19로 온라인으로 힘들게 독학하는 수많은 사람들에게 J.영님의 좋은 강의 많이 부탁드려요. 감사합니다.
- baam baam
Reviews 4
∙
Average Rating 5.0
$37.40
jyoung's other courses
Check out other courses by the instructor!
.png?f=avif&w=420)
Similar courses
Explore other courses in the same field!
![[환상의족발] 디자인부터 코딩까지Course Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Course Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]Course Thumbnail](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)