마우스 이동에 따라 사진 움직이기(html, css, js)
2021. 3. 14. 17:48ㆍ재미있는 웹
오늘 해볼 것들
마우스를 움직이는 대로 자동차나 배경이 다르게 변하는 화면을 만들어봅시다. 이번에도 html, css, js만을 사용해서 구현할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8"/>
<meta name="viewport" />
</head>
<body>
<img src="tycan.png" id="car" />
<img src="bg.png" id="background"/>
</body>
</html>
기본적인 html 파일을 만들어 줍니다. 그런 다음 img를 사용해서 src로 이미지를 등록해서 화면을 볼 수 있습니다.
이미지만 설정해주면 차례대로 나오기 때문에 겹치게 만들기 위해서 car의 position을 absolute로 만들어줍니다. 그리고 z-index를 숫자를 지정해서 앞으로 보이게 만들어줍니다.
body{
background-color: black;
overflow: hidden;
}
#background{
width: 450px;
margin-left: 40%;
}
#car{
position: absolute;
width: 300px;
z-index: 100;
left: calc(50% - 150px);
margin-top: 20%;
}
여기서 중요한 점이 car의 left입니다. left의 50% - 150px의 의미는 차를 가운데 위치로 맞추는 것입니다.
let car, background;
let x = 0, y = 0;
let mx = 0, my = 0;
const speed = 0.03;
const loop = () =>{
mx += (x - mx) * speed;
my += (y - my) * speed;
window.requestAnimationFrame(loop);
}
const mouseFunc = (e) =>{
x = (e.clientX-window.innerWidth/2), y = (e.clientY-window.innerHeight/2);
car.style.transform = `translate(${-(mx/50)}px, ${-(my/50)}px)`;
background.style.transform = `translate(${(mx/12)}px, ${(my/6)}px)`;
}
window.onload = () =>{
car = document.getElementById("car");
background = document.getElementById("background");
loop();
window.addEventListener("mousemove", mouseFunc);
}여기의 js 코드를 보면 이전의 예제와 특별히 다른 것은 없습니다. 하지만 차이점이 있다면 x와 y의 입력 값의 계산이 달라짐을 알 수있습니다.
현재 사진의 위치가 정중앙을 0으로 맞추어 주는 것입니다.
e.clientX는 현재 마우스의 위치 값그리고 window.innerWidth는 window의 전체 가로길이의/2면 딱 반사이즈라서 빼주게 되면 가운데 좌표가 0이 되는 것과 같은 효과입니다. 또한 나누어줄 때 50과 12 등으로 다른 값으로 나누어 주었는데 앞에 있는 사진과 뒤의 사진을 다른 가속도로 움직이는 것을 보여주기 위함입니다.
'재미있는 웹' 카테고리의 다른 글
| 스크롤을 통해 블로그 뒷배경 이미지 만들기(html, css, js) (0) | 2021.03.15 |
|---|---|
| 스크롤을 통해서 게이지 변환 보기(html, css, js) (0) | 2021.03.14 |
| 마우스 커서 만들기(html, css, js) (0) | 2021.03.14 |