Super-simple custom mouse cursor in 8 minutes with JavaScript

[@뚜루루뚜-o8w]

최고 입니다 많이 배워갑니다 감사합니다!

[@오두막-i5o]

와..정말 강의들 하나하나 다 주옥같네욥!! 너무너무 유익합니다. 잔뜩올려주세요!!! 하하

[@yummycoding]

잔뜩 올리고 싶은데 시간이 부족하네요 😭😭 좋은 아이디어들은 많이 있어서 조만간 또 찾아뵙겠습니다 !! 힘이 되는 댓글 주셔서 감사합니다😁

[@마루꿍]

오늘도 유익한 영상 감사합니다!

[@yummycoding]

꼭 도움이 되셨으면 좋겠습니다 :) 다음 영상에서는 더 유익하고 프론트엔트에게 필요한 아이디어로 찾아뵙도록 하겠습니다^^ 이번 한주도 화이팅하세요!

[@성남총각]

저는 프리랜서인지라 백엔드, 프론트엔드를 가리지 않고 일하고 있는데 최근에 프론트엔드는 하면 할수록 느끼는게 창의력이 정말 중요한것 같습니다. 동일한 코딩실력을 가지고 있는 두명의 프론트엔드 개발자가 있다면 이들의 우열을 판가름 하는것은 결국 창의력이라 생각합니다. 물론 최적화는 기본으로 깔고 가야겠죠. 같은 디자인 시안으로 누군가는 애니매이션 하나 없는 심심한 페이지를 만드는 반면 누군가는 님처럼 독창적이고 창의적인 기능과 효과를 만들어 내니까요. 당연히 고객들도 후자를 더욱 선호하지요. 직장인이신지 프리랜서이신지는 모르겠지만 기회가 된다면 꼭 한번 같이 일해보고 싶습니다!

[@yummycoding]

안녕하세요 이름성님 :) 아직은 제겐 너무 과분한 칭찬인 것 같습니다 ㅠㅠ 부족한게 많아서 일끝나면 공부도 하고 만들기도 하고 바쁘네요 ㅎㅎ 힘이 떨어질때마다 이글을 한번씩 읽어서 에너지 충전을 해야겠습니다^^ 현재는 회사에서 프론트엔더로 일하고 있고 아직은 제겐 너무 과분하여 제가 생각하는 실력에 먼저 도달하는게 급선무인것 같아요 ㅎㅎ 말씀만으로도 너무너무 감사드립니다 요즘 일이 바쁘다보니 업로드 주기가 불규칙한점도 죄송합니다 ㅠㅠ 이번 한주도 같이 빠이팅해요~~!

[@삐삐문어]

안녕하세요 마우스커서에 효과없이 작은 이미지를 따라다니게 만드려면 코드를 어떻게 짜야할까요? .. 너무 초보자라 어떻게 접근해야할지 모르겠습니다 ㅠㅠ

[@yummycoding]

mousemove 이벤트를 만들고 event 객체에서 clientX와 clientY를 mousemove 이벤트 안에서 position absolute 이미지의 css left, top속성으로 넣으시면 될 것 같아요!

[@왜깝치지]

선생님 개별질문해도될가요..?? CSS만으로는 왜 안되는걸까요 ?? ballcursor에 스타일 입혀주고 #text_div:hover ~ #ballcursor { 이 안에 변화값을 넣어봤는데 인식이 안되네요ㅠㅠ}

[@yummycoding]

js없이 css 만으로 말씀이실까요~??? 질문이 잘 제가 이해를 못했습니다 ㅠㅠ 또 늦은 답변 사과드려요 ㅠㅠ

[@오두막-i5o]

궁금한게 있는데 마우스커서의 부모태그에 absolute가아닌 fixed로 하는 것은 어떤가요. absolute로 하니까 스크롤 내려가면 마우스를 움직여줘야 다시 커서가 따라오더라구요. fixed는 그런게 없는것 같은데, 혹시 absolute로 하신 이유가 있는지 궁급해요!

[@오두막-i5o]

아 그리구 마우스커서에 텍스트가 스케일0.45가 들어가서 그런건지..뭐때문인지 모르겠는데 똑같이 헀는데... 텍스트가 엄청 뭉개지는 현상이 발생하네요. 혹시 이런적이 있으신지..

[@yummycoding]

안녕하세요 오두막님! 지난 포스트에서 크게 신경쓰지않고 넘어가 이런 몇가지 오류사항을 남겨뒀었네요..! 말씀 주신대로 absolute가 아니라 fixed로 수정하고 mousemove시에는 그럼 e.pageX, pageY가 아니라 e.clientX와 e.clientY로 수정하는게 간단한 해결책인 것 같습니다! 이전에 제작할 당시에 문제를 발견하지 못해 특별한 문제가 없어 absolute를 사용했는데 이 경우에는 fixed가 지적해주신대로 더 맞는 것 같네요^^ 이렇게 발견해주셔서 감사드립니다. scale같은 문제는 stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome 해당 링크에서와 같이 ::after 가상요소에 transform: scale(0.45); backface-visibility: hidden; 를 추가해주시면 문제가 해결이 될 것 같습니다! 오두막님 덕분에 자잘한 버그 수정요소들을 발견하게 되서 기쁘면서도 죄송하네요^^;; 이런 문제 하나하나에 꼼꼼하신걸 보면 앞으로 크게 되실 분 같네요! 새로운 영상 제작시에는 더욱 꼼꼼하게 체크하도록 하겠습니다 :D