<div class="container">
			<div class="projHeader">
				<div class="primaryText">Pagination UI</div>
				<div class="createdBy">Created By <a href="http://www.dropinks.com/pagination-interaction-in-css3/">Dropinks</a></div>
        <p class="message">For Better usability and interaction use web browsers - chrome, firefox</p>
  </div>
  <div class="stageContainer" id="stageContainer">

  </div>
</div>



<div class="footer">
  <div><a target="_blank" class='social'
    href="http://www.dropinks.com/pagination-interaction-in-css3/">Read Article</a></div>
  <div><a target="_blank"  class='social' href="https://twitter.com/dropinksblog">Twitter</a></div>
  <div><a target="_blank"  class='social' href="https://www.facebook.com/dropinksblog">Facebook</a></div>
  <div><a href="https://twitter.com/dropinksblog?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @dropinksblog</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>

html, body{
  width: 100%; 
  height: 100%; 
  font-family: 'Roboto', sans-serif;
}
.container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.stageContainer{
  background: #f9f9f9;
  border: 1px solid #1372e6;
  border-radius: 4px;
  white-space: nowrap;
  overflow: auto;
  counter-reset: section;
  margin: 20px 0;
  display: inline-block;
}
.dotStage{
  width: 14px;
  height: 14px; 
  margin: 0px 13px;
  padding: 20px 0;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.dotStage:after{
  counter-increment: section;
  content: counter(section);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  font-size: 14px;
  color: #fff;
  transition: 0.3s all ease;
}
.dotStage.activeElm:after{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}
.dotStage.prevElm_1:after,
.dotStage.nextElm_1:after{
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(0.8);
}
.dotStage.prevElm_2:after,
.dotStage.nextElm_2:after{
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(0.5);
}

.dotStage:before{
  width: 14px;
  height: 14px; 
  content: "";
  transition: 0.5s all cubic-bezier(0.34, 1.56, 0.64, 1);;
  display: inline-block;
  border-radius: 20px;
  transform: scale(1);
  background: rgba(20, 115, 230, 0.4);
}
.dotStage.activeElm:before{
  transform: scale(2.7);
  background: rgba(20, 115, 230, 1);
}
.dotStage.prevElm_1:before,
.dotStage.nextElm_1:before{
  transform: scale(1.7);	
  background: rgba(20, 115, 230, 0.8);
}
.dotStage.prevElm_2:before,
.dotStage.nextElm_2:before{
  transform: scale(1.2);
  background: rgba(20, 115, 230, 0.6);	
}









body{
	background: -webkit-linear-gradient(-45deg, rgba(239,247,255,1) 0%, rgba(239,247,255,1) 15%, rgba(180,188,221,1) 100%);
}
.primaryText{
	font-weight: 300;
	font-size: 50px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.secondaryText{
	font-weight: 300;
	font-size: 25px;
}
.createdBy {
    font-weight: 300;
    font-size: 17px;
    margin-top: 10px;
}
.createdBy a{
    color: #333;
    font-weight: 500;
}
.message {
    background: rgba(255, 255, 255, 0.31);
    padding: 10px;
    display: inline-block;
    font-family: roboto;
    text-align: center;
    color: #000;
    margin: 25px 0;
    font-size: 13px;
    box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
    border-radius: 4px;
}
.projHeader{
	text-align: center;
}

.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
.footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}

var maxcount = 20;
function createDotElement(){
  for(var i=0; i<maxcount; i++){
    var spanElm = $("<span>");
    spanElm.addClass("dotStage");
    $("#stageContainer").append(spanElm);
  }
}
function resetClass(){
  var stageContainer = $("#stageContainer");
  stageContainer.find(".dotStage").removeClass("activeElm");
  stageContainer.find(".dotStage").removeClass("prevElm_1");
  stageContainer.find(".dotStage").removeClass("prevElm_2");
  stageContainer.find(".dotStage").removeClass("prevElm_3");
  stageContainer.find(".dotStage").removeClass("nextElm_1");
  stageContainer.find(".dotStage").removeClass("nextElm_2");
  stageContainer.find(".dotStage").removeClass("nextElm_3");
}
function bindEvents(){
  var stageContainer = $("#stageContainer");
  stageContainer.find(".dotStage").on("mouseenter", function(ev){
    var targetElm = $(ev.target);
    if(targetElm.hasClass("dotStage")){
      resetClass();
      var targetIndex = targetElm.index();
      targetElm.addClass("activeElm");

      $(stageContainer.find(".dotStage")[targetIndex-1]).addClass("prevElm_1");
      $(stageContainer.find(".dotStage")[targetIndex-2]).addClass("prevElm_2");
      $(stageContainer.find(".dotStage")[targetIndex-3]).addClass("prevElm_3");

      $(stageContainer.find(".dotStage")[targetIndex+1]).addClass("nextElm_1");
      $(stageContainer.find(".dotStage")[targetIndex+2]).addClass("nextElm_2");
      $(stageContainer.find(".dotStage")[targetIndex+3]).addClass("nextElm_3");
    }
  })
}
$(document).ready(function(){
  maxcount = (window.innerWidth > 300)?10:10;
  createDotElement();
  bindEvents();
})