MOUSE EFFECT06 - JAVASCRIPT

마우스 이펙트 튜토리얼입니다.
이 강의는 기본적인 HTML, CSS를 알고 있어야 배울 수 있는 강의입니다. 웹표준 강의, 반응형 강의, 메가박스 강의를 보고 오시면 도움이 됩니다.^^
모든 강의는 소스를 보면서 따라하는 튜토리얼이며, JavaScript, JQuery를 마스터 하기 위한 예제 소스이며, 포트폴리오에서, 실무에서 꼭 필요하고 활용성이 높은 예제를 강의합니다.
궁금한 점이 질문은 댓글로 해주시면 됩니다.

Code Youtube

Code Sample

전체 소스는 여기서 다운 받을 수 있습니다.

바로가기

샘플 소스는 여기서 확인 할 수 있습니다.

바로가기

Source Reference

Value	link
이미지1	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg1.jpg
이미지2	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg2.jpg
이미지3	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg3.jpg
이미지4	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg4.jpg
이미지5	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg5.jpg
이미지6	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg6.jpg
이미지7	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg7.jpg
이미지8	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg8.jpg
이미지9	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/img/bg9.jpg
jquery	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/js/jquery.min.js
GSAP	https://webstoryboy.github.io/ScriptEffect/webstoryboy/assets/js/gsap.min.js

Code example

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Effect Script</title>
</head>
<body class="mouse bg">

    <!-- main -->
    <main>
        <div class="cursor"></div>

        <article class="mouseCont">
            <div class="moveImage">
                <div class="mImg">
                    <img src="../assets/img/bg12.jpg" alt="이미지">
                </div>
                <div class="mText">
                    <p>Luck is when preparedness meets opportunity.</p>
                    <p>운이란 준비가 기회를 만나는 것이다.</p>
                </div>
            </div>
        </article>
    </main>
    <!-- //main -->

    <!-- info -->
    <div class="info">
        <h1><a href="mouseIndex.html">Mouse Effect06 - Javascript</a></h1>
        <p>마우스 이펙트 - 이미지 효과2</p>
    </div>

    <div class="info right">
        <ul>
            <li><a href="mouseEffect01-javascript.html">1</a></li>
            <li><a href="mouseEffect02-javascript.html">2</a></li>
            <li><a href="mouseEffect03-javascript.html">3</a></li>
            <li><a href="mouseEffect04-javascript.html">4</a></li>
            <li><a href="mouseEffect05-javascript.html">5</a></li>
            <li class="active"><a href="mouseEffect06-javascript.html">6</a></li>
            <li><a href="mouseEffect07-javascript.html">7</a></li>
            <li><a href="mouseEffect08-javascript.html">8</a></li>
        </ul>
        <ul>
            <li><a href="mouseEffect01-jquery.html">1</a></li>
            <li><a href="mouseEffect02-jquery.html">2</a></li>
            <li><a href="mouseEffect03-jquery.html">3</a></li>
            <li><a href="mouseEffect04-jquery.html">4</a></li>
            <li><a href="mouseEffect05-jquery.html">5</a></li>
            <li><a href="mouseEffect06-jquery.html">6</a></li>
            <li><a href="mouseEffect07-jquery.html">7</a></li>
            <li><a href="mouseEffect08-jquery.html">8</a></li>
        </ul>
    </div>

    <div class="info left">
        <ul>
            <li>pageX : <span class="pageX">0</span></li>
            <li>pageY : <span class="pageY">0</span></li>
            <li>standardX : <span class="standardX">0</span></li>
            <li>standardY : <span class="standardY">0</span></li>
        </ul>
    </div>
    <!-- //info -->
</body>
</html>

<style>
    @font-face {
        font-family: 'NEXONLv1Gothic';
        font-weight: 300; 
        font-style: normal; 
        src: url(https://cdn.jsdelivr.net/gh/webfontworld/NEXONGothic/NEXONLv1GothicLowOTFLight.woff) format('woff');
        font-display: swap;
    }
    @font-face {
        font-family: 'NEXONLv1Gothic';
        font-weight: 400; 
        font-style: normal; 
        src: url(https://cdn.jsdelivr.net/gh/webfontworld/NEXONGothic/NEXONLv1GothicOTF.woff) format('woff');
        font-display: swap;
    }
    @font-face {
        font-family: 'NEXONLv1Gothic';
        font-weight: 700; 
        font-style: normal; 
        src: url(https://cdn.jsdelivr.net/gh/webfontworld/NEXONGothic/NEXONLv1GothicOTFBold.woff) format('woff');
        font-display: swap;
    }
    * {
        margin: 0; padding: 0;
    }

    /* mouse */
    .mouse {
        background: #222;
        color: #fff;
        font-family: 'NEXONLv1Gothic';
        font-weight: 400;
        cursor: none;
    }
    .bg {
        position: relative;
        height: 100vh;
        background-image: url(../assets/img/bg12@2.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .bg::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(5, 36, 70, 0.8);
        z-index: -1;
    }

    /* info */
    .info {
        color: #fff;
        font-family: "NEXONLv1Gothic";
        padding: 20px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .info.right {
        left: auto;
        right: 0px;
        top: 0px;
    }
    .info h1 {
        font-weight: 300;
        font-size: 20px;
        line-height: 1.6;
        border-bottom: 1px dashed #fff;
        display: inline-block;
        margin-bottom: 10px;
    }
    .info h1 a {
        color: #fff;
        text-decoration: none;
        font-weight: 400;
    }
    .info p {
        font-weight: 300;
        font-size: 16px;
    }
    .info li {
        list-style: none;
        display: inline;
    }
    .info li a {
        display: inline-block;
        text-decoration: none;
        color: #fff;
        border: 1px dashed #fff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 21px;
        text-align: center;
        font-size: 12px;
        margin-bottom: 5px;
    }
    .info li.active a {
        background: #fff;
        color: #000;
    }
    .info.left {
        top: auto;
        right: 0px;
        bottom: 0px;
        width: 200px;
    }
    .info.left li {
        display: block;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 300;
    }

    /* mouseCont */
    .moveImage { 
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%) perspective(600px) rotateX(0deg) rotateY(0deg);
        transform-style: preserve-3d;
        will-change: transform;
    }
    .moveImage .mImg img {
        border-radius: 5px;
        width: 100%;
    }
    .moveImage .mImg {
        position: relative;
        width: 50vw;
    }
    .moveImage .mImg::before {
        content: '';
        position: absolute; 
        z-index: -1;
        left: 5%; bottom: -20px;
        width: 90%; height: 40px;
        background: url(../assets/img/bg12.jpg) no-repeat;
        background-size: 100% 40px;
        filter: blur(15px);
        opacity: 0.9;
    }
    .moveImage .mText {
        font-size: 1vw;
        position: absolute;
        left: 50%; bottom: 50%;
        transform: translate3d(-50%, 68%, 150px);
        background: rgba(0,0,0,0.3);
        padding: 2vw;
        text-align: center;
        border-radius: 2px;
        white-space: nowrap;
    }
    .cursor {
        position: absolute;
        width: 10px; height: 10px;
        background: #fff;
        border-radius: 50%;
        z-index: 1000;
        user-select: none;
        pointer-events: none;
        transform: scale(1);
        mix-blend-mode: difference;
        transition: transform 0.3s ease-in-out;
    }
</style>

<!-- script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>  
<script>
    function mouseMove(e){
        let pageX = 0,
            pageY = 0,
            standardX = 0,
            standardY = 0,
            maxX = 0,
            maxY = 0,
            angleX = 0,
            angleY = 0,
            softX = 0,
            softY = 0;

        //마우스 값
        pageX = e.pageX;
        pageY = e.pageY;

        //기준점 가운데로 변경
        standardX = window.innerWidth/2 - pageX;
        standardY = window.innerHeight/2 - pageY;

        //쵯소값은 -100 쵯대값은 100 설정
        maxX = Math.max(-850, Math.min(850, standardX));
        maxY = Math.max(-250, Math.min(250, standardY));

        //각도를 줄이는 설정
        angleX = maxX * 0.12;
        angleY = maxY * 0.12;

        //부드럽게 설정
        softX += (angleX - softX) * 0.4;
        softY += (angleY - softY) * 0.4;

        //이미지 움직임
        const move = document.querySelector(".moveImage");
        move.style.transform = "translate(-50%, -50%) perspective(600px) rotateX("+ softY +"deg) rotateY("+ -softX +"deg)";
    
        //커서
        gsap.to(".cursor", {duration: .3, left: pageX, top: pageY});

        //출력
        document.querySelector(".pageX").textContent = pageX;
        document.querySelector(".pageY").textContent = pageY;
        document.querySelector(".standardX").textContent = standardX;
        document.querySelector(".standardY").textContent = standardY;
        document.querySelector(".maxX").textContent = maxX;
        document.querySelector(".maxY").textContent = maxY;
        document.querySelector(".angleX").textContent = parseInt(angleX);
        document.querySelector(".angleY").textContent = parseInt(angleY);
    }

    document.addEventListener("mousemove", mouseMove);
</script>

Site Reference

INSTAGRAM 바로가기

STUDY 바로가기

YOUTUBE 바로가기

INFLUENCER 바로가기

WEBFONTS 바로가기

728x90

저작자표시

webs portfoliodeveloper

Port developer

challenge

1.

2.

3.

completed 전체 보기

스터디 과정 26기 수료 | 김현* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

스터디 과정 25기 수료 | 이태* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

국비지원 과정 30기 수료 | 김성* 프론트 취업 완료

국비지원 과정 30기 수료 | 양다* 프론트 취업 완료

국비지원 과정 30기 수료 | 이영* 프론트 취업 완료

국비지원 과정 30기 수료 | 이중* 프론트 취업 완료

국비지원 과정 30기 수료 | 박선* 프론트 취업 완료

국비지원 과정 30기 수료 | 최진* 프론트 취업 완료

국비지원 과정 30기 수료 | 김석* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

국비지원 과정 30기 수료 | 권규* 프론트 취업 완료

국비지원 과정 30기 수료 | 권혜* 프론트 취업 완료

국비지원 과정 30기 수료 | 김민* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

portfolio 전체 보기

재밌는 포트폴리오

포트포리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 포트폴리오

가로 세로 포트폴리오

귀여운 포트폴리오

쿨한 포트폴리오

페이지 포트폴리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

웹 퍼블리셔

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

디자인 및 퍼블리셔

프론트앤드 개발자

interview 전체보기

review

스터디 후기 이다*

스터디 후기 이다*

MOUSE EFFECT06 - JAVASCRIPT

Code Youtube

Code Sample

Source Reference

Code example

Site Reference

기타(삭제예정)/02 MOUSE EFFECT Related Articles

더보기

티스토리툴바