소스 문의 드립니다.
본문
위 사이트 메인화면에서 살짝만 내리면 About에 아이콘 5개가 아래 위로 바운스를 합니다.
여기까지는 애니메이션으로 대충 따라하겠는데
랜덤인지 어떤지 모르겠지만 5개가 돌아가면서 바운스를하는게 뭔지를 모르겠는데 호기 고수님들 중
아시는 분 계실까요?
답변 1
그냥 제 나름대로 한번 만들어봤어요
<style>
ul, li {list-style:none;padding:0;margin:0;}
ul {display:flex;}
li {padding:0 5px;}
li.on {animation:jump .4s linear;}
li.test {transform:translate(0, -50%);}
@keyframes jump {
0% {transform:translate(0, 0);}
50% {transform:translate(0, -20%);}
100% {transform:translate(0, 0);}
}
</style>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<script>
let jumpInterval = setInterval(function() {
let li = document.querySelectorAll('li');
let current;
let target;
li.forEach(function(el, idx) {
if (el.classList.contains('on'))
current = idx;
el.classList.remove('on');
target = Math.floor(Math.random() * 5);
while (current == target) {
target = Math.floor(Math.random() * 5);
}
});
li[target].classList.add('on');
}, 1000);
</script>
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
