Party family:GropA P’Getty (Branch 2122)

✨ นายกิตติภพ ปังตระกูล

<head>
  <style>
    body{
		background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/01073865290819.5d61d475f0072.jpg');
      background-size:cover;
      margin:4%;
    }
    .show-bird{
      position: fixed;
		width: 150px;
      height: 150px;
      transform: preserve-3d;
      animation: fly 10s infinite linear;
    }
    .bird{
    	position: absolute;
      top:0%;
      width: 145px;
      height: 125px;
    	background-image: url('https://miro.medium.com/max/840/1*D7_K6bilo0-Ogvj_Ognk3w.jpeg');
      background-size:600px;
      animation: flip 1s steps(4) infinite;
    }
    .Nav {
      -webkit-appearance: none;
       background: #2497cc;
       border: 0;
       outline: 0;
       cursor: pointer;
       width: 12px;
       height: 12px;
       padding:0;
    }
    .Nav:hover:not(.active) {
       opacity: 0.9;
    }
    .Nav.active {
       background: #fff;
    }
    @keyframes flip{
      from{
			background-position-x:0px;
      }
      to{
			background-position-x:600px;
      }
    }
    @keyframes fly{
      from{
			transform: translatex(0vw);
      }
      to{
			transform: translatex(100vw);
      }
    }
    .frame{
      position:relative;
      display: flex;
		background-image: url('https://cdna.artstation.com/p/assets/images/images/006/295/132/large/sergiu-matei-planks-seemless-tile-pixel-art-rpg-top-view-indie-game-dev-matei-sergiu.jpg?1497472734');
      width: 1000px;
      height: 650px;
      margin:auto;
      border-radius: 3%;
    }
    .show{
      position:absolute;
      display: flex;
      top:4%;
      left: 2.5%;
		width: 950px;
      height: 600px;
      background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4a295dfe-9437-4882-b57c-f35fdb879ec5/d2h7adx-558f8ea0-2f78-4a3f-9a21-ce1480d18829.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNGEyOTVkZmUtOTQzNy00ODgyLWI1N2MtZjM1ZmRiODc5ZWM1XC9kMmg3YWR4LTU1OGY4ZWEwLTJmNzgtNGEzZi05YTIxLWNlMTQ4MGQxODgyOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.T-ZCVpFbExMVQ5Wy64iK3Jy8SvHtQhHXCwt3B4EL1nw');
      background-size: cover;
      border-radius: 2%;
    }
    .character{
      position: relative;
      width: 220px;
      height: 300px;
      margin:auto;
      overflow: hidden;
      display: block;
    }
    @keyframes walk{
    from {
        transform: translate3d(0%,0%,0);
      }
      to {
        transform: translate3d(-100%,0%,0);
      }
    }
    .nextButt{
      position: absolute;
      width: 40px;
      height: 50px;
      border:0;
      right: 15%;
      top: 45%;
      background: none;
      background-size: 50px;
      -webkit-appearance: none;
    }
    .preButt{
		position: absolute;
      width: 40px;
      height: 50px;
      border:0;
      left: 15%;
      top: 45%;
      background: none;
      -webkit-appearance: none;
    }
    .arrow{
		width: 40px;
      height: 50px;
      background-image: url('https://cdn.discordapp.com/attachments/798210272027869245/809784380158640138/51-play_player_arrow_game_application_mobile_up_down_left_right-512.png');
      background-size: 50px;
    }
    .arrow.pre{
      transform: rotatey(180deg);
    }
    .spriteSheet{
      display:none;
      animation: walk 1s steps(4) infinite;
      position:absolute;
		width: 900px;
      height:300px;
    }
    .active {
		display:block;
    }
    .Navs{
		position: absolute;
      top: 80%;
      left: 40%;
    }
  </style>
</head>
<body>
  <div class="show-bird"><div class="bird">
    </div>
  </div>
  <div class="frame">
  	<div class="show">
     <div class="character">
     </div>
     <div class="Nav"></div>
     <button class="preButt" onclick='setPreviousActive()'>
       <div class="arrow pre"></div>
     </button>
     <button class="nextButt" onclick='setNextActive()'>
       <div class="arrow next"></div>
     </button>
  </div>
</div>
  
  <script>
    var characterElement = document.querySelector(".character");
    
    var spritesheets = ['https://cdn.discordapp.com/attachments/798210272027869245/809778778469302302/16.png','https://cdn.discordapp.com/attachments/798210272027869245/809797770130227200/17.png','https://cdn.discordapp.com/attachments/798210272027869245/809809388868599808/jpix.png']
    
    let activeIndex = 0;
    let spritesheetElements = "";
	let navigationElements = "";
    
    spritesheets.forEach((spritesheet, index) => {
	spritesheetElements += `<img src="${spritesheet}" class="spriteSheet index-${index}" />`
     navigationElements += `<button class="Nav index-${index}" onclick='setActive(${index})' />`
  });
	characterElement.insertAdjacentHTML( 'beforeend', spritesheetElements );
	document.querySelector(".NavS").insertAdjacentHTML( 'beforeend', navigationElements );

function setActive(index) {
     activeIndex = index;
     document.querySelectorAll(`.active`).forEach(node => {
        node.classList.remove("active")
     })
     document.querySelectorAll(`.index-${index}`).forEach(node => {
        node.classList.add("active")
     })
  }
    function setPreviousActive() {
     activeIndex = activeIndex > 0 ? activeIndex - 1 : spritesheets.length - 1;
     setActive(activeIndex)
  }

function setNextActive() {
     activeIndex = activeIndex < spritesheets.length - 1 ? activeIndex + 1 : 0;
     setActive(activeIndex)
  }
    setActive(activeIndex);
  </script>
</body>