I need to make 4 images appear, one at a time, on my page, after loading it.
IMAGE EFFECT: It would be the fade-in effect, if I'm not mistaken, that's the name. This effect is one that the image comes up from the center of it.
LOADING EACH PICTURE Each image should appear after loading the page, one at a time, that is, if the first one opens in 1 second the second one would open in 3, a difference of 2 seconds for each image.
Treat the animation with Javascript if the number of images is dynamic. If you have a fixed number of images, you can create your fade-in animation with @keyframes and make use of the property animation .
Delay between images can be done with the property animation-delay .
Each image can have its rule defined individually by the pseudo class :ntd-child(n) .
Having everything set, you will need to use Javascript only to change animation-play-state when the document loads ( in this question there is more information on how to do this cross- browser ) from paused to running . In the snippet below, I will apply a class to body to do this control.
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('body')
.classList
.add('loaded');
});@keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
img {
opacity: 0;
animation: fade-in 2s normal forwards ease-in-out;
animation-play-state: paused
}
body.loaded img {
animation-play-state: running
}
body.loaded img:nth-child(2){ animation-delay: 1s }
body.loaded img:nth-child(3){ animation-delay: 2s }
body.loaded img:nth-child(4){ animation-delay: 3s }<img src='http://lorempixel.com/100/100/abstract/'>
<img src='http://lorempixel.com/100/100/abstract/'>
<img src='http://lorempixel.com/100/100/abstract/'>
<img src='http://lorempixel.com/100/100/abstract/'>> $(document).ready(function(){
>
> setTimeout(function(){
> $('#elementoImg1').fadeIn(1000);
> $('#elementoImg2').fadeIn(3000);
> $('#elementoImg3').fadeIn(5000);
> $('#elementoImg4').fadeIn(7000);
> }, 1000);
>
> });