"마우스이펙트 03" : 조명 효과 💡

🖱 마우스 이펙트 : 조명 효과

📌 마우스 cursor 부분을 통해 이미지를 밝혀주는 이펙트입니다.

---

마우스 이펙트 완성본⭐️

마우스 이펙트가 궁금하다면?💡 원본 소스보기

➰ HTML

마우스 커서를 만들어주고 마음에 드는 문장을 적어줍니다.

<header id="header">
    <h1><a href="mouseEffect.html">Javascript Mouse Effect03</a></h1>
    <p>마우스 이펙트 - 조명효과</p>
    <ul class="active1"> 
        <li><a href="mouseEffect01.html">1</a></li>
        <li><a href="mouseEffect02.html">2</a></li>
        <li class="active"><a href="mouseEffect03.html">3</a></li>
        <li><a href="mouseEffect04.html">4</a></li>
        <li><a href="mouseEffect05.html">5</a></li>
        <li><a href="mouseEffect06.html">6</a></li>
        <li><a href="mouseEffect07.html">7</a></li>
    </ul>
</header>
<!-- //header -->
<main id="main">
  <section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <p>I <span>Dream</span> my Painting and I paing my <span>Dream</span>.</p>
        <p>나는 나의 그림을 <span>꿈</span> 꾸고, 내 <span>꿈</span>을 그린다.</p>
    </div>
  </section>
</main>

➰ CSS

css로 스타일을 입혀줍니다.

/* mouseType */
body::after {
    background: rgba(0, 0, 0, 0.6);
    }       
.mouse__wrap {
  /* vw라고 써주면 스크롤바 생기기 때문에 */
  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 rgb(255, 253, 164); 
  color: rgb(255, 253, 164);
}
@media (max-width: 800px) {
  .mouse__wrap p {
    font-size: 30px;
    padding: 0 20px;
    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: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background: #fff;
    background-image: url(../assets/img/effect_bg@2x015.jpg);
    background-size: cover;
    background-position: center;
    /* 뒤에 이미지 고정 */
    background-attachment: fixed;
    border: 5px solid #fff;
    cursor: none;
}

➰ JS

주석을 참고해주세요!

const cursor = document.querySelector(".mouse__cursor");
//마우스커서 효과넣은 것 마우스 가운데로 오게 하기 width값 구하기
//offsetWidth와 clientWidth값 차이 : 보더값 포함 미포함
// const circleW = cursor.offsetWidth;
// const circleH = cursor.offsetHeight; //200
// const circle2 = cursor.clientWidth;  //190 : 보더값 제외
const circle = cursor.getBoundingClientRect();
//console.log(circle);
// const DOMRect = {
//     x: 0,
//     y: 0,
//     bottom : 200,
//     height : 200,
//     left: 0,
//     right: 200,
//     top : 0,
//     width:200
// }
//마우스가 움직였을 때
window.addEventListener("mousemove", (e) => {
    // e.page마우스 좌표값
    gsap.to(cursor, {
        duration: 0.5,
        //커서 가운데로 위치하기 위함 
        left: e.pageX - circle.width/2, 
        top: e.pageY - circle.height/2,
    });
});

'Effect(자바스크립트 활용) > Mouse Effect 마우스이펙트' 카테고리의 다른 글

"마우스이펙트 06" : 텍스트 효과  (3)	2022.09.29
"마우스이펙트 05" : 기울기 효과 / 글씨 반전 효과  (7)	2022.09.28
"마우스이펙트 04" : 이미지 효과 🏞  (3)	2022.09.22
"마우스이펙트 02" : 커서 두 개를 통해 다양한 효과 내기  (4)	2022.09.19
"마우스이펙트 01" : 커서에 다양한 효과 넣기  (1)	2022.09.06