Image Animation / How to make image slide in when page is loaded? (HTML/JAVASCRIPT)

user_12224214 0
Viewed 1308

I have no Javascript experience and I've been so overwhelmed reading through so many posts. Your help is seriously appreciated.

I'm trying to make my page's image "slide-in" slowly to its eventual position: from the (invisible) left to the center, when the page is clicked.

I've tried searching for this but most of the things that pop up are "how to make a javascript slide show."

The question would also be "how do I make a div slide in from one position to the next?" (since the image will be inside a div.

I'm guessing it would occur onWindowLoad().

Again, thank you so much for your help. This community is wonderful.

animation css image html javascript
3 Answers

I know you're asking regarding JS but here's a thought. You can do that in CSS as well with animations. Take a look:

Apply this to the container:

animation: slideInFromRight 1s ease-in;

This needs to go separate:

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}
user_143871430

we want three files to do that

  1. index.html
  2. style.css
  3. script.js

So we want to combine all those three together to get the final output.

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Slideshow example</title>
  <link rel="stylesheet" href="./style.css"> <!-- load style.js // consider both files in same folder -->

</head>
<body>

<div id="slideshow-example" data-component="slideshow">
        <div role="list">
            <div class="slide"> <!-- Load image 01 -->
                <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
            <div class="slide">
                <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
            <div class="slide">
                <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
        </div>
    </div>

  <script  src="./script.js"></script> <!-- load script.js // consider both files in same folder -->

</body>
</html>

script.js

var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // call slidshow data-component
slideshows.forEach(initSlideShow);

function initSlideShow(slideshow) { // slideshow function

    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);

    var index = 0, time = 5000; // set slide time
    slides[index].classList.add('active');

    setInterval( () => { // slide every 5 second
        slides[index].classList.remove('active');
        
        index++;
        if (index === slides.length) index = 0;

        slides[index].classList.add('active');

    }, time);
}

style.css

[data-component="slideshow"] .slide {
    display: none;
  text-align: center;
}

[data-component="slideshow"] .slide.active {
    display: block;
}

create all thees three files inside a folder and run index.html file. you can use your own images by replacing the URL.

Admin1

There is one thing that I can suggest, which is fake it. Once we have loaded our website we can then show an animation which shows some loading effects and then load our complete website.

Step 1

Style the div(s) to your needs.

Step 2

Create a separate class (in CSS, not in HTML) with styles the animation. Something like this.

.animation {
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

Do not forget to add the keyframes.

@keyframes name {
  0% {
      /* Styles */
  }
  100% {
      /* Styles */
  }     
}

Step 3

Now we use JavaScript.

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('div').classList.add('animation'); 
});

Plus if you are interested in CSS animation you can check out my blog, where I am doing a short course on animations.

Happy Coding!

user_137983220
Related