“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- 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
마우스에 이펙트 효과를 입혀보자!
마우스 이펙트 효과 오늘은 마우스에 이펙트 효과를 입혀봤습니다. 마우스 이펙트 효과(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나
younajeong.tistory.com
https://younajeong.tistory.com/46
마우스 이펙트 효과 두번째 효과를 만들어 봅시다!
마우스 이펙트 효과 두번째 이번 시간에는 GSAP를 사용해서 마우스가 부드럽게 따라다니는 효과를 주도록 하겠습니다. 첫번째 효과에서 마우스의 움직임이 부드럽지 못했는데 이번 효과 에서는
younajeong.tistory.com