Create Infinity GAUNTLETS! CSS3 Animation step by step

NOW I WILL SHOW YOU HOW CAN CREATE AMAZING THANOS INFINITY GAUNTLETS !WITH THE HELP OF HTML ,CSS3 and JS THE FAMOUS AMERICAN FILM  In Avengers Endgame  THANOS  INFINITY GAUNTLET USE .

 Steps are given below how to create THANOS INFINITY GAUNTLET. CSS3 Animation 

STEP1 

 HTML CODE

     
 <div class="container d-flex align-items-center justify-content-center">

  <div id="demo" class="jumbotron d-flex flex-column align-items-center justify-content-around bg-dark">
    <div>
      <h1 class="text-center text-white">Click the Infinity Gauntlets!</h1>
    </div>
    <div class="d-flex w-50 align-items-center justify-content-around">
      <div>
        <h4 class="text-center text-danger">Snap!</h4>
        <div id="snap" class="border-custom" onclick="animateScript(event)">
          <audio class="igSound" src="https://www.google.com/logos/fnbx/thanos/thanos_snap_sound.mp3"></audio>
        </div>
      </div>
      <div>
        <h4 class="text-center text-green">Time!</h4>
      <div id="time" class="border-custom" onclick="animateScript(event)">
        <audio class="igSound" src="https://www.google.com/logos/fnbx/thanos/thanos_reverse_sound.mp3"></audio>
      </div>
      </div>
    </div<div class="container d-flex align-items-center justify-content-center">
  <div id="demo" class="jumbotron d-flex flex-column align-items-center justify-content-around bg-dark">
    <div>
      <h1 class="text-center text-white">Click the Infinity Gauntlets!</h1>
    </div>
    <div class="d-flex w-50 align-items-center justify-content-around">
      <div>
        <h4 class="text-center text-danger">Snap!</h4>
        <div id="snap" class="border-custom" onclick="animateScript(event)">
          <audio class="igSound" src="https://www.google.com/logos/fnbx/thanos/thanos_snap_sound.mp3"></audio>
        </div>
      </div>
      <div>
        <h4 class="text-center text-green">Time!</h4>
      <div id="time" class="border-custom" onclick="animateScript(event)">
        <audio class="igSound" src="https://www.google.com/logos/fnbx/thanos/thanos_reverse_sound.mp3"></audio>
      </div>
      </div>
    </div>
  </div>
</div>>
  </div>

</div>

STEP 2  
CSS 3CODE

body {
  background-color: #BADA55;
}

.container {
  height: 100vh;
}

#snap {
  height: 80px;
  width: 80px;
background:
url('https://www.google.com/logos/fnjgbx/thanos/thanos_snap.png') 0px 0px;
}

#time {
  height: 80px;
  width: 80px;
background:
url('https://www.google.com/logos/fnbx/thanos/thanos_time.png') 0px 0px;
}

.text-green {
  color: #BADA55;
}

.border-custom {
  border: solid #c3c3c3 1px;

}

Snap.png

Time.png

STEP 3

JS CODE

var tID = {
  snap: null,
  time: null
}; //we will use this variable to clear the setInterval()

function animateScript(e) {
const audio = e.target.querySelector('audio');
 
//Reset every click
clearInterval(tID[e.target.id]); //reset animation
audio.currentTime = 0; //reset sound
 
//INITIALIZE
const startPosition = 0;
var    position = startPosition; //start position for the image slicer
// const  interval = 50; //100 ms of interval for the setInterval()
const fullImgWidth = 3840;
const  diff = 80;     //diff as a variable for position offset
const  interval = 50; //100 ms of interval for the setInterval() Animation
 
audio.play();
tID[e.target.id] = setInterval ( () => {
e.target.style.backgroundPosition =
`-${position}px 0px`;
//we use the ES6 template literal to insert the variable "position"
if (position < fullImgWidth)
{ position = position + diff;}
//we increment the position by 256 each time
else
{
  position = startPosition;
  clearInterval(tID[e.target.id]);
}
//reset the position to 256px, once position exceeds 1536px
}
, interval ); //end of setInterval
} //end of animateScript()

• Tweet
• Share
• Share
• Share
• Share