ปิ้วๆ (Branch 880) (Copy 884) (Copy 886)

✨ NIDA KONGRUNGRUENG

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:1em;
        font-family:sans-serif;
        background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 										255, 0.2) 50%),
					linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.2) 50%), url("https://images-ext-2.discordapp.net/external/95Oqur2kcyO_5zXsUflAaS818bEtawXAfhljdBkLCbQ/https/i.pinimg.com/originals/38/24/17/382417b60104d16330ea6933754a658b.png");
        background-size: 80px 80px;
        
      }
      
      .char{
        background-image:url("https://images-ext-1.discordapp.net/external/YSoLL3NuMCchXsKr4IrOkq2QRyYLT5VEkNrv-LMhWMg/%3Ftoken%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMDRhN2YyYTctMjhkMi00NmRiLThhOTItNTc2NmNhZGU3ZGY4XC9kYTNwMWtjLWM3MGRlOTQzLTEzYzUtNGE0ZS05MGUyLTMwY2M5MmQxOWZkNS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.3ary68gqMv-s4LGhAovotmXnHfZOTDJV2n8D7QaAlxw/https/images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/04a7f2a7-28d2-46db-8a92-5766cade7df8/da3p1kc-c70de943-13c5-4a4e-90e2-30cc92d19fd5.png");
        width: 80px;
        height: 80px;
        animation: neng steps(3, end) 1s infinite;
      }
      
      @keyframes neng {
        from{background-position-x: 0%;}
        to{background-position-x: 150%;}
      }
    </style>
  </head>
  <body>
    
    <div class="char" data-y = 0 onclick="ch(this)">
    </div>
      <script>
        function ch(el){
        let theY = parseInt(el.dataset.y);
        let newY = theY+1;
        el.dataset.y = newY
        el.style.backgroundPositionY = (newY*80)+'px';
        }
     </script>
  </body>
</html>