JQuery를 이용해 커서 잔상 이펙트 만들기

Mido·2023년 2월 9일
0

다양한 이펙트

목록 보기
1/6

루이비통 사이트처럼 만들어보자

루이비통이 쿠사마 마요이와 콜라보를 하였는데 물감 모양 도트가 이쁘다.
물론 제품들도 이쁘지만 내게 더 관심을 끈 것은 마우스가 이동할 때마다 잔상이 남듯이 생기는 사이트의 이펙트였다.

내 목표는 내가 아는 지식 내에서 전부 직접 만드는 것이다.

CSS의 hover 선택자를 이용해서 만들어볼까?

단순히 hover를 이용해서 만들어봤지만 transparent나 opacity를 이용해서 hover 시에 색상이 튀어나오는 것까진 가능하지만 마우스를 치우는 순간 바로 animation이든 뭐든 사라져버려 위와 같이 잔상을 남기듯이 만드는 방법은 도저히 생각이 나지 않았다.
(내가 몰라서 그렇지 불가능하진 않을 것이다...)

JQuery의 mouseenter,mouseleave를 써보자

단순히 css의 hover 와 다르게 mouseenter 이벤트는 마우스가 엘리먼트를 빠져나가도 이벤트가 취소되지 않는다. 반대로 mouseleave를 사용하면 엘리먼트가 빠져나올 시 이벤트를 발생시킬 수 있다.

자식 엘리먼트를 포함해서 이벤트 발생하는 mouseover,out을 사용해도 차이는 없다.

      for(let i=1; i<11; i++){
        $('.Circle'+i).css({'left':i*147-142+'px'});
        
        $('.Circles'+j+" "+'.Circle'+i).mouseenter(function(){
          var ran1 = Math.random()*256;
          var ran2 = Math.random()*256;
          var ran3 = Math.random()*256;
          $('.Circles'+j+" "+'.Circle'+i).css({'background-color':'rgb('+ran1+','+ran2+','+ran3+')'})
          $('.Circles'+j+" "+'.Circle'+i).css({'opacity':'1'})
          $('.Circles'+j+" "+'.Circle'+i).css({'transition':'opacity'};
      });
      $('.Circle'+i).mouseout(function(){
        $('.Circle'+i).css({'opacity':'0'})
        $('.Circles'+j+" "+'.Circle'+i).css({'transition':'opacity 2s ease-in'}) 
    });
  }}

$(선택자).mouseenter(function(){});
$(선택자).mouseleave(function(){});
와 같이 사용하며 RGB 값에 1~255사이의 변수값을 적용해 매번 색이 바뀌게 하였다.
마우스 커서가 기존에 투명도가 0으로 된 배경의 둥근 모양의 div에 올라갈 경우
투명도가 1이 되게 하였으며 이펙트가 나타날 때는 즉시 나타나게 하고 사라질 때는 잔상을 남길 수 있도록

css({'transition':'opacity'}) // 마우스 엔터 시
css({'transition':'opacity 2s ease-in'}) // 마우스 리브 시 2초에 걸쳐 적용됨
위와 같이 transition을 따로 적용시켰다.

0.5배로 설정해서 잘 작동하는지 확인해보자.

리액트와 JQuery만을 이용해 비슷한 느낌을 내봤지만 전문가의 솜씨를 따라가기는 쉽지 않았다. 특히 뭔가 알 수 없는 부드러움에서 차이가 많이 났다.
아마도 코드를 까보나 마나 나처럼 엘리먼트를 숨겨두었다가 나타나는 방식이 아닌
마우스 커서 위치를 이용한 다른 이벤트일 것이다.

profile
Front-End

0개의 댓글