fluid-card toggle animation
구현해보기!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" container="IE=edge">
<meta name="viewport" container="width=device-width, initial-scale=1.0">
<!-- xeicon -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<title>토글버튼 클릭하면 박스가 붙었다 떨어졌다 기능</title>
<style>
* {margin:0; padding:0;}
.box-section {display:flex; align-items: center; justify-content: center; height:50vh;}
.box-wrap {position:relative; width:300px; height: auto;}
.box-wrap .btn--toggle {z-index:3; position:absolute; left:50%; top:145px; transform: translateX(-50%); width:35px; height:35px; border:none; border-radius:8px; background: #fefefe;}
.box-wrap .btn--toggle i {display:inline-block; transform: rotate(0); transition: all 0.5s; font-family:xeicon; font-size:24px;}
.box-wrap .box {position:absolute; padding:15px; width:100%; background:#772df4; border-radius: 10px; color:#fefefe; text-align: center; box-sizing: border-box;}
.box-wrap .box .icon {margin-bottom:9px;}
.box-wrap .box .txt h3 {font-size:24px;}
.box-wrap .box .txt p {color:#eee; font-size:13px;}
.box-wrap .box__top {z-index:2; top:0; height:160px; transition: all 0.5s;}
.box-wrap .box__top .icon {font-size:34px;}
.box-wrap .box__top .icon__item {display:inline-block; padding:5px; background:#fefefe; border-radius:10px; box-shadow: 2px 2px 5px #5612c9; }
.box-wrap .box__top .icon__item::before {content: '😫'; display:block;}
.box-wrap .box__top .icon__item::after {content: '😁'; display:none;}
.box-wrap .box__bottom {z-index:1; top:110px; transition: all 0.5s;}
.box-wrap .box__bottom .txt {opacity:0; transition: all 0.5s;}
.box-wrap .box__bottom .txt h3 {font-size:18px;}
/* 클릭이벤트 */
.box-wrap .btn--toggle.on i {transform: rotate(180deg);}
.box-wrap .box__top .icon__item.on::before {display:none;}
.box-wrap .box__top .icon__item.on::after {display:block;}
/* .box-wrap .box__top.on {top:10px;} */
.box-wrap .box__top.on {animation: topBoxAni 0.2s ease;}
@keyframes topBoxAni {
0% {top:0px}
100% {top:5px}
}
.box-wrap .box__bottom.on {top:200px;}
.box-wrap .box__bottom.on .txt {opacity:1;}
</style>
</head>
<body>
<section class="box-section">
<div class="box-wrap">
<button class="btn--toggle" onclick="btnToggle()"><i class="xi-angle-up-min"></i></button>
<div class="box box__top">
<div class="container">
<div class="icon"><span class="icon__item"></span></div>
<div class="txt">
<h3>HELLO</h3>
<p>nice to meet you</p>
</div>
</div>
</div>
<div class="box box__bottom">
<div class="container">
<div class="txt">
<h3>Loreg elit. tenetur!</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore, nisi.</p>
</div>
</div>
</div>
</div>
</section>
<script>
const btnToggleIcon = document.querySelector('.btn--toggle');
const boxTop = document.querySelector('.box__top');
const iconItem = document.querySelector('.icon__item');
const boxBottom = document.querySelector('.box__bottom');
function btnToggle(){
btnToggleIcon.classList.toggle('on');
boxTop.classList.toggle('on');
iconItem.classList.toggle('on');
boxBottom.classList.toggle('on');
}
</script>
</body>
</html>
mindaeng