JS
230104 JS 애니메이션
주영재
2023. 1. 4. 18:30
애니메이션
.사용할 클래스 {
display: block;
animation:fadeIn 1s ease-in-out; background-color: aquamarine;
}
/* 애니메이션 */
@keyframes fadeIn{
from {
opacity:0;
background-color: aqua;
margin-left: -100px;
}to{
opacity:1;
background-color: aquamarine;
margin-left:0;
}
}
상세한 요소는 w3school 참조
or
무료 animationlibrary 사이트
ex)https://michalsnik.github.io/aos/
CDN SOURCES에서 css랑 js 링크 걸고 script에서 AOS.init();하면 사용가능
애니메이션을 클래스로 동작한다. 태그에 해당 클래스가 있어야 함.
토글탭실습에 애니메이션 넣기
<!DOCTYPE html>
<html lang="en">
<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>
<style>
.toggle li {
display: inline-block;
padding: 15px 20px 14px;
width: 25%;
text-align: center;
border: 1px solid #333;
cursor: pointer;
}
.toggle-menu {
display: none;
}
.active {
display: block;
animation:fadeIn 1s ease-in-out; background-color: aquamarine;
}
/* 애니메이션 라이브러리 사이트 : https://michalsnik.github.io/aos/ */
/* 애니메이션 */
@keyframes fadeIn{
from {
opacity:0;
background-color: aqua;
margin-left: -100px;
}to{
opcity:1;
background-color: aquamarine;
margin-left:0;
}
}
</style>
</head>
<body>
<section>
<ul class="toggle">
<li data-id="#toggle1">메뉴1</li>
<li data-id="#toggle2">메뉴2</li>
<li data-id="#toggle3">메뉴3</li>
</ul>
<div>
<div class="toggle-menu active" id="toggle1">
토글메뉴1
</div>
<div class="toggle-menu" id="toggle2">
토글메뉴2
</div>
<div class="toggle-menu" id="toggle3">
토글메뉴3
</div>
</div>
</section>
<script>
var toggle=document.querySelector(".toggle");
toggle.onclick=function(){
if(event.target.tagName!="LI") return;
var id =event.target.dataset.id;
var select=document.querySelector(id);//내부가 문자열 형식이기 때문에 ""를 안해줘도 된다.
var arr = select.parentElement.children;
for(var i =0;i<arr.length;i++){
arr[i].classList.remove("active");
}
select.classList.add("active");
}
</script>
</body>
</html>