Party family:GropA P’Getty

✨ นายไกรวิน แนวอินทร์

<head>
  <style>
    @import url(https://fonts.googleapis.com/css?family=VT323);
    html{
    	cursor: url(https://cdn.discordapp.com/attachments/798210272027869245/810138203439759400/3d-yellow-pixel-1.png), auto;
		
    }
    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{
      transform: preserve-3d;
      animation: fly 10s infinite linear;
    }
    .upDown{
      position: fixed;
      z-index: 2;
		width: 140px;
      height: 150px;
		animation:  up-down 0.5s infinite linear alternate;
    }
    .bird{
    	position: fixed;
      top:0%;
      width: 143px;
      height: 100px;
    	background-image: url('https://cdn.discordapp.com/attachments/798210272027869245/810122737619435530/19.png');
      background-size:600px;
      animation: flip 1s steps(4) infinite;
    }
    @keyframes up-down{
      from {transform: translatey(0px);}
      to {transform: translatey(60px);}
    }
    .Nav {
       position: relative;
      -webkit-appearance: none;
       background: hsl(120, 40%, 40%);
       border: 0;
       outline: 0;
       cursor: url(https://cdn.discordapp.com/attachments/798210272027869245/810138706219630592/3d-yellow-pixel-2.png), pointer;
       width: 5%;
       margin-right: 2.5%;
       margin-left: 2.5%;
       float: left;
       height: 100%;
       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:absolute;
      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: 55%;
      height: 70%;
      border-radius: 3%;
      background-size: cover;
      transform: translate(35%);

}
    .show{
      position:absolute;
      display: flex;
      top:4%;
      left: 2.5%;
		width: 95%;
      height: 95%;
      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: absolute;
      width: 15%;
      height: 40%;
      overflow: hidden;
      display: block;
      transform: translate(265%, 95%)
    }
    @keyframes walk{
    from {
        transform: translate3d(0%,0%,0);
      }
      to {
        transform: translate3d(-100%,0%,0);
      }
    }
    .nextButt{
      position: absolute;
      width: 9%;
      height: 9%;
      border:0;
      background: none;
      -webkit-appearance: none;
      transform: translate(750%, 500%);
		cursor: url(https://cdn.discordapp.com/attachments/798210272027869245/810138706219630592/3d-yellow-pixel-2.png), pointer;
      
    }
    .preButt{
		position: absolute;
      width: 9%;
      height: 9%;
      border:0;
      transform: translate(220%, 500%);
      background: none;
      -webkit-appearance: none;
		cursor: url(https://cdn.discordapp.com/attachments/798210272027869245/810138706219630592/3d-yellow-pixel-2.png), pointer;
      
    }
    .arrow{
      position: absolute;
		width: 100%;
      height: 100%;
      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: 100% 100%;
      transform: translatey(-50%);
    }
    .arrow.pre{
      transform: rotatey(180deg) translatey(-50%);
      
    }
    .spriteSheet{
      display:none;
      animation: walk 1s steps(4) infinite;
      position:absolute;
      width: 400%;
      height:100%;
    }
    .spriteSheet:hover{
		cursor: url(https://cdn.discordapp.com/attachments/798210272027869245/810138706219630592/3d-yellow-pixel-2.png), pointer;
    }
    .spriteSheet.active {
		display:block;
    }
    .NavS{
		position: absolute;
		width: 35%;
      height: 3%;
      transform: translate(90%,2650%);
    }
    .huadoo{
      display:none;
      animation: walk 1s steps(4) infinite;
      position:absolute;
		width: 400%;
      height: 100%;
      z-index: 3;
    }
    .huadoo.active{
      display: block;
    }
    .nameC{
      position: absolute;
      width: 100%;
      height: 200%;
      transform: translatey(110%);
    }
    .name{
      position: absolute;
      width: 100%;
      height: 100%;
		display:none;
      transform: translatey(-65%);
  	}
    .name.active{
		display: flex;
    }
    input{
      width: 100%;
      border: none;
      background: none;
      position: absolute;
      text-align:center;
      font-size:5vh;
		font-family: 'VT323', cursive;
      color:white;
    }
    .credit{
      position: absolute;
		width: 100%;
      height: 10%;
      transform: translate(0%, 950%)
    }
    .creditButt{
      align-items:center;
      position: relative;
      background: yellow;
      box-shadow: 0vh 2vh gold;
      font-size: 2.5vh;
      border: none;
      display: block;
      float: left;
      margin-left: 2.5%;
      margin-right: 2.5%;
      width: 20%;
      height: 100%;
		font-family: 'VT323', cursive;
		cursor: url(https://cdn.discordapp.com/attachments/798210272027869245/810138706219630592/3d-yellow-pixel-2.png), pointer;
      
    }
    h3{
		font-family: 'VT323', cursive;
		font-size: 5vh;
      text-align: center;
      color: gold;
      text-shadow: 0.5vh 0.25vh black;
    }
  </style>
</head>
<body>
  <div class="upDown">
  	<div class="show-bird"><div class="bird">
    </div>
  </div>
    
  </div>
  <div class="frame">
  	<div class="show">
     <div class="character">
     <div class="head">
     </div>
     </div>
     <div class="NavS">
     	<div class="nameC">
      </div>
     </div>
     <button class="preButt" onclick='setPreviousActive()'>
       <div class="arrow pre"></div>
     </button>
     <button class="nextButt" onclick='setNextActive()'>
       <div class="arrow next"></div>
     </button>
<div class="credit">
  <h3 class="title">
    Credit
  </h3>
  	<a href="https://custom-cursor.com/en/collection/cursors/3d-pixel-yellow" target="_blank"><button class="creditButt">Cursor</button></a>
  	<a href="https://codepen.io/punkydrewster713/pen/YooJJj" target="_blank"><button class="creditButt">Code Reference</button></a>
  	<a href="https://www.deviantart.com/oceansdream/art/Plains-149825877" target="_blank"><button class="creditButt">Inner Background</button></a>
  	<a href="https://www.behance.net/gallery/65290819/Pixel-Art-Backgrounds-Tutorial-Skip" target="_blank"><button class="creditButt">Background</button></a>
</div>
  </div>
</div>
  <script>
    var characterElement = document.querySelector(".character");
    var spritesheets = [
                    'https://cdn.discordapp.com/attachments/798210272027869245/810131044132323348/16.png',/*P'Jabont*/
      				  'https://cdn.discordapp.com/attachments/798210272027869245/810132342361686026/22.png',/*P'Getty*/
                    'https://cdn.discordapp.com/attachments/798210272027869245/810113860182343691/work1.png',/*Bank*/
 'https://cdn.discordapp.com/attachments/798210272027869245/810126168652775434/1711.png',
      /*Ger*/
 'https://cdn.discordapp.com/attachments/798210272027869245/810115251424854036/work2.png',
      /*Mark*/
                    'https://cdn.discordapp.com/attachments/798210272027869245/810128220321349652/jpixface.png',
      /*Modem*/
 'https://cdn.discordapp.com/attachments/798210272027869245/810131792736419840/16.1.png',
      /*Nik*/
 'https://cdn.discordapp.com/attachments/798210272027869245/810131239792934912/25.png',
 		/*Ohm*/     
 'https://cdn.discordapp.com/attachments/798210272027869245/810119446206873610/work3.png',
      /*Ultra*/
 'https://cdn.discordapp.com/attachments/798210272027869245/810138246263996416/16_1.png',
      /*Pleum*/
                   ]
    var charJaes = [
          'https://cdn.discordapp.com/attachments/798210272027869245/809778778469302302/16.png',
      /*P'Jabont*/
      	 'https://cdn.discordapp.com/attachments/798210272027869245/809842861406158858/22.png',
      /*P'Getty*/
      	 'https://cdn.discordapp.com/attachments/798210272027869245/809845528589893682/117.png',
      /*Bank*/
          'https://cdn.discordapp.com/attachments/798210272027869245/809797770130227200/17.png',
      /*Ger*/
      	 'https://cdn.discordapp.com/attachments/798210272027869245/809843604331823184/marker.png',
      /*Mark*/
          'https://cdn.discordapp.com/attachments/798210272027869245/809809388868599808/jpix.png',
      /*Modem*/
          'https://cdn.discordapp.com/attachments/798210272027869245/809859424985415680/16.1.png',
      /*Nik*/
      	 'https://cdn.discordapp.com/attachments/798210272027869245/810117903570698250/24.png',
      /*Ohm*/
			 'https://cdn.discordapp.com/attachments/798210272027869245/809868307200344074/23.png',
      /*Ultra*/
          'https://cdn.discordapp.com/attachments/798210272027869245/809829477051531274/16_1.png',
      /*Pleum*/
];
    
    names = [
      "P'Jabont",
      "P'Getty",
      "Bank",
      "Ger",
      "Mark",
      "Modem",
      "Nik",
      "Ohm",
      "Ultra",
      "Pleum",
    ]
    
    let activeIndex = 0;
    let spritesheetElements = "";
	let navigationElements = "";
    let jaeEl = "";
    let nameChar = "";
    
    names.forEach((name, index)=> {
	   nameChar += `<input type="text" value="${name}" class="name index-${index}" readonly/>`
    });
    
    charJaes.forEach((charjae, jael)=>{
	   jaeEl += `<img src="${charjae}" class="huadoo index-${jael}"/>`

});
    
    spritesheets.forEach((spritesheet, index) => {
	spritesheetElements += `<img src="${spritesheet}" class="spriteSheet index-${index}" onclick="jae(${index})" 
   />`
     navigationElements += `<button class="Nav index-${index}" onclick='setActive(${index})' />`
  });
	characterElement.insertAdjacentHTML( 'beforeend', spritesheetElements );
	document.querySelector(".head").insertAdjacentHTML( 'beforeend', jaeEl );
	document.querySelector(".nameC").insertAdjacentHTML( 'beforeend', nameChar );
	document.querySelector(".NavS").insertAdjacentHTML( 'beforeend', navigationElements );

function setActive(index) {
     activeIndex = index;
     document.querySelectorAll(`.active`).forEach(node => {
        node.classList.remove("active")
     })
     document.querySelectorAll(`.spriteSheet.index-${index}`).forEach(node => {
        node.classList.add("active")
     })
    document.querySelectorAll(`.Nav.index-${index}`).forEach(node => {
        node.classList.add("active")
     })
     document.querySelectorAll(`.name.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)
  }
  function jae(index){

document.querySelectorAll(`.spriteSheet.index-${index}`).forEach(node => {
        node.classList.remove("active")
     })
    
	 document.querySelectorAll(`.huadoo.index-${index}`).forEach(node => {
        node.classList.add("active")
     })
    setTimeout(()=>{
		document.querySelectorAll(".huadoo.active").forEach(node=>{node.classList.remove('active');})
      
      document.querySelectorAll(`.spriteSheet.index-${index}`).forEach(node => {
        node.classList.add("active")})
    }, 500)
  }
    setActive(activeIndex);
  </script>
</body>