Image rising with Html5 in crossfade

Asked

Viewed 42 times

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 can see Neese link

http://www.guiacatalao.com.br/empresa/maccherroni-massas-e-chopp,Tmpjnu1npt0.html

html5

1 answer

1


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

No more I used transform:translateY() to make the image go up and the opacity to monitor transparency.

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

See how it was with 5 images.

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, note that you need to adjust the values of the total animation, which I changed from 10s (5 2s intervals), to 6s (3 2s intervals), 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 into 3 (3x33%) and not in 5(5x20%) to have the total time of the animation understands...

Look how it turned out.

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>

  • as I would with 3 images, I’m doing more here after the loop is over a while http://jsfiddle.net/c5kjftb7/

  • Cara I made an edition at the end of my answer. Look, it’ll be easier for you to understand. But you have to "marry" the full animation time with the transitions on @keyframes

  • I couldn’t understand the logic yet, as it would be if I put the animation to 8s instead of 6s?

  • You can test the time, changing from 6 to 8 and see if it will give some fault in the interpolation of the images in the slider. If you have a problem you will need to adjust the values in the keyframes... But for 8s 4frames would be perfect, with 2s per img and delay 2s between each, and animation at 25%, 1/4 of 100%. Testing and error is part of learning, so you test that eventually you understand the dynamics

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.