0

Tenho esse código que faz uma animação de imagens subindo infinitamente, porém não acontece isso, como eu poderia arrumar para que fique com o mesmo efeito desse site

http://www.guiacatalao.com.br/empresa/pizza-food-a-pizza-no-cone,TnpBeU1BPT0.html

.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>

em jquery consegui assim

jsfiddle.net/pG8kt

8
  • Acho que teria que usar JavaScript pra isso, de preferência jQuery.
    – Sam
    Commented 20/06/2018 às 0:49
  • também acho, como ficaria com jquery? Commented 20/06/2018 às 0:51
  • Vi que são várias imagens em preto e branco e colorida. Qual seria a ordem?
    – Sam
    Commented 20/06/2018 às 0:52
  • na verdade ali a imagem está inteira, seria 3 imagens uma em baixo da outra rodando para cima Commented 20/06/2018 às 0:53
  • econtrei esse jsfiddle.net/pG8kt mas vai pro, lado como faço para ir para cima? Commented 20/06/2018 às 0:58

1 Resposta 1

2

Criei um efeito semelhante, mas não utilizei imagens de fundo, e sim imagens dentro das divs. O script pega automaticamente a altura da imagem e quando ela terminar de rolar na div pai, sofre um fadeOut() e a próxima começa a rolar pra cima.

O interessante é que as imagens tenham a mesma altura para que o tempo de transição entre elas seja igual. No exemplo eu coloquei a altura das imagens em 300px:

.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>
<div class="tech-slideshow">
  <div class="mover"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></div>
  <div class="mover"><img src="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg"></div>
  <div class="mover"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmD3Svo4XWzYSRGCOyoIeXUlY3ZyJ8fI5Wu0bEgTme1_Rka3ttHg"></div>
</div>

3
  • preciso fazer 2 slides desse subindo, como eu faria para repetir? fiz mas nao deu certo, olha minha pergunta que editei. Commented 22/06/2018 às 11:57
  • Precisa editar a pergunta não. Vou ver aqui pra vc ;)
    – Sam
    Commented 22/06/2018 às 12:11
  • 1
    Tive que duplicar a função alterando o seletor da div-pai: jsfiddle.net/7ufkwpnq
    – Sam
    Commented 22/06/2018 às 12:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .