You surely know that the new way of a load more content by click on a button or just by scrolling. Am I right? But how about to do the same thing by using pagination? Yes, that’s the concept I am going to share with you. It is animated solution which build by Henrique Rodrigues using pure CSS only.
The concept is somewhat similar to pagination slider. Something like Carousels where the fixed number of items or products are displayed and when user click on the page (Dot or Number) it slide the all fixed number of items to replace new one.
Pagination isn’t much needed for the site like providing some services, but it’s good to place on product or blog site. This new concept isn’t going to replace the load more type thing, but you can implement on where the items or product listed.
Implementing new things on any site design are make your site design unique in the market. It attracts your site visitor and love to stay more time on your site.
To allow the user to navigated the site easily, it’s important to place pagination and how about to give users new user experience by adding this new animated pagination Concept.
By default, three items get a display which can be can easily by modifying. It has placed the number pagination at the bottom of the items with first one is active states.
As the user clicks on the second page, it scrolls up and replace the old items with a new one. It also can show the page name at the top of items.
When user click on next pager (number), it gives user slide up effect by bring new items while clicking on the previous number; it slides bring back the previous items.
The central concept is base on radio button which controls through the label. Each input type radio have unique ID which will, later on, control through the label.
<input type="radio" name="input-paginacao" id="paginacao1" checked> <input type="radio" name="input-paginacao" id="paginacao2"> <input type="radio" name="input-paginacao" id="paginacao3"> <input type="radio" name="input-paginacao" id="paginacao4">
We have defined the wrapper
box-vitrines which hold the child divs for sets of items. To determine the number of an item, it needs to place inside a div which have a unique class like
vitrine1, vitrine2 ... etc. Each item is placed an unordered list.
<div class="box-vitrines"> <ul> <div class="vitrine1"> <h2>First Page</h2> <li>Item</li> <li>Item</li> <li>Item</li> </div> </ul> </div>
Finally, we have pagination controller that we can do by using the label.
<div class="btn-paginacao"> <ul> <li><label for="paginacao1">1</label></li> <li><label for="paginacao2">2</label></li> <li><label for="paginacao3">3</label></li> <li><label for="paginacao4">4</label></li> </ul> </div>
Now have a look the demo how it works.