Hey :) Here is the pagination UI for your web app or blog with some interaction while clicks on element. I am going to show you here how you could do it with CSS/javascript Animations.
Concepts Used
- HTML
- CSS
- Jquery
Check Demo
Initial setup
Create simple HTML and CSS with List items, so we can demonstrate some alternatives.
<div class="demoContainer">
<div class="paginationContainer" id="paginationContainer">
<span class="pageInnerElm" id="pageInnerElm"></span>
<ul class="paginationUl" id="paginationUl">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
.demoContainer{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 400px;}
body{background: #333; font-family: poppins;}
.paginationContainer{
position: relative;
display: flex;
justify-content: center;
}
.paginationUl{
list-style-type: none;
margin: 0;
padding: 0;
}
.paginationUl li{
box-sizing: border-box;
border: 2px solid #fff;
border-radius: 20px;
float: left;
width: 22px;
height: 22px;
margin: 0px 10px;
cursor: pointer;
}
.pageInnerElm{
content: "";
position: absolute;
left: 0px;
top: 6px;
width: auto;
height: 10px;
border-radius: 20px;
background: #fd1874;
display: none;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pageInnerElm.inProgress{
transform: scaleY(0.4);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.3s ease 0.1s, left 0.3s ease 0.1s;
}
To make this come to interact, we have to add a click event handler for the list items.
Add/Remove class names for scaling.
Update left/Right Position by finding offset of the active list element.
var paginationContainer = $("#paginationContainer");
var ul = $("#paginationUl");
var pageInnerElm = $("#pageInnerElm");
var ulLeft, ulRight;
function setActiveLi(elm){
var activeElm = ul.find("li.activeLi");
activeElm.removeClass("activeLi");
elm.addClass("activeLi");
}
function setPageInnerElm(liIndex){
var firstLi = $(ul.find("li")[liIndex]);
setActiveLi(firstLi);
var offset = {};
offset.left = firstLi.offset().left-paginationContainerLeft+6;
offset.right = window.innerWidth-firstLi.offset().left-paginationContainerLeft-16;
return offset;
}
$(document).ready(function(){
paginationContainerLeft = paginationContainer[0].getBoundingClientRect().left;
paginationContainerRight = paginationContainer[0].getBoundingClientRect().right;
var offset = setPageInnerElm(0);
pageInnerElm.css({"display": "block", "left": offset.left+"px", "right": offset.right+"px"});
})
ul.on("click", function(ev){
var activeElm = $(".activeLi");
var activeElmIndex = activeElm.index();
var targetElm = $(ev.target);
if(targetElm[0].nodeName === "LI"){
var targetElmIndex = targetElm.index();
var offset = setPageInnerElm(targetElmIndex);
pageInnerElm.addClass("inProgress");
if(targetElmIndex>activeElmIndex){
pageInnerElm.css({"right":offset.right+"px"});
pageInnerElm.off('transitionend');
pageInnerElm.on('transitionend', function() {
pageInnerElm.css({"left":offset.left+"px"});
pageInnerElm.removeClass("inProgress");
})
}
else{
pageInnerElm.css({"left":offset.left+"px"});
pageInnerElm.off('transitionend');
pageInnerElm.on('transitionend', function() {
pageInnerElm.css({"right":offset.right+"px"});
pageInnerElm.removeClass("inProgress");
})
}
}
});
Ok! I'm sure there are many more better ways to animate this pagination will try and update in some time, so if you are in the mood to comment, please do so!
Thank you for reading!
Top comments (0)