비주얼 스튜디오 코드 83_ 이미지가 움직이는 효과

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

비주얼 스튜디오 코드 83_ 이미지가 움직이는 효과

조반짝 2023. 7. 20. 14:26

728x90

html 마크업

body css edit

.move_image css 편집

.move_image 가 움직일 예정이다.

●will-change: 엘리먼트에 대한 변경을 할 것인지를 미리 브라우저에 알려주어 하드에 가부화가 걸리는 것에 대한 도움을 준다.

그림자 만들기

.cursor 편집

커서 만들기

.cursor 이벤트 넣기

jqeury

 <script>
        $(window).mousemove(function(e){
            $(".pageX").text(e.pageX);
            $(".pageY").text(e.pageY);
        });
    </script>

마우스 이벤트

<script>

        $(window).mousemove(function (e){
            $(".cursor").css({left:e.pageX - 5, top:e.pageY - 5 });
        });    


        $(window).mousemove(function(e){
            $(".pageX").text(e.pageX);
            $(".pageY").text(e.pageY);
        });
    </script>

화살표 커서 지우기

이미지 이동

 //이미지이동
            $(".move_image").css({"transform":"translate(-50%,-50%) perspective(600px) rotateX("+x+"deg) rotateY("+y+"deg)"})

x, y 변수지정

회전 속도 줄이기

함수를 추가로 넣어주어도 된다.

윈도우의 넓이값 구하기

윈도우의 넓이값에 2를 나눠주기

y축도 마찬가지로 나눠주기

mouse x,y 축값 화면에 뿌려주기

좌표값을 0,0이 중앙값으로 오기위한 계산.

커서가 중심으로 가면 mouseX, mouseY가 0,0이 된다.

            // 좌표값을 중앙으로 보내기위한 수식
           mouseX = $(window).width()/2 -x;
           mouseY = $(window).height()/2 -y;

●Math : 계산하는 함수

Math.max: 가장 큰값을 찾아서 출력

Math.min: 가장 작은겂을 찾아서 출력

 mouseX = Math.max(100,200,300);
            mouseX = Math.min(100,200,300);

x = e.pageX;
            y = e.pageY;

            // 좌표값을 중앙으로 보내기위한 수식
            // mouseX = $(window).width()/2 -x;
            // mouseY = $(window).height()/2 -y;

            //마우스 x,y를 최소값을 -50, 최대값 50으로 변경
            mouseX = Math.max(-50,Math.min(50,$(window).width()/2 - x));
            mouseY = Math.max(-50,Math.min(50,$(window).height()/2 - y));
            // mouseX = Math.max(100,200,300);
            // mouseX = Math.min(100,200,300);
            console.log(mouseX)

            //커서이동
            $(".cursor").css({left:e.pageX - 5, top:e.pageY - 5 });

            //이미지이동
            $(".move_image").css({"transform":"translate(-50%,-50%) perspective(600px) rotateX("+mouseX+"deg) rotateY("+mouseY+"deg)"})

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <main>
        <div class="cursor"></div>
        <div class="move_image">
            <div class="mimg">
                <img src="./unsplash_c_cPNXlovvY.png" alt="음식사진">
            </div>
            <div class="mtext">
                <p>Luck is when preparedness meets opportunity</p>
                <p>운이란 준비가 기회를 만나는 것이다.</p>
            </div>
        </div>      
        <div class="bottom">
            <ul>
                <li>pageX : <span class="pageX">0</span></li>
                <li>pageY : <span class="pageY">0</span></li>

                <li>mouseX : <span class="mouseX">0</span></li>
                <li>mouseY : <span class="mouseY">0</span></li>

                <li>angleX : <span class="angleX">0</span></li>
                <li>angleY : <span class="angleY">0</span></li>

                
                <li>fmouseX : <span class="fmouseX">0</span></li>
                <li>fmouseY : <span class="fmouseY">0</span></li>
            </ul>
        </div>
    </main>

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

    <script>

        let x = 0,
            y = 0,
            mouseX = 0,
            mouseY = 0;

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

            x = e.pageX;
            y = e.pageY;

            // 좌표값을 중앙으로 보내기위한 수식
            // mouseX = $(window).width()/2 -x;
            // mouseY = $(window).height()/2 -y;

            //마우스 x,y를 최소값을 -50, 최대값 50으로 변경
            mouseX = Math.max(-50,Math.min(50,$(window).width()/2 - x));
            mouseY = Math.max(-50,Math.min(50,$(window).height()/2 - y));
            // mouseX = Math.max(100,200,300);
            // mouseX = Math.min(100,200,300);
            console.log(mouseX)

            //커서이동
            $(".cursor").css({left:e.pageX - 5, top:e.pageY - 5 });

            //이미지이동
            $(".move_image").css({"transform":"translate(-50%,-50%) perspective(600px) rotateX("+mouseX+"deg) rotateY("+mouseY+"deg)"})

// transform: translate(-50%,-50%) perspective(600px) rotateX(0deg) rotateY(0deg);



        });    


        $(window).mousemove(function(e){
            $(".pageX").text(e.pageX);
            $(".pageY").text(e.pageY);
            $(".mouseX").text(mouseX);
            $(".mouseY").text(mouseY);
        });
    </script>

</body>
</html>

<css>

@charset "utf-8";

*
*::after
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
img{
    width: 100%;
    display: block;
}
body{
    background: url(../unsplash_c_cPNXlovvY.png) center center no-repeat;
    background-size: cover;
    height: 100vh;
    color: #fff;
    cursor: none;
}
body::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: darkslateblue;
    z-index: -1;
    opacity: 0.5;
    
}

.bottom{
    position: absolute;
    left: 20px;
    bottom: 20px;
}
.move_image{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) perspective(600px) rotateX(30deg) rotateY(30deg);
    transform-style: preserve-3d;
    will-change: transform;

    /* will-change: 엘리먼트에 대한 변경을 할 것인지를 미리 브라우저에 알려주어 하드에 가부화가 걸리는 것에 대한 도움을 준다.  */
}
.move_image .mimg{
    position: relative;
}
.move_image .mimg img{
    border-radius: 5px;
}
.move_image .mimg::before{
    content: "";
    position: absolute;
    bottom: -20px;
    /* 그림자를 중간에 넣기 위해 위치 조정 */
    left: 5%;
    width: 90%;
    height: 40px;
    background: url(../unsplash_c_cPNXlovvY.png);
    background-size: 100% 40px;
    filter: blur(15px);
    z-index: -1;
    opacity: 0.8;
}

.move_image .mtext{
    font-size: 1vw;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate3d(-50%, 68%, 150px) /*rotateX(-90deg)*/;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 2vw;
    border-radius: 2px;
    white-space: nowrap;
}
.move_image .mtext p:nth-of-type(1){
    font-size: 0.7vw;
}

.cursor{
    width: 10px;
    height: 10px;
    background-color: #fff;
    position: absolute;
    left: 100px;
    top: 100px;
    border-radius: 50%;
    z-index: 1000;
    user-select: none;
    pointer-events: none;
}

728x90

저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 84_map 좌표잡기 (0)	2023.07.24
[JAVASCRIPT] (0)	2023.07.21
[JAVASCRIPT]for문 (0)	2023.07.20
비주얼 스튜디오 코드 82_반응형 웹갤러리 (0)	2023.07.19
비주얼 스튜디오 코드 81_마우스오버효과_자바스크립트 (0)	2023.07.19

현재글비주얼 스튜디오 코드 83_ 이미지가 움직이는 효과

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

자바스크립트, HTML, CSS, JavaScript, 자바, media, SQL, Java, position, if문, offset, Parallax, For문, 비주얼스튜디오코드, float, ACTIVE, 웹디자인, 프론트엔드, 코딩테스트, 이클립스,

Today :
Yesterday :

조반짝의 도전일지