Animation that slides in from the left using CSS styling

Question

Animation that slides in from the left using CSS styling

My current project involves creating a slideshow, and while it is mostly working fine, I am facing an issue with the animations. The animation for sliding out works perfectly, but the animation for sliding in from the left doesn't seem to be functioning as expected. Even though it is initially set at -100%, the left margin gets stuck at 0% without any animation.

Javascript:

var images = [
    'http://i.imgur.com/ByyUANz.png',
    'http://i.imgur.com/S5FfOOB.png',
    'http://i.imgur.com/EuefPdv.png',
    'http://i.imgur.com/Ucvm4pJ.png',
    'http://i.imgur.com/pK5WBHN.png',
    'http://i.imgur.com/nuOLVpy.png'
]

function slideShow(startAt){
    var holder = document.getElementById("currentImage");
    var img = document.createElement("img");
    img.src = images[startAt];
    holder.appendChild(img);
    nextPicture(startAt, img);
}

function nextPicture(current, currentElement){

    var holder = document.getElementById("currentImage");
    setTimeout(function(){
        currentElement.className = "translateLeft";
        current += 1;
        var img = document.createElement("img");
        img.src = images[current];
        img.style.marginLeft = "-100%";

        holder.appendChild(img);
        img.className = "translateIn";

        if (current == 5){
            current = -1;
            nextPicture(current, img);
        } else {
            nextPicture(current, img);
        }

    }, 5000)

}

slideShow(0);

CSS:

.translateLeft {  
    transition: 3s;
    margin-left: 100% !important;
}

.translateIn {

    transition: 3s;
    margin-left: 0% !important;
}

javascript css

Answer 1

Answer №1

Check out this amazing solution that I found for you! Click here

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body,
        img {
            position: absolute;
            top:0;
            left: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        #currentImage {
            height: 100%;
            width: 1920px;
        }
        .translateOrigin {
            transition: none;
            transform: translate3d(-100%, 0, 0) !important;
        }

        .translateLeft {
            transition: transform 3s;
            transform: translate3d(100%, 0, 0) !important;
        }

        .translateIn {
            transition: transform 3s;
            transform: translate3d(0, 0, 0) !important;
        }
    </style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
    var images = [
        'http://i.imgur.com/ByyUANz.png',
        'http://i.imgur.com/S5FfOOB.png',
        'http://i.imgur.com/EuefPdv.png',
        'http://i.imgur.com/Ucvm4pJ.png',
        'http://i.imgur.com/pK5WBHN.png',
        'http://i.imgur.com/nuOLVpy.png'
    ];
    var imageEle = [];
    var currImage = 0;
    var holder = document.getElementById("currentImage");

    function imagesPreload() {
        for (var i = 0; i < images.length; i++) {
            var img = new Image();
            img.src = images[i];
            img.className = "translateOrigin";
            holder.appendChild(img);
            imageEle.push(img);
        }
    }

    imagesPreload();

    document.onkeydown = function(event){
        if(event.keyCode === 13) {
            nextPicture();
        }
    };

    function slideShow(startAt) {
        var holder = document.getElementById("currentImage");
        imageEle[currImage].className = "translateIn";
        nextPicture();
    }

    function nextPicture() {
        setTimeout(function () {
            var img = imageEle[currImage];
            img.addEventListener("transitionend", transitionEnd, false);
            img.className = "translateLeft";

            if (currImage == 5) {
                currImage = 0;
            } else {
                currImage++;
            }
            imageEle[currImage].className = "translateIn";

            /* Reset the image to original position */
            function transitionEnd() {
                img.className = "translateOrigin";
                img.removeEventListener("transitionend", transitionEnd, false);
                nextPicture();
            }
        }, 5000)
    }
    slideShow(currImage);

</script>
</body>
</html>

Answer 2

Check out this amazing solution that I found for you! Click here

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body,
        img {
            position: absolute;
            top:0;
            left: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        #currentImage {
            height: 100%;
            width: 1920px;
        }
        .translateOrigin {
            transition: none;
            transform: translate3d(-100%, 0, 0) !important;
        }

        .translateLeft {
            transition: transform 3s;
            transform: translate3d(100%, 0, 0) !important;
        }

        .translateIn {
            transition: transform 3s;
            transform: translate3d(0, 0, 0) !important;
        }
    </style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
    var images = [
        'http://i.imgur.com/ByyUANz.png',
        'http://i.imgur.com/S5FfOOB.png',
        'http://i.imgur.com/EuefPdv.png',
        'http://i.imgur.com/Ucvm4pJ.png',
        'http://i.imgur.com/pK5WBHN.png',
        'http://i.imgur.com/nuOLVpy.png'
    ];
    var imageEle = [];
    var currImage = 0;
    var holder = document.getElementById("currentImage");

    function imagesPreload() {
        for (var i = 0; i < images.length; i++) {
            var img = new Image();
            img.src = images[i];
            img.className = "translateOrigin";
            holder.appendChild(img);
            imageEle.push(img);
        }
    }

    imagesPreload();

    document.onkeydown = function(event){
        if(event.keyCode === 13) {
            nextPicture();
        }
    };

    function slideShow(startAt) {
        var holder = document.getElementById("currentImage");
        imageEle[currImage].className = "translateIn";
        nextPicture();
    }

    function nextPicture() {
        setTimeout(function () {
            var img = imageEle[currImage];
            img.addEventListener("transitionend", transitionEnd, false);
            img.className = "translateLeft";

            if (currImage == 5) {
                currImage = 0;
            } else {
                currImage++;
            }
            imageEle[currImage].className = "translateIn";

            /* Reset the image to original position */
            function transitionEnd() {
                img.className = "translateOrigin";
                img.removeEventListener("transitionend", transitionEnd, false);
                nextPicture();
            }
        }, 5000)
    }
    slideShow(currImage);

</script>
</body>
</html>

Answer 3

Answer №2

If you want to create a stunning slideshow, my recommendation is to utilize the CSS transform property instead of relying on margin. The concept involves creating a placeholder element called currentImage with a position of relative, and then placing all images inside it with their position set to absolute. By default, all images will be translated outside of the placeholder element, and by adding or removing classes such as show and hide, you can control their visibility within the slideshow.

let images = [
  'http://i.imgur.com/ByyUANz.png',
  'http://i.imgur.com/S5FfOOB.png',
  'http://i.imgur.com/EuefPdv.png',
  'http://i.imgur.com/Ucvm4pJ.png',
  'http://i.imgur.com/pK5WBHN.png',
  'http://i.imgur.com/nuOLVpy.png'
];

// Select the holder
let holder = document.getElementById("currentImage");

// Create the image elements
images.forEach(function(url) {
  let img = document.createElement("img");
  img.src = url;
  holder.appendChild(img);
});

// Image counter
let counter = 0;

// Set interval for the slideshow
let slideshow = setInterval(function() {
  // Stop the slideshow when reaching the end of images
  if(counter === images.length) {
    clearInterval(slideshow);
    return;
  }
  
  // Get all images
  let nodes = holder.getElementsByTagName("img");
  
  // Hide previous image
  if(nodes[counter - 1]) {
  nodes[counter - 1].className = "hide";
  }
  // Show next image
  nodes[counter].className = "show";
  
  counter++;
}, 2500);

#currentImage {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#currentImage img {
  width: 100%;
  position: absolute;
  transform: translateX(-110%);
  -webkit-transition: -webkit-transform 1.0s ease 0s;
  -moz-transition: -moz-transform 1.0s ease 0s;
  -o-transition: -o-transform 1.0s ease 0s;
  transition: transform 1.0s ease 0s;
}

#currentImage img.show {
  transform: translateX(0%);
}

#currentImage img.hide {
  transform: translateX(110%);
}

<div id="currentImage">
</div>

Answer 4

If you want to create a stunning slideshow, my recommendation is to utilize the CSS transform property instead of relying on margin. The concept involves creating a placeholder element called currentImage with a position of relative, and then placing all images inside it with their position set to absolute. By default, all images will be translated outside of the placeholder element, and by adding or removing classes such as show and hide, you can control their visibility within the slideshow.

let images = [
  'http://i.imgur.com/ByyUANz.png',
  'http://i.imgur.com/S5FfOOB.png',
  'http://i.imgur.com/EuefPdv.png',
  'http://i.imgur.com/Ucvm4pJ.png',
  'http://i.imgur.com/pK5WBHN.png',
  'http://i.imgur.com/nuOLVpy.png'
];

// Select the holder
let holder = document.getElementById("currentImage");

// Create the image elements
images.forEach(function(url) {
  let img = document.createElement("img");
  img.src = url;
  holder.appendChild(img);
});

// Image counter
let counter = 0;

// Set interval for the slideshow
let slideshow = setInterval(function() {
  // Stop the slideshow when reaching the end of images
  if(counter === images.length) {
    clearInterval(slideshow);
    return;
  }
  
  // Get all images
  let nodes = holder.getElementsByTagName("img");
  
  // Hide previous image
  if(nodes[counter - 1]) {
  nodes[counter - 1].className = "hide";
  }
  // Show next image
  nodes[counter].className = "show";
  
  counter++;
}, 2500);

#currentImage {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#currentImage img {
  width: 100%;
  position: absolute;
  transform: translateX(-110%);
  -webkit-transition: -webkit-transform 1.0s ease 0s;
  -moz-transition: -moz-transform 1.0s ease 0s;
  -o-transition: -o-transform 1.0s ease 0s;
  transition: transform 1.0s ease 0s;
}

#currentImage img.show {
  transform: translateX(0%);
}

#currentImage img.hide {
  transform: translateX(110%);
}

<div id="currentImage">
</div>

Answer 5

Answer №3

If you're looking to implement something similar, consider the following code:

// HTML
<div id="currentImage">
  <div class="window">
    <div class="image-list">
      <div>
        <img src="http://i.imgur.com/ByyUANz.png" />
      </div>
      <div>
        <img src="http://i.imgur.com/S5FfOOB.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/EuefPdv.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/Ucvm4pJ.png" />
      </div>

      <div>
         <img src="http://i.imgur.com/pK5WBHN.png" />
       </div>

      <div>
        <img src="http://i.imgur.com/nuOLVpy.png" />
      </div>

    </div>
  </div>
</div>

You can also add some CSS styling:

// CSS
img {
  height: 50px;
  width: 50px;
}

.window {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 2px solid red;
  overflow: hidden;
}
div {
  display: inline-block;
}
.image-list {
  list-style-type: none;
  display: inline-block;
  padding-left: 0px;
  margin: 0px;
  width: 350px;
  animation: slidingli 30s; 
}

@keyframes slidingli {
  0% {
    transform: translateX(0px);
  }

  16% {
    transform: translateX(-50px);
  }

  32% {
    transform: translateX(-100px);
  }

  48% {
    transform: translateX(-150px);
  }

  64% {
    transform: translateX(-200px);
  }

  80% {
    transform: translateX(-250px);
  }

  100% {
    transform: translateX(-300px);
  }
}

Feel free to explore the provided JSFiddle link for a live demo. Additionally, there are numerous libraries available that offer similar functionalities such as Fotorama.

Answer 6

If you're looking to implement something similar, consider the following code:

// HTML
<div id="currentImage">
  <div class="window">
    <div class="image-list">
      <div>
        <img src="http://i.imgur.com/ByyUANz.png" />
      </div>
      <div>
        <img src="http://i.imgur.com/S5FfOOB.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/EuefPdv.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/Ucvm4pJ.png" />
      </div>

      <div>
         <img src="http://i.imgur.com/pK5WBHN.png" />
       </div>

      <div>
        <img src="http://i.imgur.com/nuOLVpy.png" />
      </div>

    </div>
  </div>
</div>

You can also add some CSS styling:

// CSS
img {
  height: 50px;
  width: 50px;
}

.window {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 2px solid red;
  overflow: hidden;
}
div {
  display: inline-block;
}
.image-list {
  list-style-type: none;
  display: inline-block;
  padding-left: 0px;
  margin: 0px;
  width: 350px;
  animation: slidingli 30s; 
}

@keyframes slidingli {
  0% {
    transform: translateX(0px);
  }

  16% {
    transform: translateX(-50px);
  }

  32% {
    transform: translateX(-100px);
  }

  48% {
    transform: translateX(-150px);
  }

  64% {
    transform: translateX(-200px);
  }

  80% {
    transform: translateX(-250px);
  }

  100% {
    transform: translateX(-300px);
  }
}

Feel free to explore the provided JSFiddle link for a live demo. Additionally, there are numerous libraries available that offer similar functionalities such as Fotorama.

Animation that slides in from the left using CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

Enrollment of Vue components

What is the best way to shade the background when a hyperlink is pressed?

Retrieving a single item from an array of objects with the help of body parser

Utilize JavaScript to enclose every piece of text within single quotes in a span element

Generate a new core element featuring the top 10 users

A guide on using key arrows in JavaScript to navigate and focus on elements

Is there a way to incorporate the image that was uploaded from the server onto an HTML page without using the file extension?

Guide on transferring JavaScript Objects from the Front End to Spring Boot Back-end and effectively processing and parsing them

`A brief disruption in loading the visual style of Google Maps`

Buefy: Secure the header of the table in place while allowing the rows to scroll freely

Incorporating additional value attributes without replacing the existing ones

PHP code for displaying images on the same level

Complete the missing elements of a CSS grid layout

impact on the shape of the region's map

Display the array in the Vue view section without using curly braces

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

How can HTML text be displayed based on certain JavaScript conditions?

The paragraph text should dynamically update upon clicking a button based on JavaScript code, however, the text remains unchanged despite attempts to modify it

Disrupting a Program Operation

Floating CSS drop menu with added bottom margin