WEB/JAVASCRIPT

[CSS/ JAVASCRIPT] 마우스이펙트 : 마우스 따라 다니는 효과

aimee418 2023. 3. 20. 19:56

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

마우스이펙트 : 마우스 따라 다니는 효과 

마우스의 위치에 따라 다양한 transition을 적용한 화면을 만들어 보겠습니다.

자바스크립트를 활용하여 마우스의 위치를 수치로 보여주는 효과도 적용하였습니다.

 

 

✈완성화면

 

 

✈완성코드

https://github.com/aimeekwon/web2023/blob/main/javascript/mouse/mouseEffect01.html

 

GitHub - aimeekwon/web2023: 수업시간 예제

수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub.

github.com

 

🏴. HTML

<body class="img01 bg01 font01">
    <header id="header">
        <h1>Javascript Mouse Effect01</h1>
        <p>마우스이펙트 - 마우스 따라다니기</p>
        <ul>
            <li class="active"><a  href="mouseEffect01.html">1</a></li>
            <li><a href="mouseEffect02.html">2</a></li>
            <li><a href="mouseEffect03.html">3</a></li>
            <li><a href="mouseEffect04.html">4</a></li>
            <li><a href="mouseEffect05.html">5</a></li>
            <li><a href="mouseEffect06.html">6</a></li>
        </ul>
    </header>
    <!-- //header -->
    <main id="main">
        <div class="mouse__wrap">
            <div class="mouse__cursor"></div>
            <div class="mouse__text">
                <p><span class="s1">Never forget</span> that <span class="s2">only dead fish</span> swim with <span class="s3">the stream</span></p>
                <p><span class="s4">죽은</span>
                <span class="s5">물고기</span>만이 물결을 따라 <span class="s6">흘러간다</span></p>
            </div>
        </div>
        <div class="mouse__info">
            <ul>
                <li>clientX : <span class="clientX">0</span>px</li>
                <li>clientY : <span class="clientY">0</span>px</li>
                <li>offsetX : <span class="offsetX">0</span>px</li>
                <li>offsetY : <span class="offsetY">0</span>px</li>
                <li>pageX : <span class="pageX">0</span>px</li>
                <li>pageY : <span class="pageY">0</span>px</li>
                <li>screenX : <span class="screenX">0</span>px</li>
                <li>screenY : <span class="screenY">0</span>px</li>
            </ul>
        </div>
    </main>
    <!-- //main -->
    <footer id="footer">
        <a href="mailto:aimee00418@gmail.com">aimee00418@gmail.com</a>
    </footer>
    <!-- //footer -->

🏁. POINT.

01. 마우스가 특정 문자에 위치할 때 효과가 나타나도록 할 문자는 span으로 묶어  class명(s1, s2, s3, s4, s5, s6)을 각각 따로 주었습니다.

02. 마우스가 움직일 때마다 마우스의 위치를 수치로 보여지게 할 코드를 작성합니다. 단위도 보여주기 위해 px은 따로 작성합니다.  

<li>clientX : <span class="clientX">0</span>px</li>

 

🏴. CSS

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    }
body.img01 {
    background-image: url(../asset/img/mouseEffect01-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img02 {
    background-image: url(../asset/img/mouseEffect02-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img03 {
    background-image: url(../asset/img/mouseEffect03-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img04 {
    background-image: url(../asset/img/mouseEffect04-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img05 {
    background-image: url(../asset/img/mouseEffect05-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img06 {
    background-image: url(../asset/img/mouseEffect06-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img07 {
    background-image: url(../asset/img/mouseEffect07-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img08 {
    background-image: url(../asset/img/mouseEffect08-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img09 {
    background-image: url(../asset/img/mouseEffect09-min.jpg);
    background-position: center center;
    background-size: cover;
}
body.img10 {
    background-image: url(../asset/img/mouseEffect10-min.jpg);
    background-position: center center;
    background-size: cover;
}
body::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.87);
    z-index: -1;
}
body.bg01::after {
    background: rgba(34, 5, 70, 0.57);
}
body.bg02::after {
    background: rgba(5, 6, 70, 0.57);
}
body.bg03::after {
    background: rgba(5, 56, 70, 0.57);
}
body.bg04::after {
    background: rgba(5, 70, 54, 0.57);
}
body.bg05::after {
    background: rgba(60, 70, 5, 0.57);
}
body.bg06::after {
    background: rgba(70, 43, 5, 0.57);
}
body.bg07::after {
    background: rgba(70, 6, 5, 0.57);
}
body.bg08::after {
    background: rgba(70, 5, 5, 0.57);
}
body.bg09::after {
    background: rgba(70, 5, 52, 0.57);
}
body.bg10::after {
    background: rgba(70, 5, 38, 0.57);
}
/* header */
#header {
    padding: 20px;
    position:  absolute;
    left: 0;
    top: 0;
}
#header h1 {
    margin-bottom: 10px;
}
#header p {
    margin-bottom: 10px;
}
#header a{
     color: #fff;
}
#header li{
    display: inline-block;
}
#header li a {
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    display: inline-block;
    color: #fff;
}
#header li.active a {
    background-color: #fff;
    color: #000;
}
/* footer */
#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px;
}
#footer a {
    color: #fff;

🏁. POINT.

01. 백그라운드 이미지로 배경을 적용합니다.  ::after로 투명도 있는 블랙을 문자가 잘 보일 수 있도록 적용했습니다.

 

 

✈. 효과 CSS

<style>
    .mouse__wrap {
        cursor: none;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius:  50%;
        border: solid 3px #e9e8d4;
        background-color: rgba(255,255,255,0.1);
        user-select: none;
        pointer-events: none;
        transition: 
            background-color 0.3s,
            border-color 0.3s,
            transform 0.6s 
        ;
    }
    .mouse__cursor.s1 {
        background-color: rgba(255, 15, 0, 0,7);
        border-color: orange;
    }
    .mouse__cursor.s2 {
        background-color: rgba(255, 15, 0, 0,7);
        border-color: rgb(136, 199, 255);
        transform: scale(2) rotateY(720deg);
    }
    .mouse__cursor.s3 {
        background-color: rgba(255, 15, 0, 0,7);
        border-color: rgb(154, 255, 230);
        transform: scale(1.5) rotateX(545deg);
    }
    .mouse__cursor.s4 {
        background-color: rgba(255, 15, 0, 0,7);
        border-color: rgb(154, 255, 230);
        transform: scale(5);
        border-radius: 0;
    }
    .mouse__cursor.s5 {
        background-color: rgba(255, 15, 0, 0,7);
        border-color: rgb(255, 191, 238);
        transform: scale(5) skew(180deg) rotate(100deg);
    }
    .mouse__cursor.s6 {
        background-color: rgba(255, 15, 0, 0,7);
        border-color: rgb(223, 154, 255);
        transform: scale(0.3);
    }
    .mouse__text {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .mouse__text p{
        font-size : 2vw;
        line-height: 1.9;
    }
    .mouse__text p:last-child{
        font-size: 2vw;
    }
    .mouse__text p span {
        color: #e9e8d4;
        border-bottom: dashed 1px #e9e8d4 ;
    }
    .mouse__info {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 20px;
        font-size: 16px;
        line-height: 1.6;
    }
    
</style>

 

transition CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다.
transition: <,property> <duration> <timing-function> <delay>
transform 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
scale() : x또는 y축으로 확대/ 축소
rotate() : 지정요소 회전
translate() : 지정 요소 x또는 y축으로 이동
skew() : 지정요소 x또는 y축으로 기울이기

 

🏴. JAVASCRIPT

 <script>
             window.addEventListener("mousemove", function(event){
                document.querySelector(".clientX").innerHTML = event.clientX;
                document.querySelector(".clientY").innerHTML = event.clientY;
                document.querySelector(".offsetX").innerHTML = event.offsetX;
                document.querySelector(".offsetY").innerHTML = event.offsetY;
                document.querySelector(".pageX").innerHTML = event.pageX;
                document.querySelector(".pageY").innerHTML = event.pageY;
                document.querySelector(".screenX").innerHTML = event.screenX;
                document.querySelector(".screenY").innerHTML = event.screenY;
        })

        //선택자
        const cursor = document.querySelector(".mouse__cursor");

        window.addEventListener("mousemove", function(e){
            cursor.style.left = e.clientX - 25 +"px";
            cursor.style.top = e.clientY - 25 +"px";
        });
        // document.querySelector(".s1").addEventListener("mouseover", function(){
        //     cursor.classList.add("s1")
        // })
        // document.querySelector(".s1").addEventListener("mouseleave", function(){
        //     cursor.classList.remove("s1")
        // })
        // document.querySelector(".s2").addEventListener("mouseover", function(){
        //     cursor.classList.add("s2")
        // })
        // document.querySelector(".s2").addEventListener("mouseleave", function(){
        //     cursor.classList.remove("s2")
        // })
        // document.querySelector(".s3").addEventListener("mouseover", function(){
        //     cursor.classList.add("s3")
        // })
        // document.querySelector(".s3").addEventListener("mouseleave", function(){
        //     cursor.classList.remove("s3")
        // })
        // document.querySelector(".s4").addEventListener("mouseover", function(){
        //     cursor.classList.add("s4")
        // })
        // document.querySelector(".s4").addEventListener("mouseleave", function(){
        //     cursor.classList.remove("s4")
        // })
        // document.querySelector(".s5").addEventListener("mouseover", function(){
        //     cursor.classList.add("s5")
        // })
        // document.querySelector(".s5").addEventListener("mouseleave", function(){
        //     cursor.classList.remove("s5")
        // })
        // document.querySelector(".s6").addEventListener("mouseover", function(){
        //     cursor.classList.add("s6")
        // })
        // document.querySelector(".s6").addEventListener("mouseleave", function(){
        //     cursor.classList.remove("s6")
        // })

        //for문
        // for(let i=1; i<=6; i++){
        //     document.querySelector(".s"+i).addEventListener("mouseover", function(){
        //         cursor.classList.add("s"+i)
        //     });
        //     document.querySelector(".s"+i).addEventListener("mouseleave", function(){
        //         cursor.classList.remove("s"+i)
        //     })
        // }

        //forEach
        document.querySelectorAll(".mouse__text span").forEach(function(span, num){
            span.addEventListener("mouseover", function(){
                cursor.classList.add("s"+(num+1));
            })
            span.addEventListener("mouseout", function(){
                cursor.classList.remove("s"+(num+1))
            })
        })
        // for(let i=1; i<=8; i++){
        //     document.querySelectorAll(".mouse__info ul li span").forEach((el, index)=>{
        //         el.innerHTML = index+1 +"00"
        //     });
        // }

        //getAttribute();
            //자바스크립트 요소객체
        document.querySelectorAll(".mouse__text span").forEach(function(span){
            let attr = span.getAttribute("class");
            //attr = s1,s2,s3,s4,s5,s6
            span.addEventListener("mouseover", function(){
                cursor.classList.add(attr);
            });
            span.addEventListener("mouseout", function(){
                cursor.classList.remove(attr);
            });
        });
        
        //setAttribute();


    </script>

🏁. POINT.

선택자 

          window.addEventListener("mousemove", function(event){
                document.querySelector(".clientX").innerHTML = event.clientX;
                document.querySelector(".clientY").innerHTML = event.clientY;
                document.querySelector(".offsetX").innerHTML = event.offsetX;
                document.querySelector(".offsetY").innerHTML = event.offsetY;
                document.querySelector(".pageX").innerHTML = event.pageX;
                document.querySelector(".pageY").innerHTML = event.pageY;
                document.querySelector(".screenX").innerHTML = event.screenX;
                document.querySelector(".screenY").innerHTML = event.screenY;
        })

 

🏁. POINT.

기본형

        document.querySelector(".s1").addEventListener("mouseover", function(){
            cursor.classList.add("s1")
        })
        document.querySelector(".s1").addEventListener("mouseleave", function(){
            cursor.classList.remove("s1")
        })
        document.querySelector(".s2").addEventListener("mouseover", function(){
            cursor.classList.add("s2")
        })
        document.querySelector(".s2").addEventListener("mouseleave", function(){
            cursor.classList.remove("s2")
        })
        document.querySelector(".s3").addEventListener("mouseover", function(){
            cursor.classList.add("s3")
        })
        document.querySelector(".s3").addEventListener("mouseleave", function(){
            cursor.classList.remove("s3")
        })
        document.querySelector(".s4").addEventListener("mouseover", function(){
            cursor.classList.add("s4")
        })
        document.querySelector(".s4").addEventListener("mouseleave", function(){
            cursor.classList.remove("s4")
        })
        document.querySelector(".s5").addEventListener("mouseover", function(){
            cursor.classList.add("s5")
        })
        document.querySelector(".s5").addEventListener("mouseleave", function(){
            cursor.classList.remove("s5")
        })
        document.querySelector(".s6").addEventListener("mouseover", function(){
            cursor.classList.add("s6")
        })
        document.querySelector(".s6").addEventListener("mouseleave", function(){
            cursor.classList.remove("s6")
        })

🏁. POINT.

for문

        for(let i=1; i<=6; i++){
            document.querySelector(".s"+i).addEventListener("mouseover", function(){
                cursor.classList.add("s"+i)
            });
            document.querySelector(".s"+i).addEventListener("mouseleave", function(){
                cursor.classList.remove("s"+i)
            })
        }​

🏁. POINT.

forEach문

        document.querySelectorAll(".mouse__text span").forEach(function(span, num){
            span.addEventListener("mouseover", function(){
                cursor.classList.add("s"+(num+1));
            })
            span.addEventListener("mouseout", function(){
                cursor.classList.remove("s"+(num+1))
            })
        })

🏁. POINT.

getAttribute()

        document.querySelectorAll(".mouse__text span").forEach(function(span){
            let attr = span.getAttribute("class");
            //attr = s1,s2,s3,s4,s5,s6
            span.addEventListener("mouseover", function(){
                cursor.classList.add(attr);
            });
            span.addEventListener("mouseout", function(){
                cursor.classList.remove(attr);
            });
        });

'WEB/JAVASCRIPT'의 다른글

  • 현재글[CSS/ JAVASCRIPT] 마우스이펙트 : 마우스 따라 다니는 효과

관련글

댓글

티스토리툴바