CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chadwick Marketing
Chadwick Marketing

Reputation: 15

Stay within DIV when using a JQuery mousemove function

I want the inner circle to stay within the outer circle when moving it. The inner circle should still be animated though. I tried to use overflow: hidden, but that didn't work. It would be great if anyone could give me advice. Thank you in advance!

$(document).mousemove(function( event ) {
 $(".cursor-circle, .cursor-inner-wrap").css({
     "top": (event.pageY - 65) + "px",
     "left": (event.pageX - 65) + "px"
    });
});
body {
  background: rgb(20,20,20);
}

.cursor-circle{
   border: 1px solid white;
   border-radius: 100%;
   width: 120px;
   height: 120px;
   overflow: hidden;
   position: absolute;
   transition-duration: 200ms;
   transition-timing-function: ease-out;
}

.cursor-wrap{
    width: 120px;
    height: 120px;
    position: absolute;
}

.cursor-inner-wrap{
  width: 120px;
  height: 120px;
  position: absolute;
  display: flex;
  align-items: center;
}

.cursor-inner {
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
}

.cursor-inner{
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  border-radius: 100%;
  transition-duration: 199ms;
  transition-timing-function: ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
  <div class="cursor-circle"></div>
  <div class="cursor-inner-wrap">
    <div class="cursor-inner"></div>
  </div>
</div>

Upvotes: 1

Views: 58

Answers (1)

Ori Drori
Ori Drori

Reputation: 192487

Since the .cursor-circle has a transition, and the .cursor-inner-wrap is not. All changes effect the .cursor-inner-wrap immediately, while the circle takes time to reach the same place. Move the transition from .cursor-inner to .cursor-inner-wrap, and set the the duration of the transition to be slightly less of that of the circle: 

$(document).mousemove(function(event) {
  $(".cursor-circle, .cursor-inner-wrap").css({
    "top": (event.pageY - 65) + "px",
    "left": (event.pageX - 65) + "px"
  });
});
body {
  background: rgb(20, 20, 20);
}

.cursor-circle {
  border: 1px solid white;
  border-radius: 100%;
  width: 120px;
  height: 120px;
  position: absolute;
  transition: 200ms ease-out;

}

.cursor-inner-wrap {
  display: flex;
  width: 120px;
  height: 120px;
  position: absolute;
  align-items: center;
  justify-content: center;
  transition: 140ms ease-out;
}

.cursor-inner {
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
  <div class="cursor-circle"></div>
  <div class="cursor-inner-wrap">
    <div class="cursor-inner"></div>
  </div>
</div>

Upvotes: 1

Related Questions