Interactive circles

In this example below you will see how to do a Interactive circles with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by drewhaas, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright drewhaas ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Interactive circles</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="circle-container"></div>
<a href="https://www.openwebgames.com/#/home.html" target="_blank">Live Example</a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/drewhaas/interactive-circles-wGRYJa */
html, body {
  background-color: #111;
}

.circle-container {
  width: 100%;
  height: 100vh;
}

.circle {
  float: left;
  width: 15px;
  height: 15px;
  background-color: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  opacity: .4;
}

.bumper {
  position: relative;
  float: left;
  /* top: 75px;
  left: 200px; 
  border: 2px solid red; */
  padding: 10px;
  border-radius: 50%;
  overflow: auto;
}
.bumper:hover .circle {
  /*  transform: scale(1.4);
   border: 2px solid #bfe2ee; */
}

a {
  float: left;
  bottom: 0;
}


/*Downloaded from https://www.codeseek.co/drewhaas/interactive-circles-wGRYJa */
fillWithCircles();
//$(window).resize(fillWithCircles);
function fillWithCircles(){
	$('.bumper').remove();

	var windowHeight = $('body').height() + 50,
    	windowWidth = jQuery(window).width() + 50,
    	windowArea = windowHeight * windowWidth,
    	circleSize = 40,
    	circleArea = circleSize * circleSize;

    while (circleArea < windowArea) {
    	$( '.circle-container' ).append( '<span class="circle"></span>' );
    	circleArea += 1600;
    	/*circleWidth += circleSize;
    	if (circleWidth > 1024){
    		circleHeight += circleSize;
    	}*/
    }
    //console.log(circleArea, 'CIRCLE AREA');
    //console.log(windowArea, 'VIEW AREA');

}

Math.Vector = function(x, y) {
  this.x = x;
  this.y = y;
}
Math.Vector.prototype = {
  clone: function() {
    return new Math.Vector(this.x, this.y);
  },
  negate: function() {
    this.x = -this.x;
    this.y = -this.y;
    return this;
  },
  neg: function() {
    return this.clone().negate();
  },
  addeq: function(v) {
    this.x += v.x;
    this.y += v.y;
    return this;
  },
  subeq: function(v) {
    return this.addeq(v.neg());
  },
  add: function(v) {
    return this.clone().addeq(v);
  },
  sub: function(v) {
    return this.clone().subeq(v);
  },
  multeq: function(c) {
    this.x *= c;
    this.y *= c;
    return this;
  },
  diveq: function(c) {
    this.x /= c;
    this.y /= c;
    return this;
  },
  mult: function(c) {
    return this.clone().multeq(c);
  },
  div: function(c) {
    return this.clone().diveq(c);
  },

  dot: function(v) {
    return this.x * v.x + this.y * v.y;
  },
  length: function() {
    return Math.sqrt(this.dot(this));
  },
  normal: function() {
    return this.clone().diveq(this.length());
  }
};

function evade(evt) {
  var $this = $(this),
    dom = $this[0],
    corner = $this.offset(),
    center = {
      x: corner.left + $this.outerWidth() / 2,
      y: corner.top + $this.outerHeight() / 2
    },
    dist = new Math.Vector(center.x - evt.pageX, center.y - evt.pageY),
    closest = $this.outerWidth() / 2;

  // proximity test
  if (dist.length() >= closest) {
    return;
  }

  // calculate new position
  var delta = dist.normal().multeq(closest).sub(dist),
    newCorner = {
      left: corner.left + delta.x,
      top: corner.top + delta.y
    };
  if (!dom.foo) {
    dom.foo = newCorner;
    console.log(newCorner, 'New Corner');
  }

  // bounds check
  var padding = parseInt($this.css('padding-left'));
  if (newCorner.left < -padding) {
    newCorner.left = -padding;
  } else if (newCorner.left + $this.outerWidth() - padding > $(document).width()) {
    newCorner.left = $(document).width() - $this.outerWidth() + padding;
  }
  if (newCorner.top < -padding) {
    newCorner.top = -padding;
  } else if (newCorner.top + $this.outerHeight() - padding > $(document).height()) {
    newCorner.top = $(document).height() - $this.outerHeight() + padding;
  }

  // move bumper
  $this.offset(newCorner);
}

function beginEvade() {
  $(this).bind('mousemove', evade);
}

function endEvade() {
  $(this).unbind('mousemove', evade);
  resetEvade.apply(this);
}
var getPosition = function getPos(){
  
};

function resetEvade() {
  console.log('RESET FIRING');
  var $this = $(this),
      dom = $this[0],
      corner = $this.offset();
    
  if (dom.foo) {
    console.log(dom.foo);
    
    // animate bumper back to original spot
    $this.animate({
       top: 0,
       left: 0
    }, 500);
  }
}

$(function() {
  $('.bumber').uniqueId();
  $('.circle').wrap('<span class="bumper" />');
  $('.bumper').bind('mouseover', beginEvade);
  $('.bumper').bind('mouseout', endEvade);
});

Comments