CSS hiệu ứng cuộn

Lưu ý rằng bất kỳ cuộn nào khác, chẳng hạn như cuộn do người dùng thực hiện, không bị ảnh hưởng bởi thuộc tính này. Khi thuộc tính này được chỉ định trên phần tử gốc, thay vào đó, nó sẽ áp dụng cho chế độ xem. Thuộc tính này được chỉ định trên phần tử body sẽ không lan truyền đến chế độ xem

Tác nhân người dùng được phép bỏ qua thuộc tính này

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

Thuộc tính scroll-behavior được chỉ định là một trong các giá trị từ khóa được liệt kê bên dưới

auto

Hộp cuộn cuộn ngay lập tức

Hộp cuộn cuộn một cách mượt mà bằng cách sử dụng chức năng định thời gian do tác nhân người dùng xác định trong khoảng thời gian do tác nhân người dùng xác định. Tác nhân người dùng phải tuân theo các quy ước nền tảng, nếu có

Giá trị ban đầu auto Áp dụng cho hộp cuộnKhông kế thừaKhông có giá trị được tính toánnhư đã chỉ địnhKiểu hoạt ảnhrời rạc

Cuộn là một trong những tác vụ cơ bản nhất mà chúng tôi yêu cầu người dùng. Và, đánh giá từ lượng cuộn trên các trang web và ứng dụng ngày nay – chúng tôi đang yêu cầu rất nhiều

Thêm hiệu ứng dựa trên cuộn có thể là một cách tuyệt vời để nâng cao trải nghiệm người dùng. Đó là, miễn là chúng không can thiệp vào khả năng điều hướng qua các đoạn nội dung dài. Nếu có, các hiệu ứng sẽ giúp mọi thứ dễ dàng hơn và thêm một chút tinh tế vào hỗn hợp

Đây là một bộ sưu tập các hiệu ứng và tiện ích cuộn sẽ khiến khách truy cập của bạn kinh ngạc và (hy vọng) tránh xa họ

Từng phần của Naoya

Các trang web hiện đại thường được chia thành nhiều phần nội dung – mỗi phần có các yếu tố riêng biệt. Đoạn mã tiện dụng này thêm một nút (có nhiều kiểu khác nhau) vào cuối màn hình cho phép người dùng nhấp và cuộn xuống phần tiếp theo. Nó sử dụng các ID CSS kết hợp với jQuery để điều hướng hoạt động

Xem bản demo
của Bút. Nút cuộn xuống CSS của Naoya

Tất cả các dấu hiệu cho biết bạn đang cuộn bởi MadeByMike

Các chỉ báo cuộn đã trở nên rất phổ biến trên các trang web có nhiều nội dung. Họ truyền đạt mức độ hiểu biết của người dùng đối với một câu chuyện theo một phương pháp dễ hiểu. Phần thưởng rằng giải pháp này chỉ dành cho CSS

Xem chỉ báo cuộn chỉ Pen CSS của Mike

Bạn có thể cuộn nếu bạn muốn bởi Ryan Mulligan

Được rồi, đoạn mã này không nhất thiết phải có hiệu ứng riêng. Nhưng nó phục vụ một mục đích. Vì vậy, các nhà thiết kế thường sử dụng hình nền toàn màn hình và các yếu tố khác có thể khiến việc cuộn trở nên mơ hồ đối với người dùng. Cùng với đó, các mục nhỏ như biểu tượng cuộn động này cho người dùng biết rằng có, có nhiều nội dung hơn bên dưới. Nó không phù hợp với mọi tình huống, nhưng có những lúc nó có ý nghĩa

Xem Pen CSS Site Scroll Micro Animation của Ryan Mulligan

Cú đánh đầu thu nhỏ đáng kinh ngạc của Blake Bowen

Các tiêu đề dính như thế này đã trở thành một mặt hàng chủ lực trong những năm qua. Tại sao? . Khả năng điều hướng đến các khu vực khác của trang web mà không cần phải cuộn lên đầu trang giúp cuộc sống dễ dàng hơn. Như thường lệ, ví dụ này co lại thành một phần tử nhỏ gọn hơn khi bạn cuộn trang xuống

Xem Tiêu đề cuộn bút của Blake Bowen

Trượt sang phải bởi Ettrics

Đây là một cách khác trên tiêu đề dính. Lần này, nó được tinh chỉnh cho trang web một trang. Điều hướng trên cùng tự động làm nổi bật phần nội dung hiện tại và cho phép người dùng nhanh chóng chuyển đổi giữa chúng

Xem Điều hướng thanh trượt dính trên bút (Responsive) của Ettrics

Màu sắc bay của JP Nothard

Chúng ta hãy xem một đoạn mã khác sẽ rất phù hợp cho các trang web một trang hoặc một trang dài có nhiều phần nội dung. Nó sử dụng CSS và một chút jQuery để thay đổi màu nền khi bạn cuộn xuống (và vâng, nó cũng hoạt động ngược lại). Bạn cũng có thể muốn xem một tập lệnh thực hiện điều tương tự, nhưng với độ dốc

Xem Bút đổi màu nền khi cuộn phiên bản 2 của JP Nothard

Biến dọc thành ngang bằng SitePoint

Bạn đã bao giờ muốn trang web của mình cuộn theo chiều ngang thay vì theo chiều dọc chưa? . Nhưng nếu bạn không muốn có một thanh cuộn ngang thì sao? . Nó sử dụng một tập lệnh có tên là jInvertScroll, biến trang web của bạn thành một trình cuộn bên, hoàn chỉnh với các hiệu ứng thị sai

Xem Cuộn bên bút từ jInvertScroll của SitePoint

Hoạt hình khi cuộn bởi Snik

Trong số các xu hướng lớn hơn ngày nay là tạo hoạt ảnh cho nội dung khi nó xuất hiện trong chế độ xem. Khi được thực hiện một cách trang nhã, nó có thể thu hút sự chú ý đến từng phần. Nhưng đi quá xa và nó giống như một màn xiếc trực tuyến hơn. Nếu bạn quyết định lao vào, hãy xem xét đoạn trích này. Nó được hỗ trợ bởi thư viện AOS (animate on scroll)

Xem Pen AOS – hình ảnh động của Snik

Cuộn trên, Người dùng web

Ngày trước, suy nghĩ phổ biến là tránh cuộn bằng mọi giá. Giờ đây, phương tiện truyền thông xã hội và điện thoại thông minh đã huấn luyện chúng ta sử dụng ngón tay cái (và con trỏ) để bao phủ những khoảng không gian dài. Vì vậy, chúng tôi cũng có thể làm cho nó vui vẻ và hữu ích

Đó là những gì các đoạn trên nhằm mục đích làm. Chúng bao gồm nhiều trường hợp sử dụng khác nhau và phần lớn, tránh xa việc gây khó chịu. Đó là tất cả những gì về việc xây dựng một UX vững chắc

Làm cách nào để tạo cuộn trong CSS?

Làm cách nào để tạo CSS hoạt hình cuộn?

Hiệu ứng cuộn là gì?

Làm cách nào để cuộn văn bản trong CSS?