프론트/리액트
리액트)1주차 학습 - css 애니메이션
뽀짝코딩
2024. 6. 8. 12:49
728x90
1. html에서 js로 이벤트 적용하기
모달 열고, 닫기
<body>
<h1 id="heading">제목입니다</h1>
<p>내용입니다</p>
<button>수정하기</button>
<button onclick="modalOpCl('block')">삭제하기</button>
<div class="modalDiv">
<div class="bg" onclick="modalOpCl('none')"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button onclick="modalOpCl('none')">취소</button>
<button>삭제</button>
</div>
</div>
<!-- JS에서 UI 바꾸는 방법
1. html/css ui를 만든다.
2. css로 숨긴다.
3. js로 다시 나타나게 한다.
dry: don't repeat your code
-->
<script>
//모달 열고, 닫기
// function modalOpen() {
// var modal = document.querySelector(".modalDiv");
// modal.style.display = "block";
// }
// function modalClose() {
// var modal = document.querySelector(".modalDiv");
// modal.style.display = "none";
// }
//코드 반복 줄이기
function modalOpCl(인자) {
var modal = document.querySelector(".modalDiv");
modal.style.display = 인자;
}
</script>
</body>
2. wiggle 애니메이션
복잡한 애니메니션이 필요할때 사용
<body>
<h1 class="wiggle">안녕하세요!</h1>
</body>
wiggle.css
/* wiggle 애니메이션 */
@keyframes wiggle {
0% {
transform: rotate(0deg);
color: red;
}
25% {
transform: rotate(10deg);
color: orange;
}
50% {
transform: rotate(0deg);
color: yellow;
}
75% {
transform: rotate(-10deg);
color: blue;
}
100% {
transform: rotate(0deg);
color: green;
}
}
h1.wiggle {
display: inline-block;
animation: wiggle 5s;
}
3. 마우스 움직임 추적
마우스가 움직일때마다 좌표가 화면에 출력된다.
<body>
<h1>x : <span id="x"></span>, y : <span id="y"></span></h1>
<div id="cursor">
<script>
window.addEventListener("mousemove", 마우스추적);
var x = document.querySelector("#x");
var y = document.querySelector("#y");
function 마우스추적(event) {
x.innerHTML = event.clientX;
y.innerHTML = event.clientY;
cursor.style.top = event.clientY + "px";
cursor.style.left = event.clientX + "px";
// cursor.style.top = (event.clientY - 25 ) + "px"; //마우스가 정중앙에 위치
// cursor.style.left = (event.clientX - 25 ) + "px"; //마우스가 정중앙에 위치
// transform으로
// cursor.style.transform = "translate(" + event.clientX + "px," + event.clientY + "px)";
//let value = (event.clientX - 25) + "px," + (event.clientY - 25) + "px"; //마우스가 정중앙에 위치
//cursor.style.transform = "translate(" + value + ")";
}
</script>
</body>
#cursor {
cursor: none; /* 마우스 숨기기 */
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: rgb(255, 255, 0);
border-radius: 50%;
}
4. Scroll 위치 추적
*현재 문서에서 스크롤을 얼마나 내렸는지 확인하는 방법*
문서의 전체 높이 : document.documentElement.scrollHeight
브라우저가 보여주고 있는 높이 : window.innerHeight
스크롤의 위치 : document.documentElement.scrollTop
스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이) * 100%
<body>
<div class="scroll-outer">
<div class="scroll-inner"></div>
</div>
<script>
/* 현재 문서에서 스크롤을 얼마나 내렸는지 확인하는 방법
문서의 전체 높이 : document.documentElement.scrollHeight
브라우저가 보여주고 있는 높이 : window.innerHeight
스크롤의 위치 : document.documentElement.scrollTop
스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이) * 100%
*/
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) + "%"; //세로 스크롤
target.style.width = Math.round(percent) + "%"; //가로 스크롤
console.log(percent + ", " + Math.round(percent));
});
</script>
</body>
scroll.css
@charset "UTF-8";
body {
height: 1000vh;
background: rgb(2, 0, 36);
background: linear-gradient(45deg, rgb(2, 0, 36) 0%, rgb(9, 9, 121) 35%, rgb(0, 212, 255) 100%);
}
.scroll-outer {
position: fixed;
background-color: gray;
border-radius: 14px;
overflow: hidden;
transform: translateY(-50%);
/* 세로 스크롤 */
/* 가로 스크롤 */
width: 100vw;
height: 5px;
top: 10px;
left: 50%;
}
.scroll-inner {
/* 세로 스크롤 */
position: absolute;
top: 0;
background-color: yellow;
border-radius: 14px;
/* 가로 스크롤 */
width: 0%;
height: 100%;
}
참고
판다코딩 강의 - 처음부터 따라해보는 HTML/CSS 실습
반응형