
Sử dụng ScrollTrigger của GSAP để tạo portfolio
jyoung
Hãy tạo một trang web portfolio phản ứng nhanh, tương tác và phản hồi theo thao tác cuộn bằng cách sử dụng ScrollTrigger của GSAP!
Basic
HTML/CSS, scrolltrigger, gsap
[Từng bước tạo trang web] Đây là bài giảng gồm ba bước và là quá trình tạo trang chính của Musign (https://musign.net). 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 ^^
Xuất bản web đáp ứng được tối ưu hóa cho nhiều thiết bị khác nhau (Truy vấn phương tiện)
Hoạt ảnh sử dụng SVG
Hoạt ảnh hình ảnh sử dụng bộ chọn ảo (trước, sau)
Hoạt hình văn bản tương tác bằng thuộc tính Transform
Hoạt hình sự kiện cuộn Cách sử dụng và ứng dụng jQuery (scrolla.js)
Hiệu ứng thay đổi màu nền tùy theo vị trí cuộn (jQuery)
Hoạt ảnh GNB có gạch chân sau khi di chuột qua (jQuery)
Hoạt hình mở menu Hamburger GNB
Từng bước một!
Bắt đầu ngay bây giờ.
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 nó để tạo trang web.
Chúng tôi giúp bạn tạo ra những trang web đẹp và đầy màu sắc trong thời gian ngắn bằng cách sử dụng thư viện và plugin.
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ế.
Bạn có thể có được các kỹ năng kinh doanh và kiến thức thực tế cốt lõi cùng một lúc.
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 Muse và tìm hiểu bí quyết để nhanh chóng tạo ra một trang web tuyệt đẹp !
1. Cách tạo bố cục siêu đơn giản bằng HTML và CSS
2. Hoạt ảnh văn bản sử dụng transfrom
3. Hoạt ảnh sử dụng hiệu ứng mặt nạ
4. Ứng dụng sản xuất SVG và hoạt hình
5. Hoạt ảnh xảy ra khi cuộn
.gif)
- Thiết kế web đáp ứng cho độ phân giải chế độ PC từ 1720px đến 1401px
- Thiết kế web đáp ứng cho máy tính bảng có độ phân giải từ 1400px đến 1025px
- Thiết kế web đáp ứng cho máy tính bảng có độ phân giải từ 1024px đến 68px
.gif)
- Thiết kế web đáp ứng cho độ phân giải di động từ 767 đến 321px
- Thiết kế web đáp ứng lên đến 320px trên thiết bị di động
.gif)
* Tạo menuMở thanh
.gif)
* Cách sử dụng công cụ dành cho nhà phát triển
.gif)
Sau khi bài giảng kết thúc
Bạn nhận được gì :D
Khi tạo trang web, việc tạo bố cục chính xác dựa trên HTML và CSS là tối quan trọng . Ngay cả khi bạn có kiến thức cơ bản về HTML và CSS nhưng không hiểu biết về thiết kế bố cục , điều đó cũng không sao. Nếu bạn chăm chỉ theo dõi khóa học này, với những kiến thức cơ bản được trình bày chi tiết , bạn sẽ sớm có được nền tảng vững chắc về thiết kế bố cục !
Để tăng năng suất làm việc, bạn cần có khả năng nhanh chóng tạo ra các trang web tương tác bằng cách sử dụng thư viện và plugin. Khóa học này sẽ bao gồm mọi thứ, từ thiết kế bố cục trang web đến tạo trang web đáp ứng. Bạn cũng sẽ được học các kỹ năng thực hành như sử dụng script, plugin và animation để tạo trang web. Bằng cách thực hành liên tục trong suốt khóa học, bạn sẽ thấy mình cải thiện kỹ năng làm việc chỉ trong thời gian ngắn!
Một portfolio chất lượng cao là một trong những công cụ hiệu quả nhất để thể hiện năng lực chuyên môn và nắm bắt những cơ hội mới. Bằng cách tham gia các buổi thuyết trình và thực hành, bạn sẽ xây dựng được portfolio của riêng mình. Bằng cách liên tục triển khai các trang web trong các buổi hội thảo thiết kế website tiếp theo, bên cạnh bài giảng này, bạn sẽ có thể xây dựng một portfolio, vũ khí lợi hại nhất của bạn trong hành trình tìm kiếm việc làm.
Để 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
Tạo trang web thực tế
Xem các bài giảng khác
html, css, html/css, trang web, trang web, mã hóa, oding, jquery, jQuery, bố cục, web tương tác, thiết kế web, danh mục đầu tư, xuất bản
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 chuyển từ nhà thiết kế đồ họa sang nhà phát triển front-end.
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
Những người muốn thiết kế và triển khai các bố cục khác nhau để làm việc với tư cách là nhà thiết kế hoặc nhà xuất bản web
Bất kỳ ai muốn nhanh chóng tạo một trang web thú vị và đầy màu sắc có tính đến khả năng mở rộng thực tế
8,775
Học viên
352
Đánh giá
227
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ả
32 bài giảng ∙ (5giờ 10phút)
Tài liệu khóa học:
Tất cả
20 đánh giá
4.8
20 đánh giá
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
Không sử dụng các công cụ như Bootstrap Tôi muốn thử một trang web đáp ứng, Bài giảng êm dịu và rõ ràng đến mức tôi đã nghe hết trong 3 ngày. Trong khi trực tiếp làm việc để tạo một trang web đáp ứng, Nó rất dễ hiểu Độ dài mỗi bài giảng phù hợp. Nhìn chung, không có lời giải thích nào không cần thiết hoặc khó khăn. Tôi nghĩ nó sẽ giúp ích rất nhiều cho việc học sau này :) Cảm ơn
Sh H, cảm ơn đánh giá khích lệ của bạn ^^ Tôi sẽ trở lại với những bài giảng tốt hơn trong tương lai. Chúc bạn hôm nay một ngày tốt lành ^^ J.youngGiấc mơ
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Lớp học rất dễ hiểu và rất hữu ích vì giáo viên đã giải thích một cách chi tiết và chi tiết. Họ đã đưa cho tôi tất cả tài liệu và rất tử tế!! Đặc biệt vì tôi là người mới bắt đầu viết mã nên rất khó để tạo bố cục, nhưng bạn đã giải thích nó rất dễ dàng và gọn gàng nên tôi cảm thấy như kỹ năng của mình được cải thiện nhanh chóng khi tôi xem và xem. đã học. Cảm ơn bạn ~~
Tôi được khuyến khích nhiều hơn bởi bài đánh giá bài giảng của uj06214. Tôi rất vui khi biết rằng bạn đã tham gia khóa học một cách dễ dàng. Tôi sẽ luôn trở lại với những bài giảng hay. Cảm ơn
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Tôi có thể tham gia khóa học mà không gặp khó khăn gì vì đây là bài giảng dạy bạn từng bước từ những điều cơ bản. Mặc dù là một bài giảng trực tuyến nhưng nó có vẻ là một bài giảng rất giàu thông tin, giải thích từng chi tiết như thể bạn đang học trực tiếp! Bởi vì tôi bướng bỉnh nên tôi đã tạo ra một trang web ngay lập tức. Cảm ơn
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Cả tính thực tiễn cốt lõi và xu hướng đều đã được nắm bắt rõ ràng. Đây là bài giảng mà bạn không thể dễ dàng tìm thấy ở bất kỳ nơi nào khác. Tôi nghĩ nó sẽ hữu ích trong thực tế. Cảm ơn vì bài giảng tuyệt vời :) Tôi dự định từ giờ trở đi sẽ chỉ học các lớp của j.young.
Cảm ơn vivien ^^ Tôi được khích lệ bởi bài phê bình bài giảng của Vivien. Học những khóa học thậm chí còn tốt hơn Tôi sẽ tải nó lên. Cảm ơn bạn ^^
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Đó là một sự trợ giúp tuyệt vời vì bạn đã giải thích mọi thứ một cách bình tĩnh và rõ ràng ^^ Viết mã rất khó, nhưng tôi thấy rất vui khi học từng chút một trong khi xem các bài giảng!! Tôi đang tìm hiểu rất nhiều về cách dễ dàng sắp xếp và tạo các bố cục đáp ứng phức tạp. Tôi rất mong chờ các bài giảng trong tương lai của bạn!!!
Cảm ơn jjarajan1213 vì đánh giá của bạn. Ngay cả khi việc viết mã lúc đầu có vẻ khó khăn, nhưng nếu bạn tiếp tục tạo đi tạo lại 4-5 trang web (2 trang trở lên), bạn sẽ quen dần với nó. Tôi nghĩ bạn sẽ có được sự tự tin trong cách tạo một trang web. Chúc các bạn học tập chăm chỉ và đạt được mục tiêu mong muốn ^^ Tôi sẽ trở lại với một bài giảng hay. Cảm ơn bạn ^^ J.youngGiấc mơ
1.015.440 ₫
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!