Follow My Mouse - 02

In this example below you will see how to do a Follow My Mouse - 02 with some HTML / CSS and Javascript

Using TweenMax Library to Follow The Mouse Cursor. Fun Stuff.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Follow My Mouse  -  02</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {
  background: #0E3741;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  background: #CB4B16;
  border-radius: 80%;
  backface-visibility: hidden;
  visibility: hidden;
  z-index: 1;
}

#box {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 200px;
  background: green;
  z-index: 0;
}

#wrapper {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 200px;
  z-index: 2;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  

<div id="box"></div>
<div class="circle"></div>
<div id="wrapper"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js'></script>
<script src='js/a08e0d79c150ff5030f9b6afa.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/follow-my-mouse-02-GQOdgJ */
html {
  background: #0E3741;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  background: #CB4B16;
  border-radius: 80%;
  backface-visibility: hidden;
  visibility: hidden;
  z-index: 1;
}

#box {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 200px;
  background: green;
  z-index: 0;
}

#wrapper {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 200px;
  z-index: 2;
}


/*Downloaded from https://www.codeseek.co/mikeK/follow-my-mouse-02-GQOdgJ */
// http://ahrengot.com/tutorials/greensock-javascript-animation

var $circle = $('.circle'),
    $wrapper = $('#wrapper'); 

  function moveCircle(e) {
    TweenLite.to($circle, 0.3, {
      css: {
        left: e.pageX,
        top: e.pageY
      }
    });
  }

var flag = false;
$($wrapper).mouseover(function(){
  flag = true;
  TweenLite.to($circle,0.4,{scale:1,autoAlpha:1})
  $($wrapper).on('mousemove', moveCircle);
});
$($wrapper).mouseout(function(){
    flag = false;
    TweenLite.to($circle,0.4,{scale:0.1,autoAlpha:0})
});

Comments