Me gustaría deslizar 3 imágenes una a la vez con facilidad desde la izquierda al div rojo. Cuando las imágenes no están en el div, no deberían ser visibles

Este es el resultado inicial y final que esperaba lograr. El rectángulo rojo es el div principal y los rectángulos negros son las imágenes en las que quiero deslizarme.

¿Alguna idea de cómo abordar este problema?

enter image description here

enter image description here

HTML:

<div id="container">
<img src="black"><img src="black"><img src="black">
</div>

CSS:

#container {
width:380px;
height: 200px;
background-color:red;

}
img{
    width:30px;
    height: 50px;
}
-3
sanjihan 16 feb. 2017 a las 18:26

3 respuestas

La mejor respuesta

Este es un ejemplo muy burdo, pero quería obtener una demostración rápida para orientarlo en la dirección correcta. Necesitará desarrollar esto aún más, pero sé que puede ser difícil comenzar.

Fiddle: https://jsfiddle.net/ed034mrs/

No necesita Javascript en absoluto, puede hacerlo con animaciones CSS. La animación es una simple diapositiva desde la izquierda y he escalonado los elementos con retraso.

Html:

<div class="outer">
  <div class="inner">
    <img src="" alt="">
  </div>

  <div class="inner">
    <img src="" alt="">
  </div>

  <div class="inner">
    <img src="" alt="">
  </div>
</div>

Css:

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.outer {
  width: 380px;
  height: 200px;
  background-color: red;
  overflow: hidden;
}

.inner {
  width: 33.33%;
  height: 100%;
  float: left;
  position: relative;
  display: block;
  transform: translateX(-1000%);
  -webkit-animation: slide-in 1s forwards;
}

.inner:nth-child(1) {
  -webkit-animation-delay: 2s;
}

.inner:nth-child(2) {
  -webkit-animation-delay: 1s;
}

img {
  width: 30px;
  height: 50px;
  background-color: black;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -15px;
}
1
Jake Hills 16 feb. 2017 a las 15:46

Aquí está mi intento, bastante complicado, pero espero que te dé más opciones para abordar.

Coloqué las cajas negras fuera del contenedor y configuré el desbordamiento como oculto para que no se puedan ver fuera del contenedor. Luego, en CSS, cuando el contenedor está suspendido, quiero que la primera, segunda y tercera imágenes se muevan a la derecha.

Las imágenes segunda y tercera también tienen un retraso de transición. La duración de la transición es de solo 1 segundo como se ve en el selector img, por lo que aparecerán uno a la vez.

.greyBackground {
 background-color: grey;
}

#container {
 margin:auto;
 position: relative;
 width:380px;
 height: 200px;
 background-color:#B53535;
 overflow: hidden;
}

img{
 position: relative;
 display:inline-block;
 background-color: black;
 width:70px;
 height: 90px;
 top:40px;
 right: 220px;
 transition: right 1s ease-out;
 -webkit-transition: right 1s ease-out;
 -moz-transition: right 1s ease-out;
 -o-transition: right 1s ease-out;
}

#container:hover > img:nth-of-type(1) {
 right: -20px;
}

#container:hover > img:nth-of-type(2) {
 right: -80px;;
 transition-delay: 1s;
}

#container:hover > img:nth-of-type(3) {
 right: -140px;
 transition-delay: 2s;
}
<div class="greyBackground">
 <div id="container">
    <img src="">
    <img src="">
    <img src="">
 </div>
</div>
0
Lee Connelly 16 feb. 2017 a las 17:27

Primero puede establecer un gran negativo margin-left para eliminar imágenes de la ventana y luego usar animate en el margen para deslizar las imágenes una por una utilizando el retraso y el índice de cada imagen.

$('img').css('margin-left', '-200vw')

$('img').each(function(i) {
  $(this).delay(i * 500).animate({
   'margin-left': 25
  }, 1000)
})
* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
.content {
  background: gray;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.red {
  background: #B53535;
  width: 400px;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="red">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
  </div>
</div>

Sería mucho más fácil si pudieras configurar justify-content: space-around pero supongo que js afecta a flexbox, así que esto sucede DEMO

0
Nenad Vracar 16 feb. 2017 a las 16:01