Javascript slider

by kairavthakar2016

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="contenedor">
  
  <div class="elem" id="elem-0">1</div>
  <div class="elem" id="elem-1">2</div>
  <div class="elem" id="elem-2">3</div>
  <div class="elem" id="elem-3">4</div>
  <div class="elem" id="elem-4">5</div>
  <div class="elem" id="elem-5">6</div>
  <div class="elem" id="elem-6">7</div>
  <div class="elem" id="elem-7">8</div>


</div>



<script src="/scripts.js"></script>
</body>
</html>

CSS

body{
  padding: 5rem ;
 }
.elem{
  width: 100px;
  height: 100px;
}
#elem-1{
   background-color: aqua;
}
#elem-2{
  background-color: red;
}
#elem-3{
  background-color: green;
}
#elem-4{
  background-color: blue;
}
#elem-5{
  background-color: violet;
}
#elem-6{
  background-color: yellowgreen;
}
#elem-7{
  background-color: gray;
}
#elem-0{
  background-color: fuchsia;
}
.contenedor{
  width: 400px;
  height: 200px;
  /* display: grid;
  grid-template-columns: repeat(4,1fr); */

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.move-right{
  animation-duration: 4s;
  animation-name: moving-x-right;
  animation-fill-mode: forwards;
}
.move-left{
  animation-duration: 4s;
  animation-name: moving-x-left;
  animation-fill-mode: forwards;
}

.move-down{
  animation-duration: 2s;
  animation-name: moving-y-down;
  animation-fill-mode: forwards;
}

.move-up{
  animation-duration: 2s;
  animation-name: moving-y-up;
  animation-fill-mode: forwards;
}

@keyframes moving-x-right {
  from {
    
   
     
  }

  to {
      transform: translateX(100px);

  }
}
@keyframes moving-x-left {
  from {
    
   
     
  }

  to {
      transform: translateX(-100px);

  }
}
@keyframes moving-y-up {
  from {
    
   
     
  }

  to {
      transform: translateY(-100px);

  }
}
@keyframes moving-y-down {
  from {
    
   
     
  }

  to {
      transform: translateY(100px);

  }
}

JavaScript

window.onload = moveGridElement

function moveGridElement() {
    const elem1 = document.querySelector("#elem-0")
    const elem2 = document.querySelector("#elem-1")
    const elem3 = document.querySelector("#elem-2")
    const elem4 = document.querySelector("#elem-3")
    const elem5 = document.querySelector("#elem-4")
    const elem6 = document.querySelector("#elem-5")
    const elem7 = document.querySelector("#elem-6")
    const elem8 = document.querySelector("#elem-7")
    
    elem1.classList.add("move-right")
    elem2.classList.add("move-left")
    setTimeout(() => {
        elem4.classList.add("move-down")
        elem8.classList.add("move-up")
    }, 1000);
    setTimeout(() => {
        elem1.classList.add("move-down")
        elem6.classList.add("move-up")
    }, 3000);