티스토리 뷰
반응형
사이트 접속 시
마우스 포인터 따라다니는 도형 샘플 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Follow Shape</title>
</head>
<body>
<div class="shape"></div>
<script>
document.addEventListener('mousemove', function(event) {
const x = event.clientX;
const y = event.clientY;
const shape = document.querySelector('.shape');
shape.style.left = `${x}px`;
shape.style.top = `${y}px`;
});
</script>
</body>
</html>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #f0f0f0;
--mouse-x: 50%;
--mouse-y: 50%;
}
.shape {
width: 55px;
height: 55px;
border: 1px solid #0c2d83;
border-radius: 100%;
position: absolute;
transform: translate(-50%, -50%);
transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform
, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
}
</style>
트랜지션에서 3차원 베지어를 사용하여 좀 더 부드럽게 처리하였습니다.
위 코드 실행 예시
Mouse Follow Shape
output.jsbin.com
반응형
'Javascript' 카테고리의 다른 글
| [fullCalendar] title 명에 html 태그 적용하기 (feat.ibCalendar) (0) | 2024.02.21 |
|---|---|
| [Javascript] Object 동적으로 key 값 지정하기. (0) | 2024.01.12 |
| [Javascript] 전화번호 자동 하이픈(-) 함수 (2) | 2023.12.07 |
| [API] 다음카카오 우편번호 API (0) | 2023.09.19 |
| [SemanticUI] dropdown 여러개 사용시 특정 id 이벤트 (0) | 2023.08.09 |
댓글