Homework grop A P’Getty

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

.Character {
	width: calc(var(--pixel-size) * 32px);
	height: calc(var(--pixel-size) * 32px);
	overflow: hidden;
	position: relative;
	margin: calc(var(--pixel-size) * 6px) auto;
}
.Character_shadow {
	width: calc(var(--pixel-size) * 32px);
	height: calc(var(--pixel-size) * 32px);
	opacity: 0.25;
	position: absolute;
}

@keyframes walkAnimation {
  from {
    transform: translate3d(0%,0%,0);
  }
  to {
    transform: translate3d(-100%,0%,0);
  }
}

.Character_sprite-sheet {
	width: calc(var(--pixel-size) * 128px);
	animation: walkAnimation 0.6s steps(4) infinite; 
   
	position: absolute;
	top:0;
	left:0;
   
	display: none;
}
.Character_sprite-sheet.active {
	display: block;
}

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	background-image: linear-gradient(180deg, #5DCBE4 0%, #47BCE4 100%);
	height: 100%;
   min-height: 100vh;
	padding-top: calc(var(--pixel-size) * 18px);
	font-family: 'Dosis', sans-serif;
}
.Container {
	max-width: calc(var(--pixel-size) * 100px);
	margin: 0 auto;
}
.TitleImage {
	width: calc(var(--pixel-size) * 95px);
	display: block;
	margin: 0 auto;
}
.NavigationBubble {
	-webkit-appearance: none;
	width: calc(var(--pixel-size) * 3px);
	height: calc(var(--pixel-size) * 3px);
	background: #2497cc;
	border: 0;
	outline: 0;
	cursor: pointer;
	padding:0;
	margin-left: 0.5em;
	margin-right: 0.5em;
	box-sizing:content-box;
}
.NavigationBubble:hover:not(.active) {
	opacity: 0.9;
}
.NavigationBubble.active {
	background: #fff;
}
.NextSpritesheetButton {
	-webkit-appearance: none;
	border:0;
	background:none;
	padding: 1em;
	position: absolute;
	top: 50%;
}
.NextSpritesheetButton--prev {
	left: 0;
}
.NextSpritesheetButton--next {
	right: 0;
}
.NextSpritesheetButton:hover {
	cursor: pointer;
	background: rgba(255,255,255,0.2);
}
.NextSpritesheetButton:focus {
	outline:none;
}
.NextSpritesheetButton svg {
	display: block;
	width: calc(var(--pixel-size) * 4px);
}
.DirectionArrow {
	background: none;
	outline: 0;
	border: 0;
	cursor: pointer;
}

.flex-center {
	display:flex;
	justify-content: center;
}

footer {
   margin-top: calc(var(--pixel-size) * 20px);
}
@media (min-height: 515px) {
   footer {
      position: absolute;
      left:0;
      right:0;
      bottom:0;
   }
}
footer p {
	color: #fff;
	text-align: center;
	padding: 0.8em;
	font-size: 18px;
   margin: 0;
   border-top: 1px solid rgba(255,255,255,0.4)
}
footer a {
	font-weight:bold;
	font-size: 18px;
	color: #164496;
}
</style>
<body>
   <main class="Container">
        <img class="TitleImage PixelArtImage" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-WalkingSprites.png" alt="Walking Demo Sprites" />
        <div class="SpritesheetSlider">
           
           
            
            <div class="Character Character--walk-down">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-Shadow.png" class="Character_shadow PixelArtImage" />
                
            </div>
          
            <div class="Navigation flex-center">
                
            </div>
            <button class="NextSpritesheetButton NextSpritesheetButton--prev" onclick="setPreviousActive()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 4 7" shape-rendering="crispEdges">
                    <metadata>Made with Pixels to Svg https://codepen.io/shshaw/pen/XbxvNj</metadata>
                    <path stroke="#434343" d="M3 0h1M2 1h1M1 2h1M0 3h1M1 4h1M2 5h1M3 6h1" />
                </svg>
            </button>
            <button class="NextSpritesheetButton NextSpritesheetButton--next" onclick="setNextActive()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 4 7" shape-rendering="crispEdges">
                    <metadata>Made with Pixels to Svg https://codepen.io/shshaw/pen/XbxvNj</metadata>
                    <path stroke="#434343" d="M0 0h1M1 1h1M2 2h1M3 3h1M2 4h1M1 5h1M0 6h1" />
                </svg>
            </button>
        </div>
    </main>
</body>
<script>
  
//This stuff just makes the demo's UI work. ---------------
var characterElement = document.querySelector(".Character");

var spritesheets = [
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-HANK-2-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-EMMY-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-SHIRMOND-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-SARA-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-PATTY-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-JESSIE-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-KIM-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-MINDY-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-ZAK-SHEET.png",
   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/WalkingDemo-BEAR-SHEET.png",
];

let activeIndex = 0;
let spritesheetElements = "";
let navigationElements = "";

spritesheets.forEach((spritesheet, index) => {
	spritesheetElements += `<img src="${spritesheet}" class="PixelArtImage Character_sprite-sheet index-${index}" />`
	navigationElements += `<button class="NavigationBubble index-${index}" onclick='setActive(${index})' />`
});
characterElement.insertAdjacentHTML( 'beforeend', spritesheetElements );

document.querySelector(".Navigation").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 setDirection(direction) {
	[
		"Character--walk-down"
	].forEach(className => {
		characterElement.classList.remove(className)
	})

document.querySelector(".DirectionArrow--active").classList.remove("DirectionArrow--active")

var directionClass = "Character--walk-down";
	if (direction === "DOWN") {
		document.querySelector(".DirectionArrow-down").classList.add("DirectionArrow--active")
	}

characterElement.classList.add(directionClass)
}

function setPreviousActive() {
	activeIndex = activeIndex > 0 ? activeIndex - 1 : spritesheets.length - 1;
	setActive(activeIndex)
}

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

//Kick it off!
setActive(activeIndex);
</script>