Home Web Development JavaScript jQuery Pagination Hover and Active Effect With CSS | Pagination Design

jQuery Pagination Hover and Active Effect With CSS | Pagination Design

September 16, 2019

6382

How we can create pagination with active and hover effect? Solution: See this jQuery Pagination Hover and Active Effect With CSS, Pagination Design With HTML CSS JS.

Previously I have shared an HTML CSS Pagination Design, but this is with some good effects. Pagination, also known as paging, is the process of dividing the website’s contents into multiple pages. And every blog and image websites use pagination and other some uses the load more feature.

Today you will learn to create a pagination design with HTML CSS JavaScript. Basically there is a horizontal list with numbers, which is a format of pagination design and it has a special hover effect and also it shows selected or active page. This is a perfect example of advanced pagination which features are powered by jQuery.

So, Today I am sharing jQuery Pagination Hover and Active Effect With CSS. Here I have used jQuery for the features, almost of the effects are created using jQuery. As you know this is a JS library that’s why I am putting this in JavaScript category. I think this program will very useful for you, and you will understand the codes easily.

If you are thinking now how this pagination actually is, then see the preview given below.

Preview Of Pagination Design

See this video preview to getting an idea of how this design looks like.

https://webdevtrick.com/wp-content/uploads/jquery-pagination.mp4?_=1

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this then get the source code of its.

jQuery Pagination Hover and Active Effect With CSS Source Code

Before sharing source code, let’s talk about it. First I have created the main div for pagination and put all the elements inside that like lists, arrow buttons, overlay div, etc. I have used a google font named Material Icon for creating the arrow buttons, and placed the same arrow in two sides and rotated the one by 180 degrees.

Now using CSS I have placed all the elements in the right place as you can see in the preview. There I have used CSS text-rendering: optimizeLegibility command to tell rendering engine about what to optimize for when rendering text (info). And also used many more basic CSS properties.

Here jQuery handling the most of the features, as you can see in the preview there is an amazing hover effect which is created using jQuery. Basically, here jQuery changing the CSS values dynamically according to action. Left all other things you will understand after getting the codes, I can’t explain in writing.

For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Pagintaion With Active and Hover Effect| Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="pagination">
    <div class="pagination-container">
        <div class="pagination-hover-overlay"></div>
        <a href="#0" class="pagination-prev">
            <span class="icon-pagination icon-pagination-prev">
                <i class="icon material-icons">
                    keyboard_arrow_left
                </i>
            </span>
        </a>

        <a href="#0" class="pagination-page-number">1</a>
        <a href="#0" class="pagination-page-number">2</a>
        <a href="#0" class="pagination-page-number">3</a>
        <a href="#0" class="pagination-page-number">4</a>
        <a href="#0" class="pagination-page-number">5</a>
        <a href="#0" class="pagination-page-number">6</a>
        <a href="#0" class="pagination-page-number">7</a>

        <a href="#0" class="pagination-next">
            <span class="icon-pagination icon-pagination-next">
                <i class="icon material-icons">
                    keyboard_arrow_left
                </i>
            </span>
        </a>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Pagintaion With Active and Hover Effect| Webdevtrick.com</title>

</head>

<body>

keyboard_arrow_left

</i>

</span>

</a>

keyboard_arrow_left

</i>

</span>

</a>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}
html,
body {
  overflow-x: hidden;
  height: 100%;
}
html {
  text-rendering: optimizeLegibility;
}
body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
}
a,
a:hover {
  text-decoration: none;
}
.pagination {
  display: flex;
  justify-content: center;
}
.pagination-container {
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.pagination-hover-overlay {
  background-color: #e60023;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition-duration: 0.5s;
  left: 60px;
  opacity: 0;
}
.pagination .icon-pagination {
  color: #e60023;
  font-size: 11px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  background-color: #fff;
}
.pagination-prev {
  margin-right: 15px;
  margin-left: 10px;
}
.pagination-prev .icon-pagination-prev {
  transform: rotate(0deg);
}
.pagination-next {
  margin-left: 15px;
  margin-right: 10px;
}
.pagination-next .icon-pagination-next {
  transform: rotate(180deg);
}
.pagination-page-number {
  border-radius: 5px;
  color: #212121;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.5s;
  position: relative;
  z-index: 2;
  font-weight: 700;
  font-size: 18px;
}
.pagination-page-number:hover {
  color: #fff;
}
.pagination-page-number.active {
  color: #fff;
}

100

101

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

* {

box-sizing: border-box;

font-family: sans-serif;

font-weight: 500;

letter-spacing: 0;

-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility !important;

-webkit-font-smoothing: antialiased !important;

}

html,

body {

overflow-x: hidden;

height: 100%;

}

html {

text-rendering: optimizeLegibility;

}

body {

padding: 0;

margin: 0;

display: flex;

align-items: center;

justify-content: center;

background-color: #f0f0f0;

}

a:hover {

text-decoration: none;

}

.pagination {

display: flex;

justify-content: center;

}

.pagination-container {

padding: 10px 0;

border-radius: 8px;

border: 1px solid rgba(0, 0, 0, 0.1);

background-color: #fff;

display: inline-flex;

position: relative;

overflow: hidden;

}

.pagination-hover-overlay {

background-color: #e60023;

width: 50px;

height: 50px;

border-radius: 5px;

position: absolute;

top: 50%;

transform: translateY(-50%);

transition-duration: 0.5s;

left: 60px;

opacity: 0;

}

.pagination .icon-pagination {

color: #e60023;

font-size: 11px;

width: 50px;

height: 50px;

display: flex;

align-items: center;

justify-content: center;

position: relative;

z-index: 3;

background-color: #fff;

}

.pagination-prev {

margin-right: 15px;

margin-left: 10px;

}

.pagination-prev .icon-pagination-prev {

transform: rotate(0deg);

}

.pagination-next {

margin-left: 15px;

margin-right: 10px;

}

.pagination-next .icon-pagination-next {

transform: rotate(180deg);

}

.pagination-page-number {

border-radius: 5px;

color: #212121;

width: 50px;

height: 50px;

display: flex;

align-items: center;

justify-content: center;

transition-duration: 0.5s;

position: relative;

z-index: 2;

font-weight: 700;

font-size: 18px;

}

.pagination-page-number:hover {

color: #fff;

}

.pagination-page-number.active {

color: #fff;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
let paginationLeftPos = "20px";
let paginationOpacity = 0;
let checkPaginationClick = 0;

$(".pagination-page-number").click(function () {
  $(".pagination-page-number").removeClass("active");
  $(this).addClass("active");
  paginationLeftPos = $(this).prop("offsetLeft") + "px";
  paginationOpacity = 1;
  checkPaginationClick = 1;

  $(".pagination-hover-overlay").css({
    left: paginationLeftPos,
    backgroundColor: "#e60023",
    opacity: paginationOpacity });

  $(this).css({
    color: "#fff" });

});

$(".pagination-page-number").hover(
function () {
  paginationOpacity = 1;
  $(".pagination-hover-overlay").css({
    backgroundColor: "#fa4949",
    left: $(this).prop("offsetLeft") + "px",
    opacity: paginationOpacity });


  $(".pagination-page-number.active").css({
    color: "#212121" });


  $(this).css({
    color: "#fff" });

},
function () {
  if (checkPaginationClick) {
    paginationOpacity = 1;
  } else {
    paginationOpacity = 0;
  }

  $(".pagination-hover-overlay").css({
    backgroundColor: "#e60023",
    opacity: paginationOpacity,
    left: paginationLeftPos });


  $(this).css({
    color: "#212121" });


  $(".pagination-page-number.active").css({
    color: "#fff" });

});

// Code By Webdevtrick ( https://webdevtrick.com )

let paginationLeftPos = "20px";

let paginationOpacity = 0;

let checkPaginationClick = 0;

$(".pagination-page-number").click(function () {

$(".pagination-page-number").removeClass("active");

$(this).addClass("active");

paginationLeftPos = $(this).prop("offsetLeft") + "px";

paginationOpacity = 1;

checkPaginationClick = 1;

$(".pagination-hover-overlay").css({

left: paginationLeftPos,

backgroundColor: "#e60023",

opacity: paginationOpacity });

$(this).css({

color: "#fff" });

});

$(".pagination-page-number").hover(

function () {

paginationOpacity = 1;

$(".pagination-hover-overlay").css({

backgroundColor: "#fa4949",

left: $(this).prop("offsetLeft") + "px",

opacity: paginationOpacity });

$(".pagination-page-number.active").css({

color: "#212121" });

$(this).css({

color: "#fff" });

function () {

if (checkPaginationClick) {

paginationOpacity = 1;

} else {

paginationOpacity = 0;

}

$(".pagination-hover-overlay").css({

backgroundColor: "#e60023",

opacity: paginationOpacity,

left: paginationLeftPos });

$(this).css({

color: "#212121" });

$(".pagination-page-number.active").css({

color: "#fff" });

});

That’s It. Now you have successfully created jQuery Pagination Hover and Active Effect With CSS, Pagination Design with HTML CSS JavaScript. If you have any doubt or question comment down below.

Thanks For visiting, Keep Visiting.