Image uploading with html5 in crossfade

Question

Image uploading with html5 in crossfade

Navigation

#1 by (1 votes)

1

I have this html5 code that transitions images, what I need is to make the image go up and down inside a div and then transition the images. How could I do that?

#crossfade > img { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; 
}

#crossfade > img:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
#crossfade > img:nth-child(5) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

<div id="crossfade">
  <img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg"alt="Image 1">
  <img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg"alt="Image 2">
  <img src="http://farm6.staticflickr.com/5263/5601183065_f88a48d599.jpg"alt="Image 3">
  <img src="http://farm2.staticflickr.com/1415/983021323_8eb2f92c01.jpg"alt="Image 1">
  <img src="http://farm1.staticflickr.com/168/397834706_6a46c6ada5.jpg"alt="Image 1">
</div>

Example of how I need to see neese link

link

html5

asked by anonymous 12.06.2018 / 13:52

1 answer

Calling a function after validating a form in Bootstrap How to update column for each SELECT in a given table?

score 1 · Accepted Answer

The images start from the bottom up, that is, nth-5 is above nth-4 etc then delay has to be done in reverse as you will see in the code.

I've used transform:translateY() to make the image up and opacity to control transparency.

OBS: If the image is higher than wide it will pass faster than the others, so it would be interesting to have all the image at the same height.

See how you got 5 pictures.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#crossfade {
  width: 80%;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#crossfade > img { 
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation: imageAnimation 10s linear infinite ;
            animation: imageAnimation 10s linear infinite ;
}

#crossfade > img:nth-child(5) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#crossfade > img:nth-child(4) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
#crossfade > img:nth-child(3) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
#crossfade > img:nth-child(2) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
#crossfade > img:nth-child(1) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}

@-webkit-keyframes imageAnimation { 
    0% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 1;
    }
    16% { 
      opacity: 1;
    }
    22% { 
      -webkit-transform: translateY(-20%); 
              transform: translateY(-20%);
      opacity: 0;
    }
    100% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 0;
    }
}

@keyframes imageAnimation { 
    0% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 1;
    }
    16% { 
      opacity: 1;
    }
    22% { 
      -webkit-transform: translateY(-20%); 
              transform: translateY(-20%);
      opacity: 0;
    }
    100% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 0;
    }
}

<div id="crossfade">
  <img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg"alt="Image 1">
  <img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg"alt="Image 2">
  <img src="http://unsplash.it/600/600"alt="Image 3">
  <img src="http://farm2.staticflickr.com/1415/983021323_8eb2f92c01.jpg"alt="Image 1">
  <img src="http://farm1.staticflickr.com/168/397834706_6a46c6ada5.jpg"alt="Image 1">
</div>

EDIT

Option with 3 images, notice that I need to adjust the values of the total animation, I changed from 10s (5 intervals of 2s), to 6s (3 intervals of 2s), and I changed the @keyframes to make the transition between 26% and 33% and not between 16% and 22%, because now I need to divide the time in 3 (3x33%) and not in 5 (5x20%) to have the total time of the animation understands ...

See how it went.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#crossfade {
  width: 80%;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#crossfade > img { 
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation: imageAnimation 6s linear infinite ;
            animation: imageAnimation 6s linear infinite ;
}


#crossfade > img:nth-child(3) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#crossfade > img:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
#crossfade > img:nth-child(1) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

@-webkit-keyframes imageAnimation { 
    0% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 1;
    }
    16% { 
      opacity: 1;
    }
    22% { 
      -webkit-transform: translateY(-20%); 
              transform: translateY(-20%);
      opacity: 0;
    }
    100% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 0;
    }
}

@keyframes imageAnimation { 
    0% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 1;
    }
    26% { 
      opacity: 1;
    }
    36% { 
      -webkit-transform: translateY(-20%); 
              transform: translateY(-20%);
      opacity: 0;
    }
    100% { 
      -webkit-transform: translateY(0%); 
              transform: translateY(0%);
      opacity: 0;
    }
}

<div id="crossfade">
  <img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg"alt="Image 1">
  <img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg"alt="Image 2">
  <img src="http://unsplash.it/600/600"alt="Image 3">
</div>