Animation Image Slider using HTML, Css and JavaScript

3D Animation Image Slider

Table of Contents

Introduction

Today we are going to create an animated image gallery with the use of HTML, CSS, and JavaScript. In this image gallery, images will come one by one through animation, and the second image will be hidden just behind the first image. You can use it to decorate your favorite memories in this image gallery, or you can practice after learning this tutorial and then add it to your project.

Let’s start making an animated image gallery by doing simple code step by step to explain it properly. This is for every developer, whether a fresher or an experienced guy.

HTML

First, we will create the structure of this gallery using HTML. In this, we will make a parent div in which all the images will be stored, and then we will make sub-divs for the images in which all images will be stored in img tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script>
    <title>LayakCoder</title>
</head>
<body>
    <div class="img-container">
        <div class="box">
          <img
            src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=740&t=st=1692617800~exp=1692618400~hmac=da967fd7227c9ad38cd8a070b995acb5f4bb6c2185c6a20bd2e90c60e2abf6ab"
            alt=""
          />
        </div>
        <div class="box">
          <img
            src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=740&t=st=1692617800~exp=1692618400~hmac=da967fd7227c9ad38cd8a070b995acb5f4bb6c2185c6a20bd2e90c60e2abf6ab"
            alt=""
          />
        </div>
        <div class="box">
          <img
            src="https://img.freepik.com/free-photo/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg?w=740&t=st=1692619142~exp=1692619742~hmac=cbfd96c2635889371b9d74ff41432f9944fadfef177e121f43cf9f2f94b2fd6a"
            alt=""
          />
        </div>
        <div class="box">
          <img
            src="https://img.freepik.com/free-photo/seljalandsfoss-waterfall-during-sunset-beautiful-waterfall-iceland_335224-596.jpg?w=740&t=st=1692619874~exp=1692620474~hmac=c48ffd5f0d2418bb4600d98ac64f3f61a0ed9e2090751ac7fa32bff35687ee17"
            alt=""
          />
        </div>
        <div class="box">
          <img
            src="https://img.freepik.com/free-photo/landscape-morning-fog-mountains-with-hot-air-balloons-sunrise_335224-794.jpg?w=740&t=st=1692619958~exp=1692620558~hmac=d2e0e7c3c55857d0bb617b4b5b4deb0c7c67c6677c1eaa8b4c73d50445ece5bf"
            alt=""
          />
        </div>
        <div class="box">
          <img
            src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=740&t=st=1692617800~exp=1692618400~hmac=da967fd7227c9ad38cd8a070b995acb5f4bb6c2185c6a20bd2e90c60e2abf6ab"
            alt=""
          />
        </div>
      </div>
</body>
</html>

CSS

After making the structure of the image gallery, we will now design it and  make it responsive with the help of CSS (an external stylesheet attached to the HTML file). In CSS, we will first make the background dark, then give styling to the image divs. We will adjust the size and position of the parent div and then also the images div. The Nth-child property has been used here to design the appearance of individual image divs with animation. Z-index is been used to put the one image over another. At the end, we will responsive this gallery to all devices.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
  }
  
  body {
    height: 100vh;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .img-container {
    position: relative;
    height: 500px;
    width: 700px;
    perspective: 500px;
    transform-style: preserve-3d;
  }
  .box {
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    width: 600px;
    height: 440px;
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #bbb;
    position: absolute;
    top: 50%;
    transition: 800ms ease-in-out;
  }
  
  .box img {
    width: 100%;
    height: 100%;
  }
  
  .box:first-of-type {
    z-index: 5;
    opacity: 0;
    left: 15%;
    transform: translate(-50%, -50%) rotateY(-10deg);
  }
  
  .box:nth-of-type(2) {
    opacity: 1;
    left: 20%;
    transform: translate(-50%, -50%) rotateY(-10deg);
    z-index: 5;
  
  }
  .box:nth-of-type(3) {
    left: 25%;
    opacity: 0.75;
    color: #eee;
    z-index: 10;
    transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-50px);
  }
  
  .box:nth-of-type(4) {
    z-index: 5;
    opacity: 0.5;
    left:30%;
    transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-100px);
  }
  .box:nth-of-type(5) {
    z-index: 2;
    opacity: 0.25;
    left: 35%;
    transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-150px);
  }
  
  .box:nth-of-type(6) {
    z-index: 2;
    opacity: 0.0;
    left: 40%;
    transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px);
  }
  

Javascript

After making the gallery of images, it’s time to make it animated with the use of javaScript. In this, we will first target the images div by classes in QuerySelector properties, and then we will use a time interval to make the images come slide by slide with some time delay. The image that appears will disappear after some time, and then the loop will be continued.

<script>
    let imgContainer = document.querySelector(".img-container");
 
    setInterval(() => {
            let last = imgContainer.firstElementChild;
            last.remove();
            imgContainer.appendChild(last);
          }, 1500);
</script>

Finally, we made the animated image gallery with the help of HTML, CSS, and JavaScript by following the simple steps one by one. If you want the source code, then click on the button given below.

For more explanation, please click on the link given below to watch the video.

Press the download button to download the source code

2 KB

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links