ss Mouse Effect 06
본문 바로가기
JAVASCRIPT Effect

Mouse Effect 06

by 꿈나무개발 2022. 9. 29.
728x90

마우스 효과06

자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이번에는 텍스트 효과로, 마우스 방향에 따라 글씨가 좌, 우로 움직입니다. 또한, 텍스트에 마우스를 올렸을 때 커서가 확대되고 글씨가 반전되는 효과가 나타납니다.

원본 소스 보기 원본 사이트 보기

자바스크립트

마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 

const mouseMove = (e) => {
    let positionSlow = (e.pageX - (window.innerWidth / 2)) * 0.1;  //가운데 정렬, * 0.1 은 이질감 효과
    let positionFast = (e.pageX - (window.innerWidth / 2)) * 0.2;  //속도조절

    gsap.to(".spanSlow", { duration: 0.4, x: positionSlow });
    gsap.to(".spanFast", { duration: 0.4, x: -positionFast });
    gsap.to(".mouse__cursor", { duration: 0.3, left: e.pageX - 5, top: e.pageY - 5 });



}
window.addEventListener("mousemove", mouseMove);

const text = document.querySelectorAll(".spanWrap span");   //글씨
const cursor = document.querySelector(".mouse__cursor");    //마우스 커서

text.forEach(e => {
    e.addEventListener("mouseenter", () => {    //text에 마우스 올렸을 때
        cursor.style.transform = "scale(5)";     //cursor가 5배 확대
        cursor.style.mixBlendMode = "difference";   //글씨 반전 효과 추가
    })
    e.addEventListener("mouseleave", () => {    //text에서 마우스를 떼면
        cursor.style.transform = "scale(1)";     //cursor가 다시 원래크기로
        cursor.style.mixBlendMode = "normal";       //글씨 반전 효과 제거
    })
})

HTML

마우스 효과를 만들기 위한 html 작성법입니다. 

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="../assets/img/effect_bg20@2x-min.jpg" alt="">
                </figure>
            </div>
            <div class="mouse__text">
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">The time</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">The time</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">never stops.</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">never stops.</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">시간은</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">시간은</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">멈추지 않고 간다.</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">멈추지 않고 간다.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

CSS

마우스 효과를 만들기 위한 css 작성법입니다.

overflow: hidden => width값 반으로 정해서 나머지 반은 보이지 않게
transform: skew(0deg, -15deg) => 기울이기 효과
 /* mouseType */
.mouse__wrap {
    color: #fff;
    width: 100%;
    height: 100vh;
    cursor: none;
}

.mouse__img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.mouse__text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -20%);
    font-size: 3vw;
    line-height: 1.5;
}

.mouse__text .line {
    width: 100%;
    display: flex;
}

.mouse__text .line .left {
    width: 50vw;
    color: #738dc5;
    /* 반 안보이게 */
    overflow: hidden;
    /* 기울이기 */
    transform: skew(0deg, -15deg);
}

.mouse__text .line .left .spanWrap {
    width: 100vw;
    text-align: center;
}

.mouse__text .line .right {
    width: 50vw;
    overflow: hidden;
    transform: skew(0deg, 15deg);
}

.mouse__text .line .right .spanWrap {
    width: 100vw;
    text-align: center;
    transform: translateX(-50vw);
}

.mouse__text span {
    display: inline-block;
}

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    z-index: 9999;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    user-select: none;
    pointer-events: none;
    transition: transform 0.25s;
}
728x90
반응형

'JAVASCRIPT Effect' 카테고리의 다른 글

PARALLAX Effect 07  (3) 2022.10.10
PARALLAX Effect 06  (2) 2022.09.29
SEARCH Effect 05  (2) 2022.09.29
SEARCH Effect 04  (4) 2022.09.28
Mouse Effect 05  (3) 2022.09.28

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바