0

Preciso fazer 4 imagens aparecer, uma de cada vez, na minha página, após o carregamento dela.

EFEITO NA IMAGEM: Seria o efeito fade-in, se não me engano é esse o nome. Esse efeito é aquele que a imagem vai surgindo do centro dela.

CARREGAMENTO DE CADA IMAGEM Cada imagem, deverá aparecer após o carregamento da página, uma de cada vez, ou seja, se a primeira abre em 1 segundo a segunda abriria em 3, sendo uma diferença de 2 segundos para cada imagem.

1
  • 2
    Se você quiser uma ajuda, dicas ou orientações, ao invés de algo do tipo "façam o meu trabalho para mim", então daí pode ser que você tenha mais sorte. Poste o seu código, mesmo se estiver incompleto (preferencialmente compilável, se possível) ou mesmo que possua bugs e erros e peça ajuda. Se você tentou fazer e deu um erro que você não sabe qual é a solução, esse é o lugar certo para pedir ajuda. A única coisa que não dá é esperar que alguém faça tudo.
    – user60252
    Commented 20/06/2017 às 19:15

3 Respostas 3

0

Trate a animação com Javascript se a quantidade de imagens for dinâmica. Se possui um número fixo de imagens, pode criar sua animação de fade-in com @keyframes e fazer uso da propriedade animation.

O delay entre as imagens pode ser feito com a propriedade animation-delay.

Cada imagem pode ter sua regra definida individualmente pela pseudo classe :ntd-child(n).

Tendo tudo definido, será preciso usar Javascript somente para alterar o animation-play-state quando o documento for carregado (nessa pergunta há maiores informações sobre como fazer isto cross-browser) de paused para running. No snippet abaixo, aplicarei uma classe ao body para fazer este controle.

document.addEventListener('DOMContentLoaded', function(){
  document.querySelector('body')
          .classList
          .add('loaded');
});
@keyframes fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

img {
  opacity: 0;
  animation: fade-in 2s normal forwards ease-in-out;
  animation-play-state: paused
}

body.loaded img {
  animation-play-state: running
}

body.loaded img:nth-child(2){ animation-delay: 1s }
body.loaded img:nth-child(3){ animation-delay: 2s }
body.loaded img:nth-child(4){ animation-delay: 3s }
<img src='http://lorempixel.com/100/100/abstract/'>
<img src='http://lorempixel.com/100/100/abstract/'>
<img src='http://lorempixel.com/100/100/abstract/'>
<img src='http://lorempixel.com/100/100/abstract/'>

0
> $(document).ready(function(){
> 
>    setTimeout(function(){
>         $('#elementoImg1').fadeIn(1000);
>         $('#elementoImg2').fadeIn(3000);
>          $('#elementoImg3').fadeIn(5000);
>          $('#elementoImg4').fadeIn(7000);
>    }, 1000);
> 
> });
1
  • Também dá para usar um .delay() entre os fades, para todos terem a mesma velocidade de animação.
    – Ricardo
    Commented 21/06/2017 às 12:37
0

    
$(document).ready( function(){
      
    $('.fade').each( function(i){

    //DELAY TEMPO PARA EXECUTAR DEPOIS QUE A PAGINA CARREGA
    //ANIMATE TEMPO DE ANIMAÇÃO
    $(this).delay(2000).animate({'opacity':'1'},1500);

    }); 
      
});
#objeto{
background-color: #ddd;
width:50%;
margin:auto;
}

.style{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="style">
        <div class="fade">
          <h1 class="">TESTE FADEIN</h1>
          <p class="lead">TESTE FADEIN QUANDO CARREGA A PÁGINA.</p>
        </div>
    </div>

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 .