Tương tác cuộn mà ngay cả người mới bắt đầu cũng có thể tạo ra. Phần 1 JavaScript
Đâ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.
816 học viên
Độ khó Cơ bản
Thời gian Không giới hạn
Tin tức
16 bài viết
Xin chào. :)
Bài học bổ sung về công thức sử dụng ở Phần 12 đã được bổ sung. ^^..
Ngoài ra, các ví dụ về phần thưởng Phần 12 đã được thêm vào, vì vậy bạn nên tham khảo chúng.
Cảm ơn :)
xin chào~! Những ngày này, giá cả tăng cao đến mức dường như mọi người đều đang gặp khó khăn về nhiều mặt.
Chúng tôi đã thêm một ví dụ bổ sung để giúp bạn một chút!
tái bút Nếu bạn không chắc chắn về bất cứ điều gì, chỉ cần hỏi và chúng tôi sẽ cho bạn biết.
Cảm ơn bạn :D
Xin chào :)
Tôi đã đính kèm mã hoàn chỉnh JS vanilla.
Tất cả các lớp video đã được tải lên.
Lớp Vanilla chỉ bao gồm các phần 2 đến 6 :)
Lý do là
Các mẫu jquery trong phần 7 đến 11 là
Điều này là do đây là lớp chồng chéo vì tất cả đều xuất hiện trong phần 2 đến phần 6, vì vậy không có nhu cầu đặc biệt nào về nó!
Nếu bạn thấy có gì khó khăn, vui lòng gửi nó vào câu hỏi và chúng tôi sẽ bổ sung thêm :)
Cảm ơn
Xin chào!!
Hôm nay chúng tôi cũng thông báo điều này.
1. Bản vá lỗi Mac Chrome
Phần 5-2 Lỗi Mac Chrome không xảy ra trên trình duyệt Chrome trong giai đoạn phát triển (Kiểm tra trực tiếp vào ngày 30/01/2022)
Trình duyệt Chrome đang trong giai đoạn phát triển chưa được phát hành chính thức nên xảy ra lỗi nhưng khi ra phiên bản chính thức muộn hơn thì
Lỗi Safari Chrome dự kiến sẽ không xảy ra. Đúng như dự đoán, Google rất nhanh :)
2. Trình duyệt Edge cuộn mượt mà
Hôm qua, chúng tôi đã thông báo rằng sẽ xảy ra lỗi trong phần 5-2 nếu bạn sử dụng tính năng cuộn mượt mà, một tính năng gốc của trình duyệt Edge!
Hôm nay tôi đã làm một video sửa lỗi và tải nó lên.
Tôi đã kiểm tra xem có vấn đề gì với slide tự động mà tôi đã tạo cách đây không.
Tôi đã sử dụng logic tương tự trong SJ AUTO SLIDE !
Tuy nhiên, không có lỗi nào xảy ra trong chế độ trượt tự động.
Vì vậy tôi đã tìm hiểu lý do
Khi tôi tạo UI FR, có một chức năng cuộn mượt mà do tôi tự phát triển.
Vì tính năng này nên không có lỗi nào xảy ra.
Tuy nhiên, việc bỏ tính năng này sẽ dẫn đến một lỗi.
Nói cách khác, rõ ràng là có vấn đề với công nghệ cuộn hiện đang được triển khai trong trình duyệt cạnh.
Tôi nghĩ trình duyệt Edge chắc chắn sẽ khắc phục vấn đề này bằng bản nâng cấp phiên bản của nó.
Sẽ rất tốt nếu lưu ý rằng nếu có bản vá thì không cần phải xử lý lỗi.
Trong trường hợp chức năng cuộn mượt mà, phải tạo nhiều công thức khác nhau.
Vì là FR nên mọi thứ đều đan xen chỗ này chỗ kia.
Tôi nghĩ thực sự sẽ rất khó để được vào một lớp học.
Tuy nhiên, tôi hy vọng rằng các mẫu xử lý lỗi khác nhau có thể giúp ích phần nào.
Cảm ơn :)
Chúc các bạn một kỳ nghỉ Tết Nguyên Đán vui vẻ :D
Xin chào :)
Đây là bản cập nhật :)
1. Tất cả các lớp bổ sung phần thực hành và giải thích về cách tạo tương tác cuộn bằng jquery đã được thêm vào .
Nếu có ai đó gặp khó khăn với lớp học, trước tiên bạn nên tham khảo lớp thực hành nơi mã được viết và giải thích, sau đó sử dụng mẫu để hiểu lại thông qua phần giải thích .
2. Đã tìm thấy lỗi trong phần tương tác chuyển động ở Phần 5-2. Đã xảy ra lỗi khi sử dụng trackpad trên trình duyệt Chrome trong môi trường MAC (iMac Magic Mouse vẫn ổn).
Các chi tiết lỗi là
Khi một phần cần di chuyển từng khoảng trống được đặt ở đầu trình duyệt, nếu bạn cuộn nhanh bằng bàn di chuột, v.v.
Đây là trường hợp hoạt ảnh chuyển động của phần không được thực thi ngay từ đầu và hoạt ảnh được thực hiện sau đó. (xảy ra không liên tục)
Qua phân tích lỗi thì trên Mac gặp vấn đề khi vào phần cần di chuyển.
Đã chỉ định rằng các sự kiện cuộn không xảy ra khi nhập một phần.
Nói cách khác, chúng tôi đã giải quyết vấn đề bằng cách thêm một sự kiện bánh xe, chặn bánh xe khi vào một phần, phân nhánh và chỉ định rằng hành động mặc định cho sự kiện không được thực hiện.
Tuy nhiên, khi chỉ sử dụng sự kiện bánh xe thì đã xảy ra lỗi trong môi trường Windows.
Tại sao lại xảy ra lỗi khi chỉ sử dụng sự kiện bánh xe trong môi trường Windows?
Trong Windows, tần suất xảy ra sự kiện bánh xe chuột thấp hơn nhiều so với trong Mac, do đó có một lỗi khiến giá trị cuộn không được truy xuất đúng cách.
Nói một cách đơn giản, số lượng sự kiện cuộn và sự kiện bánh xe được gọi là khác nhau.
Vì vậy, trong Windows, mã hiện có được sử dụng nguyên trạng.
Nói cách khác, một lớp sẽ được thêm vào nhánh để sử dụng sự kiện bánh xe trên Mac và sự kiện cuộn trên Windows.
Vì lỗi này chỉ xảy ra trong Chrome trên Mac và có thể được Google vá nên mình sẽ tải lên video sửa lỗi mà không thay đổi lớp hiện có.
(Khi triển khai giao diện người dùng, việc thêm chuyển động khi thay đổi vị trí cuộn bằng sự kiện cuộn sẽ khiến tác vụ khó khăn hơn một chút.)
3. Tất cả các thay đổi của vanilla js đã được hoàn thành .
Một lớp sẽ được thêm vào để thay đổi các phần được viết trước đó bằng jQuery thành vanilla js. (Đây không phải là lớp để tạo các hàm jQuery.)
Mã được viết mà không xem xét đến IE và các trình duyệt cũ hơn.
Vì việc thay đổi mã vanilla js rất đơn giản nên tôi nghĩ ngay cả những người mới bắt đầu cũng có thể tự mình thay đổi phần còn lại ngoại trừ phần 5 và 6.
Mã hoàn chỉnh được đổi thành vanilla js sẽ được viết trong tệp bước cuối cùng cho mỗi phần và được tải lên đầu tiên (cuối tháng 1 đến đầu tháng 2).
Và lớp về quá trình chuyển sang Vanilla JS sẽ được upload định kỳ trong tháng 2 (Dễ đến nỗi hầu hết mọi người sẽ không xem^.^;) :D
Tôi hy vọng rằng các lớp học cập nhật sẽ giúp ích rất nhiều cho những ai đang gặp khó khăn.
Vâng, tôi chúc bạn có một năm mới vui vẻ và một kỳ nghỉ Tết Nguyên đán vui vẻ.
Cảm ơn bạn :D
Xin chào :)
Tôi đang gửi cho bạn một email để thông báo cho bạn về trạng thái cập nhật :)
Phần cơ bản và quan trọng nhất của tương tác cuộn là phần 2 đến phần 5 !
Trước hết mình đã tạo một phần mới và upload lên, mình nghĩ nó sẽ dễ hiểu hơn trước!
- Cập nhật thông tin lịch trình -
Thực ra, tôi có một cái cổ rất tệ. Khi bạn mệt mỏi, tình trạng viêm có xu hướng xảy ra và cổ họng của bạn có xu hướng bị tắc nghẽn.
Vì vậy, tôi đã gặp khó khăn khi ghi lại nó trước đây.
Tôi đã cố gắng lên giọng thật to để thu âm ở mức âm lượng vừa phải, nhưng một số khoảnh khắc khó xử đã nảy sinh.
Lần này, tôi đã gắng sức quá mức trong khi cập nhật và cổ tôi bị viêm. Và vì có Tết Nguyên Đán
Các lớp thực hành trước đây được viết bằng jQuery dự kiến sẽ được cập nhật vào khoảng cuối tháng 1. :(
Và lớp thay đổi sang vanilla js sẽ được cập nhật vào tháng 2 .
Tôi gửi email cho bạn vì tôi nghĩ có một số người đang vội chờ đợi.
Chúng tôi sẽ cố gắng tạo ra những lớp học có ý nghĩa nhanh nhất có thể.
Cảm ơn :)
Xin chào :) Đây là Kang Coding.
Trước tiên, tôi xin gửi lời cảm ơn chân thành tới tất cả các em học viên đã tham gia khóa học tương tác cuộn. ^_^
Khi tôi tạo tương tác cuộn lần đầu tiên, tôi đã tạo một lớp tập trung vào việc tìm hiểu các nguyên tắc .
Thời gian trôi qua, tôi nhận ra rằng mình không thể làm hài lòng tất cả học sinh của mình.
Vì vậy, tôi rời lớp học hiện tại như một phần lý thuyết.
Chúng tôi đã thêm một bài học thực hành (sử dụng jquery) để tìm hiểu trong quá trình thực hiện để mọi người, ngay cả những người mới bắt đầu, đều có thể hiểu được.
Nó có thể không phải là toàn bộ phần , nhưng tôi muốn thêm một lớp thực hiện tương tác cuộn với vanilla SCRIPT mà không cần jquery. (Nếu âm lượng không quá lớn, các lớp vani cho tất cả các phần sẽ được thêm vào)
Tổng cộng có 2 lớp sẽ được thêm miễn phí .
Tôi cảm thấy có trách nhiệm với những lớp mình tạo và sẽ tạo ra những lớp làm hài lòng tất cả các bạn.
Bản cập nhật dự kiến sẽ hoàn thành vào tháng 1 và nếu có bất kỳ vấn đề đặc biệt nào thì nó sẽ được hoàn thành vào tháng 2 .
Một lần nữa xin cảm ơn bạn và tôi hy vọng rằng năm 2022 sẽ tràn ngập những điều tốt đẹp dành cho bạn.
Cảm ơn :)
Xin chào :)
Tất cả học sinh có học tốt và khỏe mạnh không?
Không gì khác hơn là mã ví dụ về tương tác cuộn đã được cập nhật ngày hôm nay, vì vậy tôi đang liên hệ với bạn.
Chi tiết cập nhật như sau.
1. Thêm mã hoàn thành phần 10
2. Thêm mã hoàn thành phần 11
Những ai tự mình phân tích được code có thể tham khảo code hoàn chỉnh.
Đối với những người có mục đích học tập, chúng tôi khuyên bạn nên hoàn thành các nhiệm vụ ở Phần 10 và 11.
Phần 10 và 11 là các lớp được tạo dựa trên những gì bạn đã học trước đó , vì vậy tôi khuyên bạn nên cố gắng tự giải chúng :)
Cảm ơn bạn :D

