
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!
초급
HTML/CSS, scrolltrigger, gsap
[Từng bước sản xuất trang web] Đây là bài giảng gồm 3 bước và là quá trình tạo trang chính của Daebang Industries. Đây là một khóa học vừa khó vừa tuyệt vời vì đây là một quá trình tạo và triển khai trang web tương tác tuyệt đẹp có trong trang web.
234 học viên
GNB jQuery hiển thị độ sâu 2 khi di chuột qua
FixHeader jQuery thay đổi thiết kế khi cuộn
Cách sử dụng và ứng dụng hoạt hình văn bản jQuery (Splitting.js)
Hoạt hình sự kiện cuộn Cách sử dụng và ứng dụng jQuery (scrolla.js)
Cách sử dụng và ứng dụng slide hình ảnh động jQuery (slick.js)
Khóa học này bao gồm quy trình ba bước để tạo trang web, mô phỏng trang chủ của Daebang Industries (https://www.db-dvp.co.kr/). Khóa học này sẽ hướng dẫn bạn cách tạo và triển khai trải nghiệm web tương tác sống động trên trang web.
Từng bước một!
Bắt đầu ngay bây giờ.
Khóa học này được thiết kế dành cho những người có kiến thức cơ bản về HTML và CSS, và sẽ tiến hành triển khai các trang web thực tế . Ngay cả khi không có kiến thức chuyên sâu về JavaScript và jQuery, bạn vẫn có thể nhanh chóng tạo ra các trang web đẹp mắt, sống động bằng cách sử dụng các thư viện và plugin dựa trên HTML và CSS . Tham gia khóa học này, với các yếu tố tương tác thiết yếu cho công việc thực tế, bạn sẽ nhận được ba lợi ích: khả năng mở rộng thực tế, đảm bảo cải thiện kỹ năng và hoàn thành danh mục đầu tư .
- GNB jQuery hiển thị 2 độ sâu khi di chuột
- Tạo thanh menu phụ trượt mượt mà khi di chuột qua thanh menu GNB.
- Nhiều hiệu ứng di chuột qua sử dụng bộ chọn ảo (trước, sau)
- jQuery tiêu đề thay đổi thiết kế khi cuộn và được cố định ở trên cùng
- Hoạt ảnh văn bản được tạo bằng Splitting.js
- Tạo hình ảnh slide bằng Slick .js
- Tạo các nút 'trước', 'tiếp theo' của slide
- Tạo chỉ báo slide
- Hoạt ảnh thanh đo
- Hoạt ảnh phân đoạn hình ảnh
- Hoạt ảnh slide không hiển thị hai slide cùng một lúc với Scrolla.js
- Tạo nút chấm bằng CSS
- jQuery di chuyển mượt mà đến vị trí mong muốn khi nhấp vào nút cuộn
- Nhiều hiệu ứng di chuột (hiệu ứng gạch chân, hiệu ứng viền, hiệu ứng tỷ lệ hình ảnh) bằng cách sử dụng bộ chọn ảo (trước, sau)
- Hoạt ảnh cuộn jQuery (scrolla.js)
- Nhập video YouTube
- Áp dụng màu gradient
- Áp dụng hoạt ảnh chuyển động
Sau khi bài giảng kết thúc
Bạn nhận được gì :D
Khi tạo một trang web, việc tạo một bố cục chính xác dựa trên HTML và CSS là vô cùng quan trọng . Ngay cả khi bạn có kiến thức cơ bản về HTML và CSS nhưng không có kiến thức về thiết kế bố cục , nếu bạn chăm chỉ theo dõi bài giảng 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ảm thấy mình 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 khi tham gia các bài giảng, 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 xây dựng 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.
4. Mở hoạt động phòng chat
Để 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
html, css, html/css, trang web, trang web, mã hóa, 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?
1. Những người có kiến thức cơ bản về HTML/CSS nhưng ngại tạo trang web.
2. Những người muốn nhanh chóng tạo hồ sơ xin việc với tư cách là nhà thiết kế web hoặc nhà xuất bản
3. Những người muốn tìm hiểu mã nguồn JQuery cần thiết trên web
4. Những người 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
5. 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
6. Những người muốn nâng cao kỹ năng làm việc của mình với vai trò là nhà thiết kế web
7. Những người 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
Cần biết trước khi bắt đầu?
HTML/CSS
8,235
Học viên
326
Đá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ả
29 bài giảng ∙ (4giờ 50phút)
Tài liệu khóa học:
Tất cả
13 đánh giá
5.0
13 đánh giá
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Tôi đang cố gắng tự học phát triển front-end và không có nhiều bài giảng miễn phí hay nên tôi nhanh chóng xem xong và tìm kiếm các bài giảng trả phí. Tôi bắt đầu với trang web Phát triển Công nghiệp Daebang chỉ vì nó trông rất ngầu, và nó dạy tôi một cách chi tiết và thậm chí bao gồm những điều tôi không thể học tốt trong các bài giảng miễn phí. Tôi đã rất vui khi học nhờ những gợi ý của bạn :) Đó là một bài giảng rất thú vị và tôi nghĩ ngay cả học sinh cấp hai cũng có thể hoàn thành được. khóa học nếu họ làm việc chăm chỉ! Tôi thực sự thích việc J. Young vui lòng trả lời các yêu cầu của tôi về bài tập ở trường và trả lời các câu hỏi một cách nhất quán!
Lim Hyeonwoo~~ Tôi hoan nghênh bạn ^^ Tôi nghĩ bố mẹ bạn sẽ rất ủng hộ.... Khi nói đến ngành công nghiệp Daebang...ngay cả người lớn cũng có thể thấy khó khăn. Thật sự rất ngạc nhiên khi bạn đã có rất nhiều niềm vui khi hoàn thành nó~~ Nói tóm lại, nó thật tuyệt vời!!! Tôi rất biết ơn~~~ Nếu có thắc mắc gì trong quá trình học vui lòng để lại tin nhắn bất cứ lúc nào. Mình lại cổ vũ cho bạn nữa ^^ Chúc buổi chiều hôm nay vui vẻ và cuối tuần cũng vui vẻ nhé ^^ Giấc mơ của J.young ^^
Đánh giá 4
∙
Đánh giá trung bình 4.8
5
Tôi đã tham dự tất cả các bài giảng của giảng viên J. Young và hoàn thành chúng ^^ Trang web Công nghiệp Daebang này có thể triển khai một trang web tương tác tuyệt đẹp. Tôi thích theo dõi nó hơn các khóa học khác. Trên hết, với nhiều hoạt ảnh JQuery khác nhau được học ở đây, Tôi có một mong muốn cháy bỏng là nâng cấp trang portfolio của mình!! Lần tới, vui lòng mở khóa học tập trung vào tạo ứng dụng di động. Tôi nghĩ nó sẽ giúp ích rất nhiều. Gửi đến vô số người đang gặp khó khăn trong việc tự học trực tuyến do đại dịch COVID-19 Xin hãy cho J. Young nhiều bài giảng hay. Cảm ơn
Kate, cảm ơn bạn đã đánh giá. Cảm ơn bạn rất nhiều vì đã tham dự tất cả các bài giảng của tôi. Chúng tôi sẽ luôn cố gắng hết sức để mang đến những bài giảng tốt hơn. Bài giảng tiếp theo bị gián đoạn trong quá trình quay phim do tôi phải di chuyển. Chúng tôi sẽ đến với bạn ngay khi nó được giải quyết. Chúng tôi đang lên kế hoạch chuẩn bị, bao gồm cả các bài giảng về thiết kế ứng dụng di động ^^ Chúc bạn buổi tối vui vẻ ^^
Xin chào ~~ Kate đã đăng thông báo sự kiện đánh giá bài giảng ~~ ^^ Vui lòng xem thử
Đánh giá 4
∙
Đánh giá trung bình 5.0
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Tốt!
quy tắc bò Cảm ơn bạn đã đánh giá ngắn gọn, đơn giản nhưng mạnh mẽ. Chúc bạn hôm nay một ngày tốt lành ^^
1.014.862 ₫
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!