Boxes - José Alberto xyz

Redes sociales

HTML JS Y CSS

<h1>Scroll</h1>
<style>
	h1{margin:10px;}
	.box{
		background: steelblue;
		color:#fff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400px;
		height: 200px;
		margin: 10px;
		border-radius:10px;
		box-shadow:2px 4px 5px;
		transform:translateX(400%);
		transition:transform 0.6s ease;
		
		
	}
	
	.box:nth-of-type(even){
			transform:translateX(-400%);
	}
	.box.show{
	transform: translateX(0);
	
	}
	.center{
		margin 0 auto;
		text-align: center;
		justify-content:center;
	}
</style>

<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>

</div>

HTML JS Y CSS

RESULTADO