foreach using css3

Question

foreach using css3

Asked 7 years, 4 months ago

Viewed 257 times

2

So I have a div with 3 imagens

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

I would like these three images to run from right to left in order until you reach your positions, and when you arrive, stop there.

But I would like them not all to go out together. I would like the second to take a time of about 2 seconds after the exit of the first.

Thinking about it, I came up with the idea of using a foreach. But you can implement this in css3? as?

The model I made just makes them come in sequence.

Obs: NAY would like to use Javascript. I want to use CSS only.

<!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 answer

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.

by Thiago Santos • **1,957** points · Answer 1 · 2017-02-08T12:04:26+00:00

This code does not use JS, however you need to create DELAY for each item, with SASS it would be possible to make N items easily. I added Javascript to make the elements appear only when scrolling the page.

$( 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>