Animation in up / down image inside div with Jquery

Question

Animation in up / down image inside div with Jquery

Navigation

#1 by (2 votes)

0

I have this code that does an image animation going up infinitely, but it does not happen, how could I fix it to have the same effect as this site

link

.tech-slideshow {
  height: 200px;
  max-width:400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 200px;
  width: 200px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% { 
    transform: translatey(-66.6666%);  
  }
}

<div class="tech-slideshow">
  <div class="mover-1"></div>
  <div class="mover-2"></div>
</div>

In jquery I managed this way

jsfiddle.net/pG8kt

jquery css css3

asked by anonymous 20.06.2018 / 02:34

1 answer

Error trying to create a Controller or ApiController Add button does not differentiate products

score 2 · Accepted Answer

I created a similar effect, but I did not use background images, but I used images inside% s of% s. The script automatically picks up the height of the image and when it finishes scrolling in div parent, it suffers div and the next one starts scrolling up.

The interesting thing is that the images have the same height so that the transition time between them is equal. In the example I put the height of the images in fadeOut() :

.tech-slideshow div img{
   width: 100%;
   height: 300px;
}

$(document).ready(function(){

   var container = $(".tech-slideshow").height();

   function animar(i){
      var $this = $(".tech-slideshow div:eq("+i+")");
      $this.css("z-index", "0");

      $this.animate({
         top: -Math.ceil($("img", $this).height())+container
      }, 2000, "linear", function(){
         $this.css("z-index", "1");
   
         i = i == $(".tech-slideshow div").length-1 ? 0 : i+=1;
         $(".tech-slideshow div:eq("+i+")").css("top", "0");
   
         animar(i);
   
         $("img", $this).fadeOut(800, function(){
            $this.css("top", container+"px").find("img").show();
         });
      });
   }
   
   animar(0);
});

.tech-slideshow{
   height: 200px;
   max-width:400px;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
   background: #ddd;
}

.tech-slideshow div{
   height: 200px;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.tech-slideshow div img{
   width: 100%;
   height: 300px;
}

.tech-slideshow div:not(:first-child){
   top: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="tech-slideshow">
  <div class="mover"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></div><divclass="mover"><img src="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg"></div><divclass="mover"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmD3Svo4XWzYSRGCOyoIeXUlY3ZyJ8fI5Wu0bEgTme1_Rka3ttHg"></div>
</div>