[jQuery] 마우스 커서(cursor) 따라다니는 애니메이션(animation)

마우스 커서(cursor)를 따라다니는 도형 애니메이션(animation)

[html]

<div class="cursor"></div>

 

[css]

.cursor {

  position: absolute;

  transform: translate(100%, 100%);

  width: 1rem;

  height: 1rem;

  border: 2px solid #808080;

  border-radius: 50%;

  opacity: 0.4;

  transition: all 0.3s ease-out;

  z-index: 1000;

}

.cursor.on {

  border: 2px solid #222;

  background: #222;

  opacity: 1;

}

 

[js]

$(window).on('scroll mousemove', function(e){

    $('.cursor').css('left', e.pageX + 'px');

    $('.cursor').css('top', e.pageY + 'px');

  });

  $('a').hover(function(){

    $('.cursor').toggleClass('on');

  });

 

See the Pen [jQuery] mouse cursor animation _ 마우스 커서 애니메이션 (원형) by j. sik (@jsik) on CodePen.