Cách đơn giản để tạo hiệu ứng cuộn trang vô tận cho website

Thứ tư - 06/06/2018 22:15

Có thể đã từng có lần bạn cố gắng cuộn trang thêm nữa khi mà thực tế đã load đến tận đáy của thiết kế web đó.

Cách đơn giản để tạo hiệu ứng cuộn trang vô tận cho website

Cách đơn giản để tạo hiệu ứng cuộn trang vô tận cho website

Trong một số trường hợp, việc nhấn chuột liên tục để xem trang tiếp theo sẽ có thể gây cản trở.  Trong những trường hợp này, phân trang không phải là một công cụ chuyển hướng hữu ích, mà là sự gián đoạn cho việc duyệt web. Cuộn trang vô hạn là một giải pháp thay thế mang lại hiệu quả và trải nghiệm người dùng mượt mà hơn cho thiet ke website của bạn. 

Điều này đặc biệt đúng khi bạn cần duyệt một lượng lớn thông tin bị chia nhỏ thành từng phần. Ví dụng điển hành có thể kể đến là giao diện của Twitter, trang tin tức, tumblogs,gallery ảnh hoặc tương tự như thế. 

Đương nhiên kỹ thuật này không phải dành cho mọi người hoặc mọi dự án. Với những người muốn mang đến trải nghiệm liền mạch thông qua kỹ thuật cuôn trang không giới hạn cho thiết kế web thì dưới đây là một số cách hiệu quả để áp dụng chúng vào trang web: 

Cuộn trang không giới hạn cho các trang tĩnh

Trong hầu hết trường hợp, bạn có thể làm việc này cho trang hoặc ứng dụng của mình để có được các mảng nội dung động được lưu trữ trong cơ sở dữ liệu. Chúng tôi đã quyết định gắn kèm link để giải quyết vấn đề xung quanh các trang tĩnh vì 2 lý do: 

  • Bạn có thể cần được biết cách làm nó một cách đặc biệt. Nhưng bạn vẫn chưa biết làm thế nào. 
  • Một khi bạn biết cách thêm kỹ thuật cuộn trang không giới hạn vào trang tĩnh, bạn có thể sẽ đưa kỹ thuật tương tự vào bất kỳ CMS hoặc CMS theme mà bạn thấy thân quen nhất.

Bạn có thể xem thêm tutorial hướng dẫn làm hiệu ứng cuộn trang không giới hạn hoặc tại Infinite Scroll và so sánh hai cách làm với nhau. 

Cuộn trang không giới hạn cho trang Wordpress

Chúng tôi không biết liệu còn thiếu plugin gì dành cho WordPress hay không, và dĩ nhiên cuộn trang vô tận cũng đã nằm trong số những plugin có sẵn ở đó. 

Đầu tiên, một lần nữa chúng ta lại đến với Infinite Scroll. Đây là địa chỉ trang chính cung cấp plugin cần thiết cho bạn. Hãy tìm hiểu kỹ cách làm qua các tài liệu đi kèm. 

Tiếp theo, chúng ta có Automattic, công ty đứng sau WordPress, họ luôn muốn mang lại cho chúng ta những thứ tốt đẹp nhất. họ tạo ra  Jetpack module, các cũng sẽ mang cuộn trang vô tận vào theme của bạn. Một lần nữa bạn sẽ cần tùy chỉnh plugin để làm việc với theme đặc biệt của mình. 

Nhưng điều gì xảy ra nếu bạn muốn sử dụng code? WPTuts+ có câu trả lời cho bạn với tutorial  in-depth tutorial của mình.  Tutorial này là tất cả những gì bạn cần để áp dụng cuộn trang vô tận vào theme. Nó được khuyến khích dùng cho những ai có tầm hiểu biết thông thường về code. 

Cuộn trang không giới hạn cho Tumblr theme

Rất nhiều chuyên gia thiet ke website và lập trình viên sử dụng tumblr để chia sẻ suy nghĩ của mình và về công việc. Vậy bạn có muốn Tumblr theme của mình cũng có hiệu ứng cuộn trang không giới hạn cũng giống như dashboard? Chúng tôi sẽ giới thiệu một tutorial hướng dẫn cách tạo cuộn trang không giới hạn cho Tumblr theme, nó giúp bạn không tốn một dòng code nào và lại còn đặc biệt đơn giản. Tuy rằng có thể bạn sẽ phải trả một khoản phí để sở hữu tutorial xong chưa chắc nó đã hoạt động được với mọiTumblr theme.

Cuộn trang không giới hạn cho hỗn hợp với plugin khác

jQuery Masonrylà một plugin cổ điền để tạo bố cục theo phong cách masonry trên website. Bố cục dạng masonry thể hiện một lượng nhỏ thông tin thì thường dùng cuộn trang không giới hạn là tốt nhất. Các website như vậy không phải là ít. Với các website tĩnh, bạn có thể lấy ví dụ của Pinterest.

Isotope cũng tương tự như chức năng của Masonry và nó được tạo ra để giúp mọi người thực hiện bố cục dạng masonry. Theo ý kiến của một số chuyên gia thì xem ra nó còn tốt hơn bố cục Masonry. Cơ bản bởi vì thông qua các bản dùng thử và lỗi, người ta có thể tạo ra một bố cục responsive masonry thực sự với jQuery plugin này.

Tác giả bài viết: Phùng Thanh Hằng