2

Então, tenho uma div com 3 imagens

<div class="pai">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
</div> 

Gostaria que essas 3 imagens corressem da direita para a esquerda em ordem até chegar em suas posições, e quando chegassem, parassem lá.

Mas gostaria que elas não saíssem todas juntas. Gostaria que a segunda desse um tempo de uns 2 segundos após a saída da primeira.

Pensando nisso, cheguei a ideia de usar um foreach. Mas dá para implementar isso em css3? como?

O modelo que fiz, apenas faz elas entrarem em sequência.

Obs: NÃO gostaria de usar JavaScript. Quero usar apenas CSS.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
.pai {  
    width: 1000px;
    height:300px;
    position: relative;
    overflow: hidden;
}

.pai > img {
    width: 10%;
    position:relative;
    animation: animacao 5s;
    animation-delay: 3s;
    animation-direction: alternate;
}


@keyframes animacao{
    0%   {left: 110%; top: 0px;}
    100% {left: 0px; top: 0px;}
}

</style>
</head>
<body>

  <div class="pai"> 
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>

</body>
</html>

1 Resposta 1

4

Este código não usa JS, no entanto você precisa criar o DELAY para cada item, com SASS seria possível fazer para N itens facilmente. Acrescentei o Javascript para fazer os elementos aparecerem apenas quando rola a página.

$( window ).scroll(function() {
		if($( window ).scrollTop() > $('#pai').offset().top - 300) 	           $('#pai').addClass("pai");
	});
#rolagem {
  width: 100%;
  height: 800px;
  background: #CCC;
}

#pai {
  width: 1000px;
  height:300px;
  position: relative;
  overflow: hidden;
}

img {
  display: none;
}

.pai > img {
  display: inline-block;
  width: 10%;
  position:relative;
  animation: animacao 3s;
  animation-fill-mode: forwards;
}

.pai > img:nth-child(2) {
  animation-delay: 2s;
  left: 110%;
}

.pai > img:nth-child(3) {
  animation-delay: 4s;
  left: 110%;
}

@keyframes animacao{
    0%   {left: 110%; top: 0px; opacity: 0;}
    55%  {opacity: 0;}
    100% {left: 0px; top: 0px; opacity: 1}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="rolagem"></div>

<div id="pai"> 
    <img src="http://www.suasletras.com/fotos_artista/637eacb259910a2df5bde545f367ab77.jpg">
    <img src="http://www.suasletras.com/fotos_artista/637eacb259910a2df5bde545f367ab77.jpg">
    <img src="http://www.suasletras.com/fotos_artista/637eacb259910a2df5bde545f367ab77.jpg">
  </div>

12
  • Então, era isso mesmo. Mas aproveitando, como faz para essas figuras, em seus tempos de aparição, aparecerem como se fosse um relâmpago (clarão). Mas só aparecerem quando, ao descer a página, chegar na div delas? 8/02/2017 às 12:19
  • Acredito que agora seja necessário JS, tu vai usar? 8/02/2017 às 12:22
  • Não, Só queria usar CSS. É muiiiiiiiito mais rápido css e mais leve. 8/02/2017 às 12:52
  • Acredito que para capturar a localização do Scroll seja necessário usar JS, por que não podes usar? (me explica melhor essa ideia de clarão) 8/02/2017 às 12:54
  • kkk, ele aparece na direita com uma claridade, quando chega no meio, ele dá um clarão na imagem e depois a imagem volta ao estado de claridade normal 8/02/2017 às 13:00

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 .