안녕하세요~ 오늘은 마우스 효과를 만들어보겠습니다!
첫 번째는 마우스 커서에 애니메이션 효과를 주어 마우스를 따라다니는 기본 효과를 주었고,
두 번째는 gsap를 활용해 마우스를 따라다니는 효과를 주었습니다.
세 번째 효과에서는 마우스를 따라다니는 "조명"효과를 나타내볼게요!
자바스크립트 마우스 이펙트(세 번째) 만들기
기본 CSS (reset.css와 mouse.css)설정은 전에 썼던 게시글을 참고해주세요!
구조 짜기
<body class="img08 bg03 font03">
<header id="header">
<h1>Javascript Mouse Effect03</h1>
<p>마우스 이펙트</p>
<ul>
<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>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>Life is either a daring adventure or nothing at all.</p>
<p>생활은 과감한 모험이거나 아니면 아무것도 아니다.</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:dsy1943@naver.com">dsy1943@naver.com</a>
</footer>
<!-- //footer -->
</body>이번엔 배경이 어두웠다가 마우스 커서를 원으로 설정하고, 그 뒤에 배경이 밝게 보이는 조명효과입니다.
mouse__wrap에 mouse__cursor와 mouse__text를 설정해 내용을 구성해줍니다. header와 footer부분엔 전과 동일하게 구조를 짜주면 됩니다! (페이지와 메일 등등)
CSS 설정
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
z-index: 10;
}
.mouse__text p {
font-size: 2.5vw;
line-height: 1.6;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(img/mouseEffect08-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}mouse__wrap과 text, cursor에게 각각 CSS를 설정해줍니다.
mouse__cursor에 width와 height 값이 200이고, border-radius가 50%인 원 모양을 설정해줍니다.
그리고 5px 솔리드인 보더를 주어 원 모양을 만들어주고, 그 뒤에 이미지를 넣어줍니다.
이미지는 배경과 같은 이미지를 넣어주고 size를 cover로 해서 딱 들어오게 해줍니다.
여기서 중요한 CSS 속성은
background-attachment: fixed; 인데, 무엇인지 확인해보겠습니다.
background-attachment: fixed;
"background-attachment: fixed"은 CSS 속성으로, 요소의 배경 이미지가 스크롤되는 동안 고정되어 있어야 할지 여부를 정의합니다. 이 속성을 사용하면 웹 페이지의 다른 내용이 스크롤되는 동안 배경 이미지는 고정된 위치에 유지됩니다.
이러한 속성을 사용해 이미지를 고정시켜 마치 조명효과처럼 보이게 해주었습니다.
스크립트 짜기
첫 번째에선 기본 방법으로 애니메이션 효과를 주었다면, 이번엔 두 번째와 같이 gsap를 사용해 효과를 주겠습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>스크립트 위에 넣어주시면 됩니다.
요소 속성을 사용해 크기 및 위치를 가져오는 방법
// 방법 1 : 요소 속성을 활용해 크기 및 위치를 가져오는 방법
// 선택자
const cursor = document.querySelector(".mouse__cursor");
// console.log(cursor.clientWidth); //190(보더 값 미포함)
// console.log(cursor.clientHeight); //190(보더 값 미포함)
// console.log(cursor.offsetWidth); //200(보더 값 포함)
// console.log(cursor.offsetHeight); //200(보더 값 포함)
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - cursor.clientWidth/2,
top: e.pageY - cursor.clientHeight/2
});
});먼저 선택자를 통해 cursor라는 변수를 만들어주어 선택해줍니다. 그리고 clientWidth와 clientHeight, offsetWidth와 offsetHeight를 콘솔로그로 출력을 해봅니다. 여기서 clientWidth와 Height가 190이 나오는 이유는, 전에 CSS에서 커서의 보더값을 5px을 주었기 때문에 10px이 빠져 190이 되었습니다.
그리고 window.addEventListner를 통해 마우스가 움직일 때 이벤트 함수를 실행시켜줍니다.
gsap중 to()메서드를 활용해 커서에게 애니메이션 효과를 줄건데, left는 e.pageX값에서 cursor.clientWidth/2를 마이너스 해주고, top은 e.pageY에서 cursor.clientHeight/2를 마이너스 해줍니다.
요소 메서드를 사용해 크기 및 위치를 가져오는 방법
element.getBoundingClientRect()?
DOM 요소의 크기와 위치 정보를 반환하는 JavaScript 메소드입니다. 이 메소드는 요소의 경계 상자(bounding box)를 나타내는 DOMRect 객체를 반환합니다.
// 방법 2 : 요소 메서드를 활용해 크기 및 위치를 가져오는 방법
// console.log(cursor.getBoundingClientRect());
const circle = cursor.getBoundingClientRect();
const DOMRect = {
bottom : 200,
height : 200,
left : 0,
right : 200,
top : 0,
width : 200 ,
x : 0,
y : 0
};
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
});이번엔 getBoundingClientRect()를 활용해 스크립트를 짜보았습니다.
먼저 콘솔로그를 통해 cursor.getBoundingClientRect()의 값들을 불러옵니다.
그리고 circle이라는 변수에 그 객체 값들을 저장시키고, 출력시킬 때, left는 e.pageX 에서 circle.width(객체)/2를 마이너스 해주고, top은 e.pageY에서 circle.height/2를 마이너스 해줍니다.
완성된 페이지와 코드 보기
https://github.com/YeoDaSeul4355/web2023/blob/main/javascirpt/mouse/mouseEffect03.html
전에 했던 효과들은 이전 블로그 게시글을 참고해주세요!
마우스 이펙트 첫 번째
https://duektmf34.tistory.com/49
마우스 이펙트(첫 번째)를 만들어봅시다!
안녕하세요 오늘은 마우스 효과를 만들어보겠습니당 ! 새로운 메서드와 속성들이 나왔으니 꼼꼼하게 정리해볼게요~ 자바스크립트 마우스 이펙트(첫 번째) 만들기 css 세팅해주기 reset.css 설정 @im
duektmf34.tistory.com
마우스 이펙트 두 번째
https://duektmf34.tistory.com/52
마우스 이펙트(두 번째)를 만들어봅시다!
안녕하세요~ 오늘은 마우스 효과를 만들어보겠습니다! 첫 번째는 마우스 커서에 애니메이션 효과를 주어 마우스를 따라다니는 기본 효과를 주었는데, 이번엔 gsap를 활용해 마우스를 따라다니는
duektmf34.tistory.com
