A New Concept to Style CSS Pagination With Animation

Style CSS Pagination With Animation

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 clicks on the page (Dot or Number) it slides the all fixed number of items to replace a new one.

Style CSS Pagination With Animation

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.

CSS Pagination With Animation

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 the first one is active states.

As the user clicks on the second page, it scrolls up and replaces 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 to slide up effect by bring new items while clicking on the previous number; it slides bring back the previous items.

HTML Markup

The central concept is base on radio button which controls through the label. Each input type radio has 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>

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *