Đây không phải là bài giảng chỉ đơn thuần theo dõi một trang web cụ thể, mà đúng hơn là bài học vững chắc về những điều cơ bản của bí quyết tương tác cuộn và các yếu tố cốt lõi được chia sẻ bởi những người chia sẻ kiến thức, cũng như tìm hiểu và tạo ra nhiều kỹ thuật và chuyển động khác nhau của tương tác cuộn UI được sử dụng rộng rãi. bởi các công ty trong nước như Apple.
Chúng tôi sẽ giải thích các nguyên tắc tương tác phản hồi khi cuộn qua nhiều ví dụ khác nhau.
Apple sử dụng cách tương tác như thế nào
Các kỹ thuật tương tác thường được sử dụng và áp dụng trong thực tế
Motion Graphic cơ bản (tiêu chuẩn thực tế)
Kỹ thuật Parallax
Đừng lo lắng. Đến cuối khóa học, bạn sẽ trở thành bậc thầy trong việc tạo ra các tương tác bằng cách sử dụng thao tác cuộn.
Thông báo cập nhật lớp học
Xin chào, tôi là Kang Coding. Lớp học đã được cập nhật.
1. Ngoài các lớp tập trung vào giải thích cốt lõi hiện có để hỗ trợ hiểu biết , các lớp giải thích trong khi viết JavaScript đã được thêm vào.
2. Đã thêm lớp về cách chuyển đổi mã được tạo bằng JQUERY sang VanillaJS.
3. Đã thêm lớp thưởng Mục 12 .
4. Thêm Ví dụ về Phần thưởng của Mục 12. ^__^*
Giao diện tương tác cuộn UI khiến nó trở nên thú vị!
Video xem trước toàn bộ bài giảng
Các dự án công việc gần đây
Xin chào, lớp học này sẽ đề cập đến một số nguyên tắc cơ bản về giao diện người dùng và chuyển động liên quan đến cuộn trên kênh YouTube Kang Coding. Có nhiều tương tác khác nhau trên kênh Kang Coding, hãy xem thử nhé :D
Tái bút Khóa học này được thiết kế dành cho người mới bắt đầu! Đối với người mới bắt đầu, lớp học có thể hơi khó một chút. :)
Mục 2-1
Đây là để tìm phần trăm cuộn .
Khi bạn đọc xong văn bản ở phía bên trái màn hình, bạn sẽ nhận thấy rằng thanh đo đã đầy.
▲ Thanh đo tăng lên khi bạn cuộn
Mục 2-2
Trong Phần 2, chúng ta sẽ tìm hiểu về nguyên lý cuộn vô hạn được Naver, Google, v.v. sử dụng.
▲ Cuộn vô hạn
Mục 3
Phần 3 bao gồm các chuyển đổi, biến đổi và tiền tố nhà cung cấp cơ bản dành cho người mới bắt đầu.
Chúng ta cũng sẽ tìm hiểu về CSS Animations và tăng tốc chuyển tiếp.
▲ Chuyển đổi, Chuyển tiếp & Hoạt ảnh CSS
Mục 4
Trong Phần 4, chúng ta sẽ sử dụng các nguyên tắc cuộn cơ bản và Hoạt ảnh CSS mà chúng ta đã học trước đó để tạo hiệu ứng thị sai đơn giản và tìm hiểu về hiệu ứng hoạt hình thay đổi tại một điểm cụ thể khi cuộn .
▲ Hoạt ảnh cuộn thị sai
Mục 5
Trong Phần 5, bạn sẽ tìm hiểu về các tương tác di chuyển lên và xuống theo kích thước màn hình khi cuộn lên và xuống.
Chúng ta cũng sẽ triển khai hiệu ứng thị sai nhiều lần bằng cách áp dụng CSS Animation và hiệu ứng thị sai mà chúng ta đã học trước đó.
( Tương tác di chuyển lên xuống theo kích thước màn hình không hoạt động bình thường khi chức năng cuộn mượt mà được bật trong trình duyệt Edge . Chức năng này là tùy chọn do trình duyệt cung cấp và hoạt động bình thường khi chức năng cuộn mượt mà được bật tắt . Trong lớp, hãy kiểm tra trình duyệt Edge và sử dụng Edge) Bạn sẽ học cách ngăn tính năng này hoạt động.
▲ Cuộn Parallax Đa
Mục 6
Trong phần 6, chúng ta sẽ tìm hiểu cách tạo năm hiệu ứng chuyển động CSS và hiệu ứng đếm ngược ngày bằng JavaScript và hoạt ảnh CSS, cũng như cách phát chuyển động đã tạo khi đến vị trí phần tương ứng.
▲ Nhiều hiệu ứng chuyển động khác nhau
Mục 7
Trong Phần 7, chúng ta sẽ tìm hiểu về các tương tác neo và xử lý các phần . Tìm hiểu một tương tác có cốt truyện trong đó phần văn bản giới thiệu biến mất , một cánh cửa nền đen mở ra, một hình ảnh nền thu nhỏ lại rồi xuất hiện, và cuối cùng phần văn bản kết thúc xuất hiện.
▲ Tạo tương tác với các câu chuyện
Mục 8
Trong Phần 8, bạn sẽ học cách tạo tương tác bằng cách neo hình ảnh sản phẩm vào bên phải và khớp hình ảnh với nội dung văn bản .
▲ Tạo tương tác văn bản phù hợp với hình ảnh sản phẩm
Mục 9
Ví dụ bạn sẽ học trong Phần 9 là một tương tác video liên quan đến việc neo nội dung và vẽ nhiều hình ảnh lên một khung vẽ . Chúng tôi cũng sẽ xem xét cách xử lý mô tả sản phẩm như sau:
▲ Tương tác được tạo ra bằng cách vẽ nhiều hình ảnh trên một bức tranh
Mục 10-1
Phần 10 đã được thêm vào . Phần 10 UI là một lớp được tạo dựa trên những kiến thức cơ bản đã học cho đến nay và được tạo ra với những người chia sẻ kiến thức (Hiệu ứng 3D không được hỗ trợ bởi trình duyệt IE. Chúng được hỗ trợ bởi các thiết bị di động và Chrome, Firefox, Safari và Nhạc kịch.)
▲ Hãy cùng triển khai giao diện người dùng với ba chức năng sau bằng cách áp dụng các bài học trước: kích hoạt điều hướng phản ứng với vị trí phần khi cuộn, thay đổi văn bản tiêu đề để phù hợp với tiêu đề phần và thay đổi màu văn bản cho mỗi phần.
Mục 10-2
Hãy tạo một mô hình 3D bằng CSS và triển khai nó sao cho nó biến đổi khi cuộn . Trông nó không giống một quảng cáo sao?
▲ Tạo mô hình 3D bằng CSS
Mục 10-3
Hãy tạo một vật thể 3D bằng cách áp dụng hình ảnh vào mô hình 3D đã học trước đó và triển khai nó sao cho nó chuyển động với cảm giác ba chiều hơn khi cuộn.
▲ Triển khai các hiệu ứng 3D cơ bản mà không cần sử dụng video hoặc số lượng lớn hình ảnh
Mục 10-4
Áp dụng từng hình ảnh phần vào mô hình 3D đã học trước đó và xử lý để thay đổi thành hình ảnh phù hợp với phần đó.
Nếu bạn áp dụng các hiệu ứng sau, bạn có thể tạo ra một vật thể 3D thay đổi theo từng phần, phải không ?
▲ Ghép hình ảnh mặt cắt và hình ảnh mô hình 3D
Bằng cách thay đổi một giá trị, bạn có thể tạo hiệu ứng không gian bốn chiều và thậm chí là hiệu ứng đường thẳng như thế này!
▲ Có thể làm được điều gì đó như thế này chỉ bằng cách thay đổi một giá trị không? :D
Tái bút Các tương tác trong Phần 10 không phải là bản sao mà là những tương tác được tạo ra từ ý tưởng của những người chia sẻ kiến thức .
Phần 10-5 Thách thức
Lớp này là lớp thử thách nhằm tùy chỉnh ví dụ Mục 10 đã tạo trước đó.
Nhiệm vụ 1. Cố gắng tách biệt các hàm cần thực hiện một lần khi nhập một phần khỏi các hàm cần thực hiện liên tục.
Vui lòng tham khảo bài học video khi bạn cần trợ giúp :D
Mục 10-6 Thách thức
Lớp này là lớp thử thách nhằm tùy chỉnh ví dụ Mục 10 đã tạo trước đó.
▲ Hãy triển khai giao diện người dùng giới thiệu sản phẩm một cách chi tiết.
Nhiệm vụ 1. Thêm một đường mờ màu đen vào phần đầu tiên và làm cho màu nền xuất hiện chậm rãi khi bạn cuộn.
Nhiệm vụ 2. Xoay điện thoại của bạn khi bạn đến phần 2-4
Hãy thử thách bản thân và xem video hướng dẫn nếu bạn cần trợ giúp!
Mục 11
Phần 11 là phần tương tác được tạo bằng SVG và video.
Sử dụng công thức cuộn đã học trước đó, chúng ta sẽ tạo ra một tương tác trong đó các đường SVG được vẽ và video sẽ xuất hiện khi cuộn rất dễ dàng.
▲ Tương tác sử dụng SVG và video
Mục 12 - Thêm lớp thưởng
Phần 12 là phần tương tác trong đó văn bản xuất hiện và biến mất.
Tương tác này chỉ được hỗ trợ trên các trình duyệt hiện đại .
▲ Tương tác sử dụng khung hình chính đã học trước đó
Mục 12 - Ví dụ về phần thưởng bổ sung
Đây là một ví dụ bổ sung mà tôi đã thêm vào bằng cách sử dụng khung hình chính mà chúng ta đã học sơ qua trong Phần 12. Tôi hy vọng bạn tìm ra nhiều cách khác nhau để áp dụng ví dụ này và không có lớp nào cả vì chỉ có CSS được thay đổi một chút. Nếu bạn có bất kỳ khó khăn nào, vui lòng để lại câu hỏi!
Tương tác này chỉ được hỗ trợ trên các trình duyệt hiện đại .
▲ Ví dụ thưởng 01
▲ Ví dụ thưởng 02
▲ Ví dụ thưởng 03
▲ Ví dụ thưởng 04
▲ Ví dụ thưởng 05
▲ Ví dụ thưởng 06
Kang Coding Mã nguồn mở THƯỞNG UI
Tái bút Giao diện người dùng thưởng có thể sử dụng trong thực tế
Không có bài giảng, chỉ có mã ví dụ!
▲ Vẽ vòng tròn trên vải - trang web tương tác hoặc
Tính năng này rất hữu ích khi tạo biểu đồ hình tròn đơn giản.
▲ Toàn cảnh hình ảnh - Toàn cảnh được triển khai bằng requestAnimationFrame.
Tìm hiểu về đệ quy và nguyên lý vòng lặp vô hạn toàn cảnh.
▲ Tab hình ảnh - Hiệu ứng mờ dần cơ bản trong số các hiệu ứng cơ bản
Tìm hiểu về hiệu ứng nút trượt.
▲ Tôi ghét tiếng lạch cạch của modal :(
Đã khắc phục sự cố kêu lạch cạch khi mở hộp thoại và ẩn thanh cuộn!
Làm thế nào để thực hiện nó? Học với mã rất dễ
Không phải vấn đề gì to tát, nhưng đây là mã nguồn mở mà tôi đã tạo ra và chia sẻ với cộng đồng dành cho những người tìm việc, nhân viên mới và những người yếu về JavaScript :D (Tôi đã tạo ra nó với sự phấn khích)
Tôi hy vọng rằng đoạn mã trên sẽ hữu ích với học viên Inflearn, vì vậy tôi đã đính kèm nó như một UI thưởng vào tệp ví dụ bài giảng :D Nếu bạn xem tệp ví dụ, nó nằm trong thư mục bonus_ui, vì vậy tôi hy vọng bạn làm tốt sử dụng nó :)
Không có bài giảng nào về Bonus UI, nhưng tôi hy vọng bạn sẽ nghiên cứu và thử sử dụng bằng cách in nhật ký và tự thay đổi mã. Sau này khi có thời gian, mình sẽ upload lên YouTube dưới dạng bài giảng miễn phí, nếu bạn gặp khó khăn khi phân tích code thì hãy tham khảo YouTube sau nhé :D
1. Có những lớp mà bạn giải thích trong khi viết mã, và có những lớp mà bạn giải thích trong khi đọc mã.
• Có một số phần trùng lặp giữa hai lớp, nhưng tôi nghĩ sẽ hữu ích hơn nếu bạn sử dụng chúng như một khái niệm ôn tập.
2. Chúng tôi sẽ tiến hành một lớp học để chuyển đổi các phần được viết bằng jquery thành vanilla js.
• Giết hai con chim chỉ bằng một hòn đá bằng cách học mã jQuery và VanillaJS.
3. Chúng tôi sẽ hướng dẫn bạn cách tạo ra những tương tác được sử dụng trong thực tế .
• Chúng tôi giải thích rất chi tiết về cách tạo ra những tương tác giúp tăng lương đáng kể cho bạn.
4. Giải thích để bạn có thể học được ngay cả khi bạn không biết rõ về JavaScript .
• Tôi sẽ giải thích phần JavaScript một cách chi tiết nhất có thể. Đầu tiên, chúng tôi giới thiệu phần khai báo biến và các hàm, sau đó giải thích từng hàm theo thứ tự thực thi chương trình, để bạn có thể nắm được kỹ năng chỉ bằng cách ghi nhớ các mẫu xuất hiện trong bài giảng.
5. Học tập tập trung vào các ví dụ ứng dụng
• Chúng tôi cố gắng tạo ra một bài giảng có thể lưu lại trong đầu bạn, thay vì một bài giảng mà bạn chỉ xem một lần là hết, bằng cách áp dụng các mô hình lặp đi lặp lại và cung cấp nhiều ví dụ khác nhau. Tôi hy vọng bạn thấy nó dễ hiểu và dễ sử dụng hơn. :)
6. Tôi sẽ giải thích một cách đơn giản nhất có thể .
• Khi mới bắt đầu lập trình, tôi thấy rất khó vì tôi không hiểu nó. Vì vậy, hiểu được những khó khăn mà người mới bắt đầu gặp phải... Tôi đã viết mã sao cho dễ hiểu nhất có thể và giải thích bằng những từ ngữ dễ hiểu.
7. Nó được làm ra sao cho không gây nhàm chán .
• Chắc chắn sẽ rất nhàm chán nếu có một khoảng trống nhỏ ở giữa. Biên tập chặt chẽ cung cấp những lời giải thích không ngừng. Chỉ cần tập trung trong khoảng 5 đến 15 phút mỗi lần!
8. Tôi đã cố gắng giảm lượng mã xuống mức thấp nhất có thể :)
• Nếu mã quá dài, sẽ khó học và mất nhiều thời gian để thành thạo, đúng không? Tôi đã cố gắng trình bày ngắn gọn và súc tích nhất có thể. Bởi vì thời gian của bạn rất quý báu!
9. Tôi chỉ giải thích những điểm chính .
• Bởi vì thời gian của bạn rất quý giá! “Tốt hơn là nên biết chi tiết, nhưng... Tôi đã mạnh dạn loại trừ những thứ mà hiện tại anh không cần biết.”
10. Giảm thiểu nói chuyện phiếm .
• Bởi vì thời gian của bạn rất quý giá! Chúng tôi mạnh dạn loại bỏ những câu chuyện phiếm và những lời giải thích không cần thiết.
11. Phóng to và thu nhỏ mã ví dụ.
• Chỉnh sửa mã ví dụ bằng cách phóng to giúp đọc mã dễ dàng hơn trên màn hình thiết bị di động. Hãy dành một chút thời gian trên đường đi học hoặc đi làm nhé :D
H. Bạn có thể cho tôi biết những phần khó của lớp học không?
Tất nhiên là tôi sẽ cho bạn biết :D Nếu bạn để lại bình luận trong phần Hỏi & Đáp, tôi sẽ nhận được email trong vòng 1 đến 5 giờ và tôi sẽ trả lời bạn ngay sau khi kiểm tra. Nếu có bất kỳ điều gì bạn thấy khó hiểu hoặc tò mò, hãy đọc nhé!
H. Những người không chuyên ngành cũng có thể tham gia khóa học này không?
A. Chúng tôi tạo ra khóa học này để ngay cả những người không chuyên cũng có thể sử dụng được miễn là họ biết những kiến thức cơ bản về HTML và các thuộc tính CSS cơ bản như chiều rộng, màu sắc và vị trí.
H. Bạn không sử dụng jQuery trong thực tế sao?
A. Hầu hết các trang web được phát triển ở nước ta đều sử dụng jQuery và có nhiều dự án trong lĩnh vực này sử dụng jQuery để bảo trì. Ngoài ra , các framework front-end như React và Vue JS cũng sử dụng jQuery để thao tác DOM . Nếu bạn quen thuộc với Vanilla JS, jQuery rất dễ sử dụng và sẽ rất hữu ích cho công việc của bạn nếu bạn biết đến nó. :)
Đầu tiên!
Chuẩn bị trước mã ví dụ lớp học và nghiên cứu bằng cách so sánh với video bài giảng. Nếu bạn gặp khó khăn trong việc hiểu các biến và công thức được giải thích trong bài giảng, hãy nhấn nút fuzz và kiểm tra với CONSOLE.LOG và tiếp tục!
thứ hai!
Hãy xem kỹ Phần 2 và đảm bảo bạn hiểu được các nguyên tắc tương tác cuộn! Có vẻ như có một số người đang xem bài giảng từ giữa, nhưng nội dung của bài giảng đầu tiên về tương tác cuộn được áp dụng liên tục từ phần 2 đến phần 11 và được lặp lại, và nó được thiết kế để bạn có thể hiểu các nguyên tắc một cách tự nhiên thông qua học tập lặp đi lặp lại.
Thứ ba!
Đối với phần kiểm tra mã, tôi khuyên bạn nên xem lại bằng cách trực tiếp sửa đổi mã ví dụ đã hoàn thành và in nhật ký cho các biến liên quan đến công thức thông qua việc đầu tư thời gian cá nhân! (Nếu bạn không biết cách lấy gỗ thì cứ hỏi nhé!)
Thứ tư! Thật tốt khi biết điều này!
Lý do tôi tập trung giải thích chi tiết về mã trong bài giảng là vì khi tạo chương trình , điều quan trọng nhất là phải hiểu thứ tự thực thi chương trình và cấu trúc tổng thể của chương trình .
Khi bạn hiểu được cấu trúc tổng thể và thứ tự thực hiện, bạn sẽ có thể hình dung chính xác phần nào cần sửa đổi và cải thiện trước khi tùy chỉnh chương trình hoặc khi xảy ra lỗi ! Nếu bạn hình thành thói quen hình dung cấu trúc tổng thể của chương trình trong đầu, bạn sẽ bắt đầu phát triển bí quyết tạo ra cấu trúc chương trình mà thậm chí không nhận ra điều đó :)
Khóa học này dành cho ai?
UI/UX là lĩnh vực mà bạn quan tâm
Dành cho những ai quan tâm đến đồ họa chuyển động
Dành cho những ai muốn tạo ra một trang web khiến mọi người phải thốt lên ngưỡng mộ, chẳng hạn như trang web của Apple hoặc một trang web được tạo ở nước ngoài.
Những người quan tâm đến trang chủ sáng tạo và độc đáo
Người tìm việc muốn tạo một danh mục đầu tư đặc biệt
Những người giỏi xuất bản nhưng yếu về JavaScript
Nhà thiết kế nhưng quan tâm đến tương tác
Dành cho những ai muốn tăng lương bằng cách bổ sung kỹ năng tương tác!
Cần biết trước khi bắt đầu?
Kiến thức cơ bản về HTML, CSS, JavaScript (kể cả khi bạn không có kiến thức trước, bạn cũng có thể thử học những nội dung trong bài giảng và ghi nhớ chúng)
1,330
Học viên
71
Đánh giá
163
Trả lời
4.7
Xếp hạng
3
Các khóa học
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
Tất cả
78 bài giảng ∙ (11giờ 23phút)
Tài liệu khóa học:
Tất cả
40 đánh giá
4.6
40 đánh giá
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
I didn't even realize how much time had passed. It was really easy to understand because the examples were applied repeatedly! Honestly, I thought it was a worthwhile lecture because I could acquire the skills required in the field just by downloading the code, so I signed up for the lecture, but I'm so grateful that the explanations were also well-done! My skills improved by 300%! ㅎㅎ If I had watched the lecture before getting a job, I think I could have written my desired salary higher. It's too bad...ㅜㅜ And my company's CEO asked me to upload the second part quickly...ㅋㅋ Additional lecture, thank you!! Making 3D is more fun than I thought!ㅎ
Hello Mydarling! Thank you for your words :) I hope you can use scroll interaction to create more awesome web and app!! Thank you again for leaving a helpful review!!! :D I just added a bonus UI to the example file! Please download it again^.^ I will do my best to create a more useful and helpful course :)
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
Pros of this class: 1. Friendly code // You can see how the code is made by writing intuitive and understandable code. 2. Friendly lecture // Even if you study hard on your own, you can find out what you missed through the lecture. It explains the overall flow so that it is easy to understand. 3. A lot of interaction information // This is what I like the most. You can implement numerous interactions just by watching this lecture. The code is composed of jQuery, which is a bit disappointing, but I think it is an advantage rather than a disadvantage because it is practice in converting jQuery to JavaScript. Lastly, thank you for preparing such a great class.
Hello Front Occupation! Thank you for your valuable review :D We will work hard to create more useful and helpful classes^.^
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
I am not a major. HTML and CSS are easy, so I learned the basics very easily after studying at an academy for about 3 months. However, I hit a wall with JavaScript and had a mental breakdown several times. Since the script was explained line by line in an easy way, I was able to understand it well, and I was able to learn how to create scroll interactions from the basics! I will listen to the good lectures and learn advanced skills! And I highly recommend the lecture audio quality!!^^
Hello Happy Day :D Thank you for leaving a helpful review :D We will work hard to make better lectures Thank you again
Đánh giá 3
∙
Đánh giá trung bình 5.0
5
Assuming that I have some basic knowledge, I can learn only what I need. Thank you. I was able to learn only what I personally wanted.
Hello Banggyubong :D I'm glad you got what you needed! Thank you :) I will try to make more useful and helpful courses :D
Đánh giá 4
∙
Đánh giá trung bình 5.0
5
I will listen carefully and use it well~ Thank you~
Hello, students:) Thank you for your valuable review! We will work hard to create more useful and helpful courses:)
2.541.007 ₫
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!
![Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[Fantasy Pig's Feet] From design to codingCourse Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
