1

Estou tentando criar um slide infinito parecido com o da página principal do instagram, utilizando somente CSS3 e o BOOTSTRAP.

Estou com as seguintes dificuldades:

  • Criar o efeito correto
  • As imagens devem estar por cima do smartphone branco

Como deve funcionar o efeito (observe no site do instagram para entender melhor):

  • A primeira imagem já deve estar aberta
  • Após certos segundos deve-se trocar para a imagem seguinte
  • Chegando na última imagem ele volta para a primeira

Figura ilustrativa do problema inserir a descrição da imagem aqui

CSS3

    <style>


.foto {
    opacity: 0;
    animation-name: animacao;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

@keyframes animacao {
    25% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }

    100% {
        opacity: 0;
    }
}

.foto:nth-child(1) {
 animation-delay: 0;
}

.foto:nth-child(2) {
    animation-delay: 10s;
}

.foto:nth-child(3) {
    animation-delay: 15s;

}

.foto:nth-child(4) {
    animation-delay: 20s;

}

.foto:nth-child(5) {
    animation-delay: 25s;

}
    </style>

HTML5 + BOOTSTRAP

<div class="container-fluid h-100 mt-lg-0">
            <div class="row align-items-center h-100">
                <!-- SMARTPHONES IMAGE -->
                <div class="col-lg-7 d-none d-lg-block mb-5 py-5" style="border: 0px red solid; background-image: url('/dist/img/9364675fb26a.png');background-size: 28rem; background-position: top right; background-repeat: no-repeat;">
                    <div class="d-flex justify-content-end mt-4 mr-4 mb-5 pt-3 pr-3">
                        <div class="galeria">
                            <img src="/dist/img/d6bf0c928b5a.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/177140221987.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/ff2c097a681e.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/b27a108592d8.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/5e04169b9308.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                        </div>
                    </div>
                </div>
           </div>
      </div>
2
  • 1
    Eh para ficar rodando sozinho automaticamente passando as imagens?
    – hugocsl
    25/06/2019 às 0:35
  • @hugocsl sim querido! Infinitamente..
    – user148754
    25/06/2019 às 3:06

1 Resposta 1

2

Cara sua animação tem uns probleminhas, e o principal é que ela demora de 0% a 25% para ficar visível, e depois demora de 25% a 100% para sumir. Isso significa que se a animação tem 20s ela demora 5s para aparece e 15s para desaparecer, isso é errado pq enquanto ela está sumindo já vai ter outros elementos aparecendo... vc tem que equilibrar esse tempo tipo 10s para aparece e 10s para sumir.

Outro problema é que no elemento nth(5) vc tem um delay de 25s que é maior que o próprio tempo da animação que é de 20s, isso não tem como dar certo, esse sincronismo não vai bater! O Grid do Bootstrap tb achei meio estranho a forma como montou, mas nem vou entrar nisso... vou focar na animação...

inserir a descrição da imagem aqui

Repare que que vc não deve finalizar uma animação antes de começar a outra. E para controlar isso vc tem que trabalhar no seu @keyframes, fazendo a animação começar um pouco antes e terminar um pouco depois do que seria o intervalo exato.

inserir a descrição da imagem aqui

Como fiz a animação com 4 imagem em um intervalo de 10s eu tenho 3 delays de 2.5s, a primeira imagem não precisa de delay. E como meu @keyframes é de 0% a 100% e tenho 4 imagem minha animação tem que acontecer entre 0% e 25%, (100/4 = 25).

O detalhe é que eu fiz a animação terminar em 30% e não 25% com o objetivo de que aconteça o overlap da animação, como mostrei no gráfico. Isso significa que a animação na verdade demora por volta de 3s para acontecer, mas o delay é de 2.5s, assim eu começo uma animação "por cima da outra", mas de forma controlada e equalizada.

Segue o código da imagem acima.

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

.box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 572px;
}

.box .bg,
.box .slide {
    position: absolute;
}

.box .slide {
    height: 436px;
    width: 247px;
    background-color: rgba(51, 51, 51, 1);
    border-radius: 5px;
    transform: translate(44px, 4px);
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #666;
}
.box .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    animation: fade1 10s infinite linear;
}
.box .slide img:nth-child(1) {
}
.box .slide img:nth-child(2) {
    opacity: 0;
    animation-delay: 2.5s;
}
.box .slide img:nth-child(3) {
    opacity: 0;
    animation-delay: 5s;
}
.box .slide img:nth-child(4) {
    opacity: 0;
    animation-delay: 7.5s;
}
@keyframes fade1 {
    0% {
        opacity: 0;
    }
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container-fluid h-100 mt-lg-0">
    <div class="row align-items-center h-100">
        <!-- SMARTPHONES IMAGE -->
        <div class="col-lg-7 mb-5 py-5">
            <div class="d-flex justify-content-end mt-4 mr-4 mb-5 pt-3 pr-3">
                <div class="box">
                    <img class="bg" src="https://www.instagram.com/static/images/homepage/home-phones.png/43cc71bb1b43.png">
                    <div class="slide">
                        <img src="https://placecage.com/100/100">
                        <img src="https://placecage.com/100/105">
                        <img src="https://fillmurray.com/100/100">
                        <img src="https://fillmurray.com/100/105">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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