JAVASCRIPT STEP 51 - 새를 이용한 애니메이션

★ 새를 이용한 애니메이션

• 새를 날게 함.
• 이미지 전체 크기 : 800 x 140 / 한 장면 크기 : 200 x 140

■ HTML 코드

<h1>새 날개짓</h1>

<div id="bird"></div>

새의 속도 : 
<select id="selspeed">
    <option value="300">느림</option>
    <option value="100" selected>보통</option>
    <option value="60">빠름</option>
    <option value="10">엄청빠름</option>
</select>

<div style="display: none;">
    <img src="https://drive.google.com/uc?export=download&id=1jDYEreaHYZ2p2w2FbETMgldZDrIxec9W">
</div>

■ CSS 코드

<style>
    body {
        background-color: #f5f5f5;
        text-align: center;
        margin-top: 100px;
    }
    #bird  {
        width: 200px;
        height: 139px;
        background-image: url("https://drive.google.com/uc?export=download&id=1jDYEreaHYZ2p2w2FbETMgldZDrIxec9W");
        transition: transform 3s;
        margin: 0px auto;
    }
    #selspeed {
        margin-top: 20px;
        margin-left: 10px;
    }
</style>

■ JavaScript

<script>

    var bird = document.getElementById("bird");
    var x = 0;
    var speed = 100;
    var timer = 0;

    timer = setInterval(function() {
        bird.style.backgroundPosition = x + "px 0px";
        x -= 200;
    }, speed);

    document.getElementById("selspeed").onchange = function() {
        clearInterval(timer);
        timer = setInterval(function() {
            bird.style.backgroundPosition = x + "px 0px";
            x -= 200;
            if (document.getElementById("selspeed").value == 10) {
                bird.style.transform = "translate(0px, -1000px)";
            }
        }, event.srcElement.value);
    };

</script>

■ 실행 결과

속도를 선택하여, 원하는 속도의 날개짓을 보여줌

 

■ 시뮬레이션

 

 

새 날개짓

새의 속도 : 느림 보통 빠름 엄청빠름