
Creating a portfolio using GSAP's ScrollTrigger
jyoung
Let's create an interactive, responsive web portfolio that reacts to scrolling using GSAP's ScrollTrigger!
초급
HTML/CSS, scrolltrigger, gsap
Trong thực tế! Tạo trang web từng bước! Đây là quá trình tạo trang chính của Phomein (https://www.phomein.com/brand/main/main.do). Thông qua quá trình tạo và triển khai trang web tương tác tuyệt đẹp có trong trang web, chúng tôi sẽ dạy cho bạn bí quyết thực tế cốt lõi để tạo các bố cục phức tạp một cách dễ dàng và nhanh chóng ^^
Cách tạo bố cục phù hợp để sử dụng thực tế!
Cách tạo bố cục cuộn toàn trang!
Cách tạo điều hướng GNB có chiều sâu!
Cách đếm số!
Cách tạo slide ảnh có ảnh động!
Cách tạo các hình ảnh động cuộn khác nhau!
Một trang web nơi bạn có thể học bằng cách tự tạo trang web của riêng mình!
Thử thách bản thân với mã hóa bản sao cùng J. Young.
Bạn có thể tạo ra một bố cục trang web thực sự bằng cách tạo ra một bố cục có sẵn!
Bạn có thể học mọi thứ từ những kiến thức cơ bản về jQuery cho đến cách sử dụng để tạo trang web và chúng tôi sẽ giúp bạn tạo ra những trang web đẹp mắt và đầy màu sắc trong thời gian ngắn bằng cách sử dụng nhiều thư viện và plugin khác nhau.
Bạn có thể có được cả kỹ năng làm việc và kiến thức thực tế cốt lõi cùng một lúc thông qua các bài giảng trên trang web bao gồm các yếu tố tương tác cần thiết cho công việc thực tế.
Vấn đề thực sự nằm ở tốc độ và khả năng mở rộng.
Chỉ những người có thể hoàn thành nhanh chóng các dự án chất lượng cao trong khung thời gian nhất định mới được công nhận và coi là nhà thiết kế và nhà xuất bản có tay nghề cao.
Hãy cùng nhau xây dựng một trang web tên miền và tìm hiểu bí quyết để nhanh chóng tạo ra một trang web tuyệt đẹp!
Xin chào? Tôi là J.young.
Trong hơn 20 năm, tôi đã lãnh đạo một nhóm thiết kế tại một công ty thiết kế web và phát triển ứng dụng. Trong thời gian rảnh rỗi, tôi giảng dạy thiết kế UI/UX, thiết kế web, xuất bản web và phát triển front-end tại các trường đại học, trường phổ thông và các cơ sở đào tạo nghề. Mục tiêu của tôi là đào tạo sinh viên chưa có kinh nghiệm thiết kế hoặc lập trình trở thành chuyên gia, bao gồm cả nhà thiết kế và xuất bản web.
Thông qua các khóa học, chúng tôi hướng dẫn học viên tự tin bước vào môi trường làm việc chuyên nghiệp. Kết quả là, nhiều học viên của chúng tôi hiện đang thể hiện năng lực của mình với tư cách là nhà thiết kế và nhà xuất bản.
J.young ở đây để giúp bạn!
Ngoài ra, nếu bạn có bất kỳ câu hỏi nào trong khi học, vui lòng để lại bình luận và tôi sẽ cố gắng hết sức để cung cấp câu trả lời hữu ích.
Để có trải nghiệm học tập dễ dàng hơn, hãy tham gia phòng trò chuyện mở Jalnan Webdi do J.young điều hành.
Chúng tôi sẽ chia sẻ một số mẹo hữu ích và liên kết hội thảo trực tuyến miễn phí liên quan đến Figma, UI/UX, mã hóa và tạo danh mục đầu tư.
- Tên phòng chat mở: Jalnan Webdi
- Mã: jyoung
Khóa học này dành cho ai?
Những người có kiến thức cơ bản về HTML/CSS nhưng ngại tạo trang web
Bất kỳ ai muốn nhanh chóng tạo hồ sơ xin việc làm nhà thiết kế web hoặc nhà xuất bản
Ai muốn học mã nguồn jQuery cần thiết trên web
Bất kỳ ai muốn dễ dàng triển khai một trang web tương tác cần thiết trong thực tế mà không cần kiến thức cơ bản về JavaScript
Những người hiện đang là nhà thiết kế đồ họa và muốn chuyển sang làm nhà phát triển hoặc nhà xuất bản front-end
Bất cứ ai muốn cải thiện kỹ năng làm việc của mình với tư cách là một nhà thiết kế web
Bất kỳ ai muốn nhanh chóng triển khai một trang web tương tác có tính đến khả năng mở rộng
8,499
Học viên
330
Đánh giá
224
Trả lời
4.8
Xếp hạng
14
Các khóa học
안녕하세요? 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
Tất cả
16 bài giảng ∙ (2giờ 31phút)
Tài liệu khóa học:
Tất cả
4 đánh giá
3.5
4 đánh giá
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
great.
Thank you for your class review, Mr. Joo Pil-gyu. I hope you study hard and develop the skills to create interactive web. Thank you~ J.young Dream
Thank you for your course review, Mr. Joo Pil-gyu. If you have completed the domain, I highly recommend Musein and Daebang Interactive Web. I think it will be helpful for understanding the layout box structure, and for creating responsive web and interactive web, and for using it in web portfolios. Good luck with your studies~~ Thank you^^ J.young Dream
Đánh giá 1
∙
Đánh giá trung bình 3.0
3
It would be nice if you could explain more about the library and how to download and apply it. (slick and fullpage) The library description ends with the attached file and a little explanation, but it leaves a lot to be desired. The lecture is fast-paced because the term is edited every time it is spoken, but it can be adjusted to fit if the speed is slowed down. However, the code for using fullpage and transition is simple, so it is easy to use. And if there was a file with only the library added instead of a completed file, it would have been much cleaner to follow the code. Thank you for the great lecture.
Đánh giá 1
∙
Đánh giá trung bình 3.0
3
The speed is so fast that I'm just following along and I'm busy... I don't know if you edited the video quickly, but before you finish speaking, another word keeps coming out... You edited the coding, so it's faster than your typing speed... It's 2 hours long, but it feels like 4~5 hours. I paused and played it again... It's still fast even at 0.75x speed... ㅋ... The explanation of the slick slider and full page seem a little lacking. I don't understand it well... And there are parts of the video that are cut off and parts that are automatically skipped, so it's a shame. But if you follow along, you can probably set up a homepage. And, I don't think beginners or novices should listen to this. I recommend that you learn some coding before listening to the lectures.
Đánh giá 1
∙
Đánh giá trung bình 3.0
3
The lecture is good :) It's a bit disappointing that the mobile screen doesn't work. And the lecture is a bit fast ㅠㅜ
HYEREE AHN~ This main lecture is designed to teach you how to create a full page, countup, animation that runs when active, GNB MenuBar, etc. If you want to study responsiveness, you can take the DobdaApplication or Musein lecture. And the video was edited quickly on purpose to eliminate boredom. Online lectures have the advantage of being able to be listened to repeatedly~~ Have a good day today~ J.young Dream
656.601 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!