인프런 커뮤니티 질문&답변

hozong99님의 프로필 이미지

작성한 질문수

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

마우스 인터렉티브 변형 질문

작성

·

223

0

안녕하세요. 마우스 인터렉티브를 하다가 transition: ease-in-out 궁금증이 생겼습니다!

마우스의 궤적을 따라서 이미지가 잔상처럼 늘어나는 것으로 보이게 하고 싶어서 circle보다 작은 크기의 도형을 만들어 ease in out 에 초 차이를 주었는데 원하는 효과가 나타나지 않았습니다. 해당 함수를 사용하면 초에 따라서 마우스 포인터를 따라오는 속도가 달라지는 줄 알았는데 제가 잘못 이해한 걸까요?

혹시 몰라 transition-duration/delay 함수도 사용해 봤는데 적용이 안 됐습니다.. 마우스를 움직일때는 잔상이 스프링처럼 길게 늘어지다가 멈추면 줄어드는 방향으로 하고 싶은데 이런 변형 관련한 질문은 어려울까요? 게이트박스와 mouseenter를 이용해서 크기가 줄어드는 걸로 활용 해보았는데 게이트 박스 외의 부분에 마찬가지로 적용하는게 어려워서 질문 드립니다..!

감사합니다.

답변 1

0

코딩일레븐님의 프로필 이미지
코딩일레븐
지식공유자

안녕하세요 답변이 늦었습니다. '마우스 궤적을 따라서 이미지가 잔상처럼 늘어나는 것으로 보이게' 에 대한 정확한 느낌을 잘 모르겠어서 답변을 못드리고 있습니다. 혹시 비슷한 레퍼런스 사이트가 있으면 같이 고민해 볼 수 있을 것 같아요.

hozong99님의 프로필 이미지

작성한 질문수

질문하기