“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
마우스 이펙트 03
저번 효과를 이어서 이번에는 이미지가 보이지 않지만 마우스 이펙트 효과를 통해 이미지가 보여지는 조명 효과를 입혀봤습니다!
이번 마우스 이펙트 세번째 효과에서 사용될 속성들 입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 실행하기 : 함수, 화살표 함수
- 이벤트 객체 : mousemove
- 요소 객체 : querySelector,clientWidth, clientHeight, offsetWidth, offsetHeight, getBoundingClientRect()
- CSS : backgruound-attachment: fixed
HTML
<body class="img03 bg03 font03">
<header id="header">
<h1>Javascript mouseEffect03</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 a journey to be experienced, not a problem to be solved</p>
<p>인생은 해결해야 할 문제가 아니라 경험해야 할 여정입니다</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:jeongyouna_@naver.com">jeongyouna_@naver.com</a>
</footer>
<!-- //footer -->
CSS
<style>
#header {
z-index: 100;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 10;
}
.mouse__text p {
font-size: 2vw;
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(225, 225, 225, 0.5);
background-image: url(img/mouseEffect03-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>
HTML&CSS
- 저번 마우스 이펙트 2번째에서 했던 그대로 mouse__wrap부분을 복사해오고 cursor는 하나만 둡니다.
- mouse text에 글을 써줍니다.
- header위에 style태그를 써서 mouse wrap과 mouse__text와 그 자식 요소들에게 속성들을 부여 해줍니다.
- 또한 여기서는 이미지가 배경에 완전 가려주도록 해줍니다. img bg를 정리해둔 html파일로 들어가서 색상을 진하게 설정합니다.
- text가 가운데 올 수 있도록 설정 해준 후 mouse__cursor가 동그랗게 만들어 질 수 있도록 설정해줍니다.
- 그리고 원 안에 attachmemt: fixed를 사용해서 이미지가 원 안에 보일 수 있도록 설정해줍니다.
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//선택자
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
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
});
});
</script>
javascript 하는 법
- 먼저 cursor 선택자를 선택 해줍니다. 그리고 clientWidth와 Height값과 offsetWidth와 Height값을 확인 해줍니다.
- 여기서 보면 clientWidth,Height값은 보더를 미포함 해서 190이 나오는걸 console.log로 확인 할 수 있습니다.
- 여기서 circle의 크기와 위치값을 설정해 주기 위해 getBoundingClientRect() 매서드를 써줍니다.
- 먼저 console.log로 확인해보면 여기에 담고 있는 속성들을 알 수 있는데 DOMRect라는 변수 안에 bottom,height,left,rigtht,top,width,x,y 값을 객체로 가지고 있어서 크기와 위치값을 담내고 있다는걸 볼 수 있습니다.
- 그러면 window로 이벤트 객체를 사용해서 mousemove할때 gsap 자바스크립트 애니메이션 라이브러리를 사용해서 화살표 함수를 이용해 값을 구해줍니다.
- gsap.to() 라고 써주며 duration 시간지속 시간은 0.5로 설정해주고 left값과 top값을 설정하는데 페이지 안에서 서클이 width값과 heigth값 2로 나눈 좌표의 값이 구해질 수 있도록 설정해 줍니다.
완성된 효과
📚오늘 배운 속성들
getBoundingClientRect() | 돔의 위치와 크기를 반환하는 메서드 입니다. 반환된 값은DOMRect 객체 입니다. |
DOMRect | 요소의 위치와 크기 정보를 저장한 객체이며 boder box기준으로 계산됩니다. |
duration | 시간을 나타내는 값으로 시간 길이를 설정해 주며 밀리초 단위로 표현됩니다. |
background-attachment: fixed | CSS 속성으로 배경 이미지의 스크롤 동작을 설정합니다. 이 속성을 사용하면 배경 이미지가 스크롤에 반응 하지 않고 고정된 상태로 유지합니다. 즉 웹 페이지를 스크롤해도 배경 이미지가 움직이지 않고 그대로 있을 수 있습니다. |
마우스 효과 1,2 보러가기
https://younajeong.tistory.com/45
https://younajeong.tistory.com/46