<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Creeper animation</title>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/minecraftia" type="text/css"/>
</head>
<body>

  <div class="splashscreen">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFTUVQ452PGH7eSjgy_7yhKj65YmAZC_HrUoH3VCvZVO5EywphrQ" />  
  </div>

<div id="creeper">
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/face.png?raw=true" class="side front" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side back" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side top" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side bottom" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side left" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side right" />
</div>
 <div id="minecraft-quote"></div>
/body>
</html>
:root {
    --size-creeper: 128px;
}

body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#creeper {
    width: var(--size-creeper);
    height: var(--size-creeper);
    transform-style: preserve-3d;
    z-index: 500;
}

.side {
    position: absolute;
    width: var(--size-creeper);
    height: var(--size-creeper);
}

.front  { transform:                  translateZ(calc(var(--size-creeper) / 2)); }
.top    { transform: rotateX( 90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.right  { transform: rotateY( 90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.left   { transform: rotateY(-90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.bottom { transform: rotateX(-90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.back   { transform: rotateY(-180deg) translateZ(calc(var(--size-creeper) / 2)); }

@keyframes rotate {
  50% { transform: rotateY(90deg) rotateX(90deg) scale3d(.5, .5, .5) }
  100% { transform: rotateY(180deg) rotateX(180deg) }
}

#minecraft-quote {
  position: absolute;
  color: yellow;
  right: 15%;
  bottom: 15%;
  font-family: "MinecraftiaRegular";
  font-size: 100%;
  transform: rotate(-20deg);
  transform-origin: top center;
  animation: subtitle .25s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.splashscreen {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 100vh;
  object-fit: cover;  
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.splashscreen img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
  filter: blur(8px);
}

.splashscreen:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  filter: blur(100px);
}


@keyframes subtitle {
  0% {
    transform: scale(0.875) rotate(-20deg);
  }
  100% {
    transform: scale(1) rotate(-20deg);
  }
}


const quotes = [
  'Its groundbreaking!', 
  'Undfeated!', 
  'Woo, tigsource!', 
  'Bees, bees, bees, bees!', 
  'Hobo humping slobo babe!', 
  'Minecraft!', 
  'Hotter than the sun!', 
  'Casual gaming!',
  'Dungeon!',
  'Also try terraria!',
  'Indie!',
  'Best in Class!',
  'Don`\'t bother with the clones!',
  'Ryan also has amazing hair!',
  'Joe is neat!',
  'Indev!',
  'Everybody loves dev.to'
]

const showRandomQuote = (element) => {
  const num = Math.floor(Math.random() * quotes.length);
  element.innerHTML = quotes[num];
}




const followCursor = (element, options = {}) => {
  options = Object.assign({}, {
    maxAngleX: 12,
    maxAngleY: 12,
  }, options)
  const elementRect = element.getBoundingClientRect()
  const originX = elementRect.left + elementRect.width / 2
  const originY = elementRect.top + elementRect.height / 2
  const map = (value, low1, high1, low2, high2) => low2 + (high2 - low2) * (value - low1) / (high1 - low1)
  const handle = e => {
    try {
      const width = document.body.clientWidth
      const height = document.body.clientHeight
      const clientX = e.clientX || e.touches[0].clientX
      const clientY = e.clientY || e.touches[0].clientY
      const decY = map(clientY - originY, -height / 2, height / 2 , -options.maxAngleY, options.maxAngleY)
      const decX = map(clientX - originX, -width / 2, width / 2 , -options.maxAngleX, options.maxAngleX)
      element.style.transform = `rotateX(${-decY}deg) rotateY(${decX}deg)`
    } catch(e) {}
  }
  document.body.addEventListener('mousemove', handle)
  document.body.addEventListener("touchmove", handle, false)
}
  
  
document.addEventListener('DOMContentLoaded', _ => {
  followCursor(document.querySelector('#creeper'))
  showRandomQuote(document.querySelector('#minecraft-quote'))
})
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.