☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 80_ 마우스 오버 효과_제이쿼리

조반짝 2023. 7. 18. 14:39
728x90
반응형

html mark up

reset css 지정

client: 브라우저 기준으로 잡아주는 마우스

offset: 마우스가 특정 구역에 들어가면 마우스 형태가 바뀜 

page:전체 페이지 잡아줄 때 사용

screen:모니터가 기준(0,0)

 

.info css edit

● max-width: 70vw 

가장 큰 사이즈 화면에서 70vw를 사용하겠다.

cursor 만들기

/* 기준점이 따로 없다 */
.cursor{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    /* 가장 위에 오도록함 */
    z-index: 1000;
    /* 선택못하게 해주는 명령어 >> 커서를 사용하기 위한 기본명령어 */
    user-select: none;
    pointer-events: none;
    
    transition: all 0.2s;
}

커서가 slow와 천천히를 만나면 색이 변하고 커지는 효과 주기

<Jqeury>

마우스를 움직이는 것을 컴퓨터의 운영체제가 가지고 있기때문에 좌표를 빌려서 써야함

윈도우에서 마우스가 움직였을 때 이벤트가 발생되어라

 $(window).mousemove(function(){})

e.clientX 윈도우가 갖고있는 x 좌표값을 글자만 따서 .clientX에 넣어라

 <script>
        $(window).mousemove(function(e){
            //브라우저 기준 가로세로
            $(".clientX").text(e.clientX);
            $(".clientY").text(e.clientY);
            //이벤트 기준 가로세로
            $(".offsetX").text(e.offsetX);
            $(".offsetY").text(e.offsetY);
            //전체문서 기준
            $(".pageX").text(e.pageX);
            $(".pageY").text(e.pageY);
            //모니터 기준
            $(".screenX").text(e.screenX);
            $(".screenY").text(e.screenY);
        })
    </script>

<<마우스 커서 위치 따라다니기

cursor 에 마우스좌표값 입히기

 //마우스 커서 위치 따라다니기
        $(window).mousemove(function(e){
            $(".cursor").css({left:e.clientX,top:e.clientY})
        });

커서와 마우스커서 중앙배열하기

마우스커서 없애기

em에 마우스 오버하면 컬러와 크기 변하는 이벤트

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스 오버 효과_제이쿼리</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="cursor"></div>
    <div class="contents">
        <p>To climb sleep hills requires <em>slow</em> pace at first</p>
        <p>험준한 산을 오르기 위해선 먼저 <em>천천히</em> 걸어야 한다.</p>
    </div>

    <div class="info top">
        <h1>마우스 오버효과</h1>
        <p>마우스 따라다니기</p>
    </div>
    <div class="info bottom">
        <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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        //마우스 커서 위치 따라다니기
        $(window).mousemove(function(e){
            $(".cursor").css({left:e.clientX - 15,top:e.clientY - 15});
            $(".contents em").hover(function(){
                $(".cursor").addClass("active");
            },function(){
                $(".cursor").removeClass("active");
            });
        });




        $(window).mousemove(function(e){
            //브라우저 기준 가로세로
            $(".clientX").text(e.clientX);
            $(".clientY").text(e.clientY);
            //이벤트 기준 가로세로
            $(".offsetX").text(e.offsetX);
            $(".offsetY").text(e.offsetY);
            //전체문서 기준
            $(".pageX").text(e.pageX);
            $(".pageY").text(e.pageY);
            //모니터 기준
            $(".screenX").text(e.screenX);
            $(".screenY").text(e.screenY);
        })
    </script>
</body>
</html>

<css>

@charset "utf-8";

*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #fff;
}
img{
    width: 100%;
    /* top middle bottom 으로 지정 */
    vertical-align: top;
}
ul{
    padding: 10px 20px;
}
li{
    list-style: none;
}
body{
    background: url(../unsplash_c_cPNXlovvY.png) no-repeat center center;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
    font-size: 16px;
    color: #fff;
    cursor: none;
}
body::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* 셀로판지 효과 */
    background-color: rgba(5, 36, 70, 0.9);
    /* 가상요소 레이어 밑으로 보내기 */
    z-index: -1;
}

.info{
    position: absolute;
    left: 10px;
}
.top{
    top: 20px;
}
.bottom{
    bottom: 20px;
}

.contents{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    /* 세로로 정렬을 같이 싶을때 */
    flex-direction: column;
    /* 한페이지만 사용 */
    overflow: hidden;
}
.contents p{
    /* 가장 큰 사이즈 화면에서 70vw를 사용하겠다 */
    max-width: 70vw;
    font-size: 3vw;
    /* 글씨를 한 줄에 적용하겠다. */
    white-space: nowrap;
}
.contents p:nth-of-type(1){
    font-size: 2.5vw;
    line-height: 2;
}
.contents p em{
    color: orange;
    font-weight: bold;
    border-bottom: 2px dashed orange;
}

/* 기준점이 따로 없다 */
.cursor{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    /* 가장 위에 오도록함 */
    z-index: 1000;
    /* 선택못하게 해주는 명령어 >> 커서를 사용하기 위한 기본명령어 */
    user-select: none;
    pointer-events: none;
    transform: scale(1);
    transition: background-color 0.3s, border 0.3s, transform 0.3s;

}
.cursor.active{
    background-color: rgba(255, 155, 0, 0.4);
    border: 3px solid orange;
    transform: scale(3);
}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 81_마우스오버효과_자바스크립트  (0) 2023.07.19
[JAVASCRIPT]선택문(Switch-case)  (0) 2023.07.19
비주얼 스튜디오 코드 79_뮤직 플레이어 3  (0) 2023.07.18
[JAVASCRIPT]if 조건  (0) 2023.07.18
비주얼 스튜디오 코드 78_ 뮤직플레이어 2  (0) 2023.07.17

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 80_ 마우스 오버 효과_제이쿼리

관련글

티스토리툴바