텍스트 애니메이션 소스 질문
본문
텍스트 애니메이션을 적용해 보려고 합니다.
아래 소스를 보면 제일 아랫부분 롤링되는 텍스트가
wOrK , lifeStyle , Everything 이렇게 3개가 있는데요.
만약 이 부분을 단어를 추가해서 3개가 아닌 여기를 5개로 돌아가게
하려면 어느 부분을 어떻게 조정해야 할까요?
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {
margin:0px;
font-family:'Roboto';
text-align:center;
}
#container {
color:#999;
text-transform: uppercase;
font-size:36px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#flip {
height:50px;
overflow:hidden;
}
#flip > div > div {
color:#fff;
padding:4px 12px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
@keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
p {
position:fixed;
width:100%;
bottom:30px;
font-size:12px;
color:#999;
margin-top:200px;
}
</style>
<div id=container>
Make
<div id=flip>
<div><div>wOrK</div></div>
<div><div>lifeStyle</div></div>
<div><div>Everything</div></div>
</div>
AweSoMe!
</div>
답변 2
네~ 답변 감사 드립니다. 수학적 계산 이라고 하셨는데, 키프레임 부분에 % 와 픽셀로 위치 주는 부분을 어떻게 계산해야 하는지를 모르겠네요. 혹시 계산 규칙이나 공식 등을 알 수 있을까요?
저도 몰라요. 그래서, 한땀한땀 테스트해가면서 구현했어요.
그렇군요, 따로 규칙이 있는게 아닌가 보네요. 저도 더 공부해 봐야 겠습니다. 감사합니다.^^
px경우 롤링되는 각 요소의 실제높이(=height + padding + margin)의 배수로 설정하시면 될 거세요.
%경우엔 직접 한땀한땀 테스트하셔야....(머리 쓸려니까 힘들더라구요. ㅎ)
네~ 제가 댓글 확인이 늦었습니다. 끝까지 상세히 알려주셔서 감사합니다.^^
태그만 추가하면 될것 같습니다.
<div id=flip>
<div><div>wOrK</div></div>
<div><div>lifeStyle</div></div>
<div><div>Everything</div></div>
<div><div>Other1</div></div>
<div><div>Other2</div></div>
</div>
이건 당연히 가장 먼저 해봤는데 그렇게만 해서는 안되더라고요.
