Blob merge pager

by 3rror404

HTML

<ul class="pager blobby">
  <li class="select"></li>
  <li class="page"></li>
  <li class="page"></li>
  <li class="page"></li>
  <li class="page"></li>
  <li class="page"></li>
</ul>

CSS

body {
  padding: 40px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
 
}

.pager{
  list-style-type:none;
  background:white;
  -webkit-filter:blur(5px) contrast(9);
  -moz-filter:blur(5px) contrast(9);
  filter:blur(5px) contrast(9);
  padding:0;
  margin:0;
  padding-top:20px;
  padding-bottom:20px;
  padding-left:20px;
  margin-left:-10px;
  padding-right:10px;
  position:relative;
  left:100px;
  top:30px;
}

.page {
  display:inline-block;
  vertical-align:middle;
  border-radius:100%;
  width:30px;
  height:30px;
  background:black;
  margin-left:5px;
  margin-right:5px;
  cursor:pointer;
  color:white;
  position:relative;
  z-index:2;
}

.select{
  display:block;
  border-radius:100%;
  width:40px;
  height:40px;
  background: #000;
  opacity:1;
  transition:transform .5s ease-in-out;
  -webkit-transform: translateX(18px);
  -moz-transform: translateX(18px);
  transform: translateX(18px);
  position:absolute;
  z-index:3;
  top:15px;
  left:0px;
  pointer-events:none;
}

JavaScript

$(document).ready(function() {
  $('.page').click(function() {
    var $this = $(this);
    var posLeft = $(this).position().left;
    var $select = $('.select');
    var selectLeft = $select.position().left;
    
    $select.css({'transform':'translateX('+posLeft+'px)'});
  });
});