CSS 애니메이션 (2)
2023. 3. 13. 11:10ㆍzerobase/HTML&CSS
728x90
transform 속성
● ui를 브라우저에 그리는 순서를 만드는 방법
○ dom-tree
○ layout: width, height
○ paint: color
○ camposite: transform
복잡한 애니메이션이 필요할 때 - animation 속성
● wiggle 사용하기
마우스 움직임 추적하기
● mousemove로 마우스 추적하기
<body>
<h1>x : <span id="x"></span> , y : <span id="y"></span> </h1>
<script>
window.addEventListener("mousemove", 마우스추적);
var x = document.querySelector('#x');
var y = document.querySelector('#y');
function 마우스추적(event) {
x.innerHTML = event.clientX;
y.innerHTML = event.clientY;
}
</script>
</body>● 커서의 위치에 따라 div의 위치 바꾸기
<body>
<h1>x : <span id="x"></span> , y : <span id="y"></span> </h1>
<div id="cursor"></div>
<script>
window.addEventListener("mousemove", 마우스추적);
var x = document.querySelector('#x');
var y = document.querySelector('#y');
var cursor = document.querySelector('#cursor');
function 마우스추적(event) {
x.innerHTML = event.clientX;
y.innerHTML = event.clientY;
cursor.style.top = (event.clientY - 25) + "px";
cursor.style.left = (event.clientX - 25) + "px";
}
</script>
</body>
● transform으로 커서 따라 움직이기
<body>
<h1>x : <span id="x"></span> , y : <span id="y"></span> </h1>
<div id="cursor"></div>
<script>
window.addEventListener("mousemove", 마우스추적);
var x = document.querySelector('#x');
var y = document.querySelector('#y');
var cursor = document.querySelector('#cursor');
function 마우스추적(event) {
x.innerHTML = event.clientX;
y.innerHTML = event.clientY;
let value = (event.clientX - 25) + "px," + (event.clientY - 25) + "px";
cursor.style.transform = "translate(" + value + ") ";
}
</script>
</body>
● 마우스의 움직임에 따라 글씨 쓰기
<body>
<div id="targetBox">
<div id="blind"></div>
<h1>안녕하세요! 째재입니다.</h1>
</div>
<script>
var targetBox = document.querySelector("#targetBox");
var blind = document.querySelector("#blind");
targetBox.addEventListener("mousemove", function (e) {
blind.style.transform = "translateX(" + e.clientX + "px)";
})
</script>
</body>#targetBox {
width: auto;
display: inline-block;
border: 1px solid red;
position: relative;
overflow: hidden;
}
#targetBox h1 {
margin: 0px;
padding: 20px;
font-size: 1.5rem;
}
#blind {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
top: 0;
left: 0;
}스크롤 위치 추적하기
● 스크롤 만들기
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="scroll-outer">
<div class="scroll-inner"></div>
</div>
</body>
<script>
window.addEventListener("scroll", function () {
console.log(document.documentElement.scrollTop + window.innerHeight);
})
</script>$radius: 14px;
body {
height: 1000vh;
background: rgb(2, 0, 36);
background: linear-gradient(45deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
.scroll-outer {
position: fixed;
width: 10px;
height: 100px;
border-radius: $radius;
top: 50%;
right: 10px;
transform: translate(-50%);
background-color: gray;
}
.scroll-inner {
width: 100%;
height: 0px;
position: absolute;
top: 0;
background-color: yellow;
border-radius: $radius;
}
○ 문서의 전체 높이 : document.documentElement.scrollHeight
○ 브라우저가 보여주고 있는 높이: window.innerHeight
○ 스크롤의 위치: document.documentElement.scrollTop
○ 스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이 ) * 100%
● 브라우저 위치에 따라 스크롤 위치 변하기
<script>
var scrollY = 0;
var target = document.querySelector(".scroll-inner");
window.addEventListener("scroll", function () {
var documentHeight = document.documentElement.scrollHeight;
var browserHeight = window.innerHeight;
scrollY = document.documentElement.scrollTop;
var percent = scrollY / (documentHeight - browserHeight) * 100 + "%";
target.style.height = percent;
console.log(percent);
})
</script>
● console 창에 숫자 정수로 나오게
<script>
var scrollY = 0;
var target = document.querySelector(".scroll-inner");
window.addEventListener("scroll", function () {
var documentHeight = document.documentElement.scrollHeight;
var browserHeight = window.innerHeight;
scrollY = document.documentElement.scrollTop;
var percent = scrollY / (documentHeight - browserHeight) * 100;
target.style.height = Math.round(percent) + "%";
console.log(percent, Math.round(percent));
})
</script>
● 스크롤바 가로로
<script>
var scrollY = 0;
var target = document.querySelector(".scroll-inner");
window.addEventListener("scroll", function () {
var documentHeight = document.documentElement.scrollHeight;
var browserHeight = window.innerHeight;
scrollY = document.documentElement.scrollTop;
var percent = scrollY / (documentHeight - browserHeight) * 100;
target.style.width = Math.round(percent) + "%";
console.log(percent, Math.round(percent));
})
</script>$radius: 14px;
body {
height: 1000vh;
background: rgb(2, 0, 36);
background: linear-gradient(45deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
.scroll-outer {
position: fixed;
width: 100vw;
height: 5px;
border-radius: $radius;
top: 10px;
left: 50%;
transform: translateX(-50%);
background-color: gray;
overflow: hidden;
}
.scroll-inner {
width: 0px;
height: 100%;
position: absolute;
top: 0;
background-color: yellow;
border-radius: $radius;
}'zerobase > HTML&CSS' 카테고리의 다른 글
| 핵심 CSS(2) (0) | 2023.03.14 |
|---|---|
| 핵심 CSS(1) (0) | 2023.03.14 |
| css 애니메이션(1) (1) | 2023.03.13 |
| SASS (0) | 2023.03.12 |
| 에어비앤비 클론코딩 (0) | 2023.03.12 |