~razzi/birdwatching

152dac6bb7fa7fe3e6727373c7723b8d8df5bf07 — Razzi Abuissa 1 year, 1 month ago main
first bird
3 files changed, 43 insertions(+), 0 deletions(-)

A Kingfisher-Bird-Transparent-Images.png
A img.jpg
A index.html
A  => Kingfisher-Bird-Transparent-Images.png +0 -0
A  => img.jpg +0 -0
A  => index.html +43 -0
@@ 1,43 @@
<style>
  img {
    position: absolute;
  }

  @keyframes movebird {
    from {
      left: 0;
    }
    to {
      left: 5000;
    }
  }
  
  #bird {
    <!-- animation: movebird 2s; -->
  }
</style>

<div>
  <img src='img.jpg'>
  <img id="bird" src='Kingfisher-Bird-Transparent-Images.png'>
</div>


<script>
  const bird = document.getElementById('bird')
  let left = 0;
  let top_ = 200;
  let upDown = 0;
  const flapSpeed = 6;
  const speed = 4;
  setInterval(() => {
    upDown = upDown + Math.random() * flapSpeed - flapSpeed / 2;
    left += speed;
    top_ += upDown;
    bird.style.left = left;
    bird.style.top = top_;
  }, 5)

  bird.onclick = function () { alert('win!') };
</script>