필요없는 목록/CSS 스타일

마우스 효과 1 / 5

비밀안 2023. 3. 20. 16:09

클릭

버튼을 클릭하면 명언이 나와요

이름이 나와요

마우스 효과 1번 완성본

완성본 주소

마우스가 움직이면은 제작한 모양이 마우스를 따라오는 효과를 만들어봤습니다.

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>
    </ul>
</header>
 <!-- //header -->
<main id="main">
    <div class="mouse__wrap">
        <div class="mouse__cursor"></div>
        <div class="mouse__text">
            <p><sapn class="s1">To</sapn> <span class="s2">accomplish</span> the <span class="s3">impossible</span>, <span class="s4">let's</span> <span class="s5">start</span> with the <span class="s6">possible</span>.
            <p><span class="s1">불가능한</span> <span class="s2">일</span>을 해내려면, <span class="s3">가능한</span> <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:skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->
 </body>

코드설명

1. div태그 .mouse__cursor은 아무것도 작성은 안했습니다.

이제 여기에 s1~s6까지의 클래스가 오면 마우스 효과 이벤트가 발생됩니다.

2. div태그 .mouse__text에서 p태그 안에 span태그들이 있습니다.

이 span태그에 마우스가 올라가면 마우스 모양이 변하는 효과가 나타납니다.

3. div태그 .mouse__info는 이제 마우스를 움직일때마다 client, offset, page, screen에 관한 정보들이 출력되서 표시됩니다.

4. footer태그의 #footer는 저의 이메일 주소입니다.

CSS코드

<style>
body {
    width: 100%;
    height: 100vh;
    /* background-color: #fbff00; */
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}
body.img01 {
    background-image: url(../img/Frame\ 1-min.jpg);
}
body.img02 {
    background-image: url(../img/mouseeffet02-min.jpg);
}
body.img03 {
    background-image: url(../img/mouseeffet03-min.jpg);
}
body.img04 {
    background-image: url(../img/mouseeffet04-min.jpg);
}
body.img05 {
    background-image: url(../img/mouseeffet05-min.jpg);
}
body.img06 {
    background-image: url(../img/mouseeffet06-min.jpg);
}
body.img07 {
    background-image: url(../img/mouseeffet07-min.jpg);
}
body.img08 {
    background-image: url(../img/mouseeffet08-min.jpg);
}
body.img09 {
    background-image: url(../img/mouseeffet09-min.jpg);
}
body.img10 {
    background-image: url(../img/mouseeffet10-min.jpg);
}
body::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(5, 36, 70, 0.87);
    z-index: -1;
}
body.bg01::after {
    background: rgba(187, 207, 111, 0.87);
}
body.bg02::after {
    background: rgba(28, 3, 70, 0.87);
}
body.bg03::after {
    background: rgba(58, 3, 58, 0.87);
}
body.bg04::after {
    background: rgba(19, 53, 87, 0.87);
}
body.bg05::after {
    background: rgba(23, 46, 70, 0.87);
}
body.bg06::after {
    background: rgba(34, 55, 78, 0.87);
}
body.bg07::after {
    background: rgba(38, 58, 80, 0.87);
}
body.bg08::after {
    background: rgba(45, 64, 85, 0.87);
}
body.bg09::after {
    background: rgba(43, 58, 73, 0.87);
}
body.bg10::after {
    background: rgba(85, 126, 31, 0.87);
}


/* 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 {
    display: inline-block;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    color: #fff;
    text-align: center;
}
#header li.active a {
    background-color: #fff;
    color: #000;
}

/* footer */
#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px;
}
#footer a {
    color: #fff;
}

.mouse__wrap {
    cursor: none;
}
.mouse__cursor {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: rgba(255,255,255,0.1);
    /* 마우스를 따라다니는 이미지 때문에 마우스를 없앰 */
    cursor: none;
    user-select: none;
    pointer-events: none;
    transition:
     background-color 0.3s,
     border-color 0.3s,
     transform 0.6s,
     border-radius 0.3s,
     border 0.3s
    ;
}
.mouse__cursor.s1 {
    background-color: rgba(255, 165, 0, 0.4);
    border-color: orange;
}
.mouse__cursor.s2 {
    background-color: rgba(231, 247, 20, 0.4);
    border-color: rgb(223, 238, 13);
    transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3 {
    background-color: rgba(4, 255, 213, 0.4);
    border-color: rgb(27, 206, 212);
    transform: scale(1.5) rotateX(545deg);
}
.mouse__cursor.s4 {
    background-color: rgba(250, 1, 167, 0.4);
    border-color: rgb(183, 2, 255);
    transform: scale(10);
    border-radius: 10px;
}
.mouse__cursor.s5 {
    background-color: rgba(22, 77, 180, 0.4);
    border-color: rgb(57, 3, 250);
    transform: scale(10) skew(40deg) rotate(200deg);
}
.mouse__cursor.s6 { 
    background-color: rgba(14, 204, 78, 0.4);
    border-color: rgb(1, 250, 167);
    transform: scale(0.1);
}
.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;
    color: #fff;
    font-weight: bold;
}
.mouse__text p span {
    color: #000;
    font-weight: bold;
    border-bottom: 1px dashed rgb(235, 16, 125);
}
.mouse__text p:last-child {
    font-size: 3vw;
}
.mouse__info {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
}
</style>

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");

// 마우스 좌표값 e라고 많이 줌
window.addEventListener("mousemove", function(e){
    cursor.style.left = e.clientX-25 + "px";
    cursor.style.top = e.clientY-25 + "px";
})

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

// document.querySelectorAll(".mouse__text span").forEach(function(span, num){
//     // console.log(span);

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


// getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
    let attr = span.getAttribute("class");

    console.log(attr); // s1, s2, s3, s4, s5, s6

    span.addEventListener("mouseover", function(){
        cursor.classList.add(attr);
    });
    span.addEventListener("mouseout", function(){
        cursor.classList.remove(attr);
    })
});

// setAttribute();



// document.querySelector(".s1").addEventListener("mouseover", function(){
//     cursor.classList.add("s1");
// });
// document.querySelector(".s1").addEventListener("mouseout", function(){
//     cursor.classList.remove("s1");
// });

// document.querySelector(".s2").addEventListener("mouseover", function(){
//     cursor.classList.add("s2");
// });
// document.querySelector(".s2").addEventListener("mouseout", function(){
//     cursor.classList.remove("s2");
// });

// document.querySelector(".s3").addEventListener("mouseover", function(){
//     cursor.classList.add("s3");
// });
// document.querySelector(".s3").addEventListener("mouseout", function(){
//     cursor.classList.remove("s3");
// });

// document.querySelector(".s4").addEventListener("mouseover", function(){
//     cursor.classList.add("s4");
// });
// document.querySelector(".s4").addEventListener("mouseout", function(){
//     cursor.classList.remove("s4");
// });

// document.querySelector(".s5").addEventListener("mouseover", function(){
//     cursor.classList.add("s5");
// });
// document.querySelector(".s5").addEventListener("mouseout", function(){
//     cursor.classList.remove("s5");
// });

// document.querySelector(".s6").addEventListener("mouseover", function(){
//     cursor.classList.add("s6");
// });
// document.querySelector(".s6").addEventListener("mouseout", function(){
//     cursor.classList.remove("s6");
// });


// forEach문으로 만들기
// document.querySelectorAll(".mouse__info ul li span").forEach(function(el, index){
//     el.innerHTML = (index + 1) +"00";
// });


// event : 마우스의 정보
window.addEventListener("mousemove", function(event){
    // 마우스 이동할떄마다 x,y 좌표 가져옴
    // console.log(event.clientX);
    // console.log(event.clientY);

    // 마우스와 관련된 정보가 다 나옴
    // console.log(event);
});
</script>

코드 설명

// clientX : X좌표 값 : 브라우저 기준                    
// clientY : Y좌표 값 : 브라우저 기준
// offsetX : Y좌표 값 : 요소 기준
// offsetY : Y좌표 값 : 요소 기준
// pageX : Y좌표 값 : 페이지 기준
// pageY : Y좌표 값 : 페이지 기준
// screenX : Y좌표 값 : 디바이스 기준
// screenY : Y좌표 값 : 디바이스 기준

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;
})

event	마우스와 관련된 정보가 들어있습니다.
window	해당 웹페이지 입니다.

웹페이지에서 마우스를 움직일때마다 client, offset, page, screen의 정보를 가져와서 text로 바꿔줍니다.

// 마우스 좌표값 e라고 많이 줌
window.addEventListener("mousemove", function(e){
    cursor.style.left = e.clientX-25 + "px";
    cursor.style.top = e.clientY-25 + "px";
})

마우스를 움직일떄마다 clientX, clientY의 정보를 가져와서 left와 top에 저장합니다.

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

.s클래스를 찾고 여기에다가 i의 값을 합니다.(.s1, .s2, .s3, .s4, .s5, .s6)

(.s1, .s2, .s3, .s4, .s5, .s6)에다가 마우스를 올리면 class를 추가하고

(.s1, .s2, .s3, .s4, .s5, .s6)에서 마우스가 벗어나면 class가 삭제됩니다.

document.querySelectorAll(".mouse__text span").forEach(function(span, num){
     // console.log(span);

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

span태그에 선언된 것들을 가져옵니다.

span태그에 마우스가 올려져있으면 .s클래스 + index의 값을 합쳐서 .s1, .s2, .s3, .s4, .s5, .s6의 클래스를 추가합니다.

span태그에서 마우스가 벗어나면 .s1, .s2, .s3, .s4, .s5, .s6의 클래스를 지웁니다.

현재글마우스 효과 1 / 5

천사님 밥 친구해요 0♡0 ♥︎ 0-0

0♡0 ♥︎ 0-0

GIT 블로그

Loading data ...

Today :
Yesterday :

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

천사님 밥 친구해요

마우스 효과 1 / 5

버튼을 클릭하면 명언이 나와요

마우스 효과 1번 완성본

HTML코드

코드설명

CSS코드

JAVASCRIPT코드

코드 설명

'필요없는 목록/CSS 스타일'의 다른글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

2025. 05
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

마우스 효과 1 / 5

버튼을 클릭하면 명언이 나와요

마우스 효과 1번 완성본

HTML코드

코드설명

CSS코드

JAVASCRIPT코드

코드 설명

'필요없는 목록/CSS 스타일'의 다른글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역