Cách thay đổi tốc độ cuộn bằng CSS – làm chậm tốc độ cuộn html

Bạn đang xem : làm chậm tốc độ cuộn html

Thay đổi tốc độ cuộn trên trang web có thể khó. Vì tốc độ được kiểm soát bởi cài đặt trình duyệt web chứ không phải trang web. Cách giải quyết phổ biến nhất là sử dụng JavaScript để phát hiện sự kiện chuột sau đó tính toán tốc độ cuộn mới và di chuyển nội dung đến vị trí mới. Tuy nhiên, trong bài đăng này, chúng tôi sẽ hướng dẫn bạn cách sử dụng CSS để thay đổi tốc độ cuộn mà không cần JavaScript. Hãy cùng khám phá!

Khái niệm

Chúng tôi sẽ sử dụng khái niệm giống như hướng dẫn cuộn thị sai CSS thuần túy trước đây của tôi

“Thị sai là hiệu ứng mà vật thể ở xa có vẻ chuyển động chậm hơn so với vật thể ở gần mắt”

css-parallax-effect

Vì vậy, nếu chúng ta đẩy div hiện có sâu hơn vào phía sau (dọc theo trục z) và sau đó cuộn, chúng ta sẽ thấy nó di chuyển chậm hơn như bạn có thể thấy trong hình trên.

Nhưng việc đẩy div về phía sau sẽ khiến nó có vẻ nhỏ hơn (tất nhiên là xa hơn!) Vì vậy, chúng tôi sẽ khắc phục điều này bằng cách thu nhỏ lại bằng cách sử dụng biến đổi CSS.

Và thế là xong. Nên dễ dàng. Không?

Đầu tiên, hãy lấy một mẫu trang web vì tôi quá lười để thiết lập một mẫu. Tôi sẽ tải xuống từ templated.co . Sử dụng mẫu đáp ứng trên toàn trang web như thế này cũng là một cách tốt để kiểm tra xem phương pháp của chúng tôi có gây ra bất kỳ sự cố nào không.

Xem Thêm  Bài 4: Toán tử và biểu thức trong C - toán tử điều kiện trong c

css-change-scroll-speed-1

Trước tiên, hãy thêm 2 trình bao bọc để bọc mọi thứ bên dưới & lt; body & gt; thẻ

 & lt; body & gt;
   & lt; div class = "scroll-wrapper" & gt;
       & lt; div class = "scroll-wrapper2" & gt;
...
       & lt; / div & gt;
   & lt; / div & gt; 

Bây giờ là CSS. Trước tiên, tôi sẽ xóa bất kỳ phần đệm nào do mẫu đặt và thêm phần tràn: ẩn vào phần nội dung. Thao tác này sẽ tắt tất cả các thanh cuộn vì chúng tôi muốn sử dụng thanh cuộn trên trình bao bọc.

 body {
  đệm: 0;
  tràn: ẩn;
} 

Đối với trình bao bọc đầu tiên, chúng tôi sẽ cố định kích thước thành 100% khung nhìn và bật thanh cuộn dọc trong khi tắt thanh ngang. Sau đó, thêm phối cảnh 1px. Điều này là để đặt tỷ lệ phối cảnh thành 1px. Vì vậy, khi bạn đẩy div lùi lại 1px, nó sẽ xuất hiện nhỏ hơn một nửa.

. scroll-wrapper {
  chiều rộng: 100vw;
  chiều cao: 100vh;
  tràn-y: auto;
  tràn-x: ẩn;
  phối cảnh: 1px;
  biến đổi phong cách: bảo tồn-3d
} 

Bây giờ, hãy thử đẩy trình bao bọc thứ hai trở lại 1px;

. scroll-wrapper2 {
  biến đổi: translateZ (-1px);
} 

css-change-scroll-speed-2

Bạn sẽ thấy rằng, toàn bộ trang web xuất hiện ở một nửa kích thước. Bây giờ hãy mở rộng quy mô lại. Đồng thời đặt vị trí thành tuyệt đối để cố định vị trí của nó. Bạn sẽ nhận thấy rằng tôi đã đặt thuộc tính bên trái thành -10px bên trái. Điều này là để loại bỏ một khoảng cách nhỏ do mở rộng quy mô.

. scroll-wrapper2 {
  vị trí: tuyệt đối;
  đầu: 0;
  đúng: 0;
  đáy: 0;
  trái: -10px;
  lề: 0;
  đệm: 0;
  biến đổi: translateZ (-1px) scale (2);
} 

Và đây là kết quả cuối cùng, trông giống nhau nhưng cuộn chậm hơn nhiều! Ngoài ra, nó vẫn phản hồi!

Xem Thêm  LỆNH SQL BẰNG MÔ TẢ - thứ tự giảm dần trong sql

css-change-scroll-speed-3

Đó là tất cả cho hướng dẫn này. Vui lòng thích hoặc đăng ký Kênh Facebook Youtube của chúng tôi để theo dõi các mẹo và hướng dẫn dành cho nhà phát triển hàng tuần của chúng tôi. Cảm ơn bạn đã ghé thăm 🙂

Viết bởi

TK

Kỹ sư, Nhà phát triển web, Nhà phát triển phần mềm của Quỹ tương hỗ. Anh thành lập Red Stapler vào năm 2015 để chia sẻ những nguồn hữu ích cho tất cả mọi người quan tâm đến thiết kế web, phát triển và lập trình web. Đăng ký Kênh YouTube hoặc Trang Facebook của anh ấy để biết các mẹo và hướng dẫn hàng tuần.


Xem thêm những thông tin liên quan đến chủ đề làm chậm tốc độ cuộn html

[Arabic] HTML, CSS, JavaScript Tutorials – Animate Width On Scrolling

alt

  • Tác giả: Elzero Web School
  • Ngày đăng: 2021-10-27
  • Đánh giá: 4 ⭐ ( 5289 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Animate Width On Scrolling

    Code & Notice:
    https://elzero.org/tutorials-animate-width-on-scrolling/

    =============================

    Support Me on Patreon to Help me Create More Videos
    https://www.patreon.com/OsamaElzero

    I will be Very Happy if you Support my Channel.
    http://elzero.org/support/

    Join Our Facebook Group:
    https://www.facebook.com/groups/ElzeroWebSchool/

    Follow My Facebook Profile:
    https://www.facebook.com/OsElzero

    Like Facebook Page:
    https://www.facebook.com/ElzeroWebSchool/

    Follow Me On Twitter:
    https://twitter.com/Osama_Elzero

24 Cách tăng tốc độ website WordPress 2021 (Không cần biết code)

  • Tác giả: leading.vn
  • Đánh giá: 3 ⭐ ( 1465 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có muốn tăng tốc trang web WordPress của mình không? Các trang web tải nhanh giúp cải thiện đáng kể trải nghiệm người dùng, tăng số lần xem trang của

10 cách tăng tốc độ website cơ bản

  • Tác giả: atpweb.vn
  • Đánh giá: 5 ⭐ ( 2748 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tăng tốc độ website là bước quan trọng đối với một trang Web. Web tối ưu tốt có thời gian load nhanh có thể đạt được xếp hạng cao trên trình tìm kiếm Google, lôi cuốn các lượt click nhiều hơn.

Kiểm soát tốc độ video HTML5 cho Google Chrome ™

  • Tác giả: chrome.google.com
  • Đánh giá: 4 ⭐ ( 4317 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Javascript làm chậm trang của bạn ? Tăng tốc độ load trang với kỹ thuật Asynchronous và Deferred

  • Tác giả: www.jamviet.com
  • Đánh giá: 3 ⭐ ( 7888 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Website với nhiều script javascript thực thi sẽ làm giảm tốc độ load trang, làm trình duyệt đơ giật. Tăng tốc độ load trang với kỹ thuật Asynchronous và Deferred là kỹ thuật tốt nhất để tăng tốc website của bạn. – Blogger Jam Việt

Hiệu ứng chuyển đổi Transition trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 4445 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính Transition trong CSS được sử dụng khá rộng rãi trong thiết kế web để tạo ra các hiệu ứng chuyển đổi đẹp mắt trên website một cách dễ dàng.

10 cách giúp tăng tốc độ load website giúp website bạn tải nhanh như bay

  • Tác giả: hoclaptrinhweb.org
  • Đánh giá: 5 ⭐ ( 5599 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Sòng bạc trực tuyến Việt Nam 2022 - progressive web apps là gì