jQuery scrolling by mouse position

by William Green

HTML

<div id="holder"></div>

CSS

#holder {
    background: pink;
    width: 500px;
    height: 500px;
    overflow:hidden;
    line-height: 30px;
    margin-left: 100px;
}

.si{
  width:150px;
  height:150px;
  background-color:#000;
  border-radius:50%;
  display:inline-block;
  margin:10px;
  -o-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -webkit-transition:all .3s ease;
  -ms-transition:all .3s ease;
  transition:all .3s ease;
}
.si:hover{
  width:160px;
  height:160px;
  margin:2px;
}

JavaScript

window.addEventListener('load',function(){
  var holder = document.getElementById('holder');
  for(var i = 0; i < Math.floor(holder.offsetWidth/150)*Math.floor(holder.offsetHeight/150); i++){
    var circle = document.createElement('div');
    circle.className = 'si';
    holder.appendChild(circle);
  }
  document.getElementById('holder').addEventListener('mousemove',function(e){
    
  });
});


//var sum = 0;
/*$("#scroll li").each(function() {
    sum += $(this).width() + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('paddingRight'))
});
$("#scroll").css('width', sum);

$("#holder").mousemove(function(e) {
    x = -(((e.pageX - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingLeft')) + parseInt($("#scroll").css('paddingRight')) - $("#holder").width()));

    $("#scroll").css({
        'marginLeft': x + 'px'
    });
});*/