Mouse Effect

She can do, he can do, why not me?

그녀도 하고 그도 하는데 나라고 왜 못해?

<main> <div class="cursor"></div> <article class="mouseCont"> <p><span class="style1">She</span> can do, <span class="style2">he</span> can do, why not <span class="style3">me?</span></p> <h2><span class="style4">그녀도</span> 하고<span class="style5"> 그도</span> 하는데 </span><span class="style6">나라고</span> 왜 못해?</h2> </article> </main>   <div class="info"> <h1><a href="index.html">Mouse Effect01 - jquery</a></h1> <p>마우스 이펙트 - 마우스 따라다니기</p> </div> <div class="info right"> <ul> <li><a href="javascriptME01.html">1</a></li> <li><a href="javascriptME02.html">2</a></li> <li><a href="javascriptME03.html">3</a></li> <li><a href="javascriptME04.html">4</a></li> <li><a href="javascriptME05.html">5</a></li> </ul> <ul> <li class="active"><a href="jqueryME01.html">1</a></li> <li><a href="jqueryME02.html">2</a></li> <li><a href="jqueryME03.html">3</a></li> <li><a href="jqueryME04.html">4</a></li> <li><a href="jqueryME05.html">5</a></li> </ul> </div> <div class="info left list"> <ul> <li>clientX : <span class="clientX">0</span></li> <li>clientY : <span class="clientY">0</span></li> <li>offsetX : <span class="offsetX">0</span></li> <li>offsetY : <span class="offsetY">0</span></li> <li>pageX : <span class="pageX">0</span></li> <li>pageY : <span class="pageY">0</span></li> <li>screenX : <span class="screenX">0</span></li> <li>screenY : <span class="screenY">0</span></li> </ul> </div>

.mouseCont { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; width: 100%; height: 100vh; overflow: hidden; font-family: 'S-CoreDream'; cursor: none; } .mouseCont p { font-size: 2.5vw; line-height: 2.3; font-weight: 300; } .mouseCont h2 { font-size: 3vw; font-weight: normal; font-weight: 400; } .mouseCont span { font-style: normal; border-bottom: 0.2vw dashed #fff; } .cursor { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; z-index: 9999; background-color: rgba(255,255,255,0.1); user-select: none; pointer-events: none; transition: background-image .2s, background-color .2s, border-color .2s, border-radius .2s, transform .8s } .cursor.style1 { background-color: rgba(255, 165, 0, 0.4); border-color: orange; transform: scale(2); } .cursor.style2 { background-color: rgb(140, 0, 255, 0.4); border-color: rgb(140, 0, 255); transform: rotateY(720deg) scale(1.5); border-radius: 5px; } .cursor.style3 { background-image: url(https://kdong1224.github.io/dothome21/class/img/img01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #CA9CE16e; border-color: #CA9CE1; transform: rotate3d(0,1,1,1080deg) scale(1.5); border-radius: 10px; } .cursor.style4 { background-color: #DFBBB16e; border-color: #DFBBB1; transform: rotate3d(0,1,1,360deg) rotate(20deg) scale(1.5); transform-origin: 20% 100%; border-radius: 50px; } .cursor.style5 { background-color: #662E9B6e; border-color: #662E9B; transform: rotateX(1080deg) scale(1.5); border-radius: 5px; } .cursor.style6 { background-image: url(https://kdong1224.github.io/dothome21/class/img/img07.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #F242366e; border-color: #F24236; transform: rotate(1080deg) scale(1.5); border-radius: 10px; }

// 출력용 $(window).mousemove(function(e){ $(".clientX").text(e.clientX + "px"); //브라우저 X좌표 기준 }); $(window).mousemove(function(e){ $(".clientY").text(e.clientX + "px"); //브라우저 Y좌표 기준 }); $(window).mousemove(function(e){ $(".offsetX").text(e.offsetX + "px"); //요소 X좌표 기준 }); $(window).mousemove(function(e){ $(".offsetY").text(e.offsetY + "px"); //요소 Y좌표 기준 }); $(window).mousemove(function(e){ $(".pageX").text(e.pageX + "px"); //페이지 X좌표 기준 }); $(window).mousemove(function(e){ $(".pageY").text(e.pageY + "px"); //페이지 Y좌표 기준 }); $(window).mousemove(function(e){ $(".screenX").text(e.screenX + "px"); //디바이스 X좌표 기준 }); $(window).mousemove(function(e){ $(".screenY").text(e.screenY + "px"); //디바이스 Y좌표 기준 }); // 마우스 움직이기 $(window).mousemove(function(e){ // $(".cursor").css("left","100px"); // $(".cursor").css("top","100px"); // $(".cursor").css({"left":"100px", "top":"100px"}); // $(".cursor").css({left:"100px", top:"100px"}); // $(".cursor").css({left:"100px", "background-color":"100px"}); // $(".cursor").css({left:"100px", backgroundColor:100}); $(".cursor").css({left: e.clientX -25, top: e.clientY -25}); }); // em태그에 왔을때 변환 // $(".mouseCont em").mouseover(function(){ // $(".cursor").addClass("active"); // }); // $(".mouseCont em").mouseout(function(){ // $(".cursor").removeClass("active"); // }); // 한번에 작성 // $(".mouseCont em").hover(function(){ // $(".cursor").addClass("active"); // }, function(){ // $(".cursor").removeClass("active"); // }); // 이벤트 핸들러 차이 // $(".mouseCont em").mouseenter(function(){ // $(".cursor").addClass("active"); // }); // $(".mouseCont em").mouseleave(function(){ // $(".cursor").removeClass("active"); // }); // span태그에 왔을 때 변환 // $(".mouseCont .style1").hover(function(){ // $(".cursor").addClass("style1"); // }, function(){ // $(".cursor").removeClass("style1"); // }); // $(".mouseCont .style2").hover(function(){ // $(".cursor").addClass("style2"); // }, function(){ // $(".cursor").removeClass("style2"); // }); // $(".mouseCont .style3").hover(function(){ // $(".cursor").addClass("style3"); // }, function(){ // $(".cursor").removeClass("style3"); // }); // $(".mouseCont .style4").hover(function(){ // $(".cursor").addClass("style4"); // }, function(){ // $(".cursor").removeClass("style4"); // }); // $(".mouseCont .style5").hover(function(){ // $(".cursor").addClass("style5"); // }, function(){ // $(".cursor").removeClass("style5"); // }); // $(".mouseCont .style6").hover(function(){ // $(".cursor").addClass("style6"); // }, function(){ // $(".cursor").removeClass("style6"); // }); // for문 // for(let i=1; i<7; i++){ // $(".mouseCont .style"+i).hover(function(){ // $(".cursor").addClass("style"+i); // }, function(){ // $(".cursor").removeClass("style"+i); // }); // } // each() // $(".mouseCont span").each((index, element) => { // $(element).hover(function(){ // $(".cursor").addClass("style"+(index+1)); // }, function(){ // $(".cursor").removeClass("style"+(index+1)); // }); // }); // attr() $(".mouseCont span").hover(function(){ // let cla = $(this).attr("class"); //지역변수를 전역변수로 만들어 줘야 한다. 간단히 addClass와 removeClass안에 넣어 준다. // console.log(cla) 확인 $(".cursor").addClass($(this).attr("class")); }, function(){ $(".cursor").removeClass($(this).attr("class")); })