Splitting.js를 사용하여 로딩하는 애니메이션 입니다.
코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.
HTML 소스
<p data-splitting>Loading ....</p>
<div class="wrap">
<div class="vertical-flip" data-splitting="cells" data-columns="10" data-rows="1" data-image="true">
</div>
</div>
CSS 소스
.vertical-flip {
width: 10rem;
height: 1rem;
margin-block-start: 0.5rem;
background: dodgerblue;
}
.wrap {
outline: 1px solid #efefef;
outline-offset: 0.25rem;
}
p {
opacity: 0.5;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background: #080808;
font-family: "Open Sans", sans-serif;
color: #fff;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
JS 소스
Splitting();
var tl = gsap.timeline({ repeat: -1, repeatDelay: 0.75 });
tl
.from(".vertical-flip .cell", {
scale: 0,
transformOrigin: "center",
x: "1.5rem",
duration: 0.25,
ease: "circ.out",
stagger: {
amount: 3,
from: "start"
}
})
.to(
".vertical-flip .cell",
{
scale: 0,
xPercent: -900,
duration: 0.5,
stagger: { amount: 0.75, from: "start" }
},
"+=0.5"
);
|
