Du lịch là một trong những nhiệm vụ cơ bản nhất mà chúng tôi yêu cầu người dùng. Và đánh giá bằng số lượng cuộn trên các trang web và ứng dụng hiện 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 để cải thiện trải nghiệm người dùng. Đó là, miễn là họ 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 bất cứ điều gì, các hiệu ứng sẽ làm cho 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 ngạc nhiên và (hy vọng) tránh xa bạn.
Mục theo phần
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ó sẵn trong nhiều kiểu) ở dưới cùng của màn hình cho phép người dùng nhấp và cuộn xuống phần tiếp theo. Sử dụng CSS ID cùng với jQuery để điều hướng hoạt động.
Xem bút
bản demo: Nút cuộn CSS của Naoya
Tất cả các dấu hiệu cho biết bạn đang di chuyển
Đồng hồ đo cuộn đã trở nên rất phổ biến trên các trang web giàu nội dung. Họ truyền đạt khoảng cách của một người dùng từ một câu chuyện theo một phương pháp dễ tiêu hóa. Phần thưởng mà giải pháp này chỉ là CSS.
Xem bút
Chỉ báo cuộn CSS chỉ bởi Mike (@MadeByMike)
Bạn có thể cuộn nếu bạn muốn
Chà, đoạn trích này không nhất thiết phải là một hiệu ứng. Nhưng nó phục vụ một mục đích. Rất thường xuyên, các nhà thiết kế 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 không rõ ràng cho người dùng. Cùng với đó, các yếu tố nhỏ như biểu tượng cuộn hoạt hình này cho người dùng biết rằng có, sẽ còn nhiều nội dung nữa. Nó không phù hợp cho tất cả các tình huống, nhưng có những lúc nó có ý nghĩa.
Xem bút
CSS Site Scroll Micro Animation của Ryan Mulligan
Các tiêu đề co lại đáng kinh ngạc
Tiêu đề dính như thế này đã trở thành một chủ lực trong những năm qua. Tại sao? Họ có thể thêm một tấn tiện lợi cho người dùng. Khả năng điều hướng đến các khu vực khác của một trang web mà không cần phải cuộn lên đầu trang chỉ đơn giản là làm cho cuộc sống dễ dàng hơn. Như thường lệ, ví dụ này thu nhỏ thành một phần tử nhỏ gọn hơn khi bạn cuộn xuống trang.
Xem bút
Tiêu đề cuộn của Blake Bowen
Trượt sang phải
Đây là một phiên bản khác của tiêu đề nhãn dán. Lần này, nó được thiết lập cho một 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 bút
Điều hướng thanh trượt dính (Responsive) của Ettrics
Đạt thành tích cao
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 trang dài với nhiều phần nội dung. Sử dụng CSS và một ít jQuery để thay đổi màu nền khi bạn cuộn xuống (và vâng, nó cũng hoạt động theo cách khác). Bạn cũng có thể muốn truy vấn một tập lệnh thực hiện điều tương tự, nhưng với độ dốc.
Xem bút
Thay đổi màu nền trong khi cuộn phiên bản 2 bởi JP Nothard
Chuyển đổi dọc sang ngang
Bạn đã bao giờ muốn trang web của bạn cuộn theo chiều ngang thay vì theo chiều dọc? Bạn có thể làm điều đó mà không có bất kỳ kịch bản ưa thích, tất nhiên. Nhưng nếu bạn không muốn một thanh cuộn ngang thì sao? Trong trường hợp đó, bạn sẽ cần một cái gì đó như ví dụ này. Nó sử dụng một tập lệnh gọi là jInvertScroll, giúp biến trang web của bạn thành một cuộn bên, hoàn thành với các hiệu ứng thị sai.
Xem bút
Cuộn bên từ jInvertScroll bởi SitePoint
Animate trên cuộn
Trong số các xu hướng quan trọng nhất hiện nay là hoạt hình nội dung khi nó đi vào cửa sổ đồ họa. Khi thực hiện với hương vị tốt, bạn có thể thu hút sự chú ý đến từng phần. Nhưng đi quá xa và giống như một hành động xiếc trực tuyến. Nếu bạn quyết định đi sâu, hãy xem xét đoạn trích này. Nó được cung cấp bởi thư viện AOS (Animated Scrolling).
Xem bút
AOS – Hoạt hình Snik
Cuộn, người dùng web
Trong quá khứ, suy nghĩ phổ biến là tránh dịch chuyển bằng mọi giá. Bây giờ, phương tiện truyền thông xã hội và điện thoại thông minh đã cho phép chúng tôi che những đoạn dài bằng ngón tay cái (và con trỏ). 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 mảnh trước đó dự định làm. Chúng bao gồm nhiều trường hợp sử dụng và, phần lớn, tránh gây phiền nhiễu. Đó là tất cả những gì xây dựng một UX vững chắc.
Tìm kiếm thêm ý tưởng? Hãy xem bộ sưu tập CodePen của chúng tôi để biết thêm các đoạn cuộn!
