패럴랙스 이펙트01

section1

직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다 .

section1

행복한 삶을 살기위해 필요한 것은 거의 없다.

section1

한번의 실패와 영원한 실패를 혼동하지 마라.

section1

1퍼센트의 가능성, 그것이 나의 길이다.

section1

꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.

section1

오늘은 당신의 남은 인생 중, 첫 번째 날이다.

section1

나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.

section1

고개 숙이지 마십시오. 세상을 똑바로 정면으로 바라보십시오.

소스 보기

HTML

CSS

Javascript

<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>

  /* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    flex-direction: column;
    cursor: none;
}

.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 300;
}

.mouse__wrap p:last-child {
    font-size: 3vw;
    font-weight: 300;
}

.mouse__wrap p span {
    border-bottom: 0.15vw dashed orange;
    color: orange;
}

@media (max-width: 800px) {
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
    }

    .mouse__wrap p:last-child {
        font-size: 40px;
        line-height: 1.5;
        text-align: center;
        word-break: keep-all;
    }
}

/* 커서 */
.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);
    user-select: none;
    pointer-events: none;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        transform 0.6,
        border-radius 0.3s;
}

.mouse__cursor.style1 {
    background-color: rgba(255, 165, 0, 0.4);
    border-color: orange;
}

.mouse__cursor.style2 {
    background-color: rgba(140, 0, 255, 0.4);
    border-color: rgb(140, 0, 255);
    transform: scale(2) rotateY(720deg);
}

.mouse__cursor.style3 {
    background-color: rgb(0, 47, 255, 0.4);
    border-color: rgb(0, 47, 255);
    transform: scale(1.5) rotateX(45deg);
}

.mouse__cursor.style4 {
    background-color: rgb(0., 47, 255, 0.4);
    border-color: rgb(0, 47, 255);
    transform: scale(10);
}

.mouse__cursor.style5 {
    background-color: rgb(255, 0, 85, 0.4);
    border-color: rgb(255, 0, 85);
    transform: scale(0.1);
}

.mouse__cursor.style6 {
    background-color: rgb(255, 81, 0, 0.4);
    border-color: rgb(255, 81, 0);
    border-radius: 0;
    transform: scale(5);
}

.mouse__info {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

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

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