Neoyondoneo :)

H00OOLaa, a pedido de una personita linda, hare tutorial de la cinta de posters infinitas que tengo en mi blog...
  Bueno simplemente es un código HTML en el cual, ustedes solo tendrán que poner los links de sus imágenes preferidas, yo las saque de Pinterest.. lo mejor de todo creo es que si pasas el ratón por encima de las imágenes, ¡se detienen para que puedas verlas bien!

Si no saben a que gadget me refiero exactamente es este... 

Imagen referencial :)

Aquí les dejo el código completo listo para usar. Solo tienen que copiarlo, pegarlo en su blog y hacer unos pequeños cambios que les explico más abajo. 

 

• Paso 1; copia el código :D

HTML

<!-- PAQUETE: CINTA VERTICAL DE IMÁGENES -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Unkempt&display=swap" rel="stylesheet">

<style>
  .contenedor-vertical-imagenes {
    width: 150px; /* Ancho fijo para la columna */
    margin: 15px auto;
    font-family: 'Unkempt', cursive;
  }

  .titulo-vertical {
    font-size: 18px;
    color: #4a5d23; /* Color del título */
    text-align: center;
    margin-bottom: 10px;
  }

  .wrap-vertical {
    height: 300px; /* Altura de la cajita */
    overflow: hidden;
    position: relative;
    background: #e2e8d0; /* Color de fondo de la caja */
    border: 3px solid #6b7c41; /* Color y grosor del borde */
    border-radius: 10px;
  }

  .track-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    animation: mover-vertical 30s linear infinite;
  }

  /* ¡Esto hace que se pause al pasar el ratón! */
  .wrap-vertical:hover .track-vertical {
    animation-play-state: paused;
  }

  .track-vertical img {
    height: 85px;
    width: auto;
    border-radius: 8px;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
  }

  .track-vertical img:hover {
    transform: scale(1.1);
  }

  @keyframes mover-vertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }
</style>

<div class="contenedor-vertical-imagenes">
  <div class="titulo-vertical">૮ ˶ᵔ ᵕ ᵔ˶ づ Imágenes</div>
  <div class="wrap-vertical">
    <div class="track-vertical">
      
      <!-- ========================================== -->
      <!-- GRUPO 1: Pon tus 8 links de imágenes aquí  -->
      <!-- ========================================== -->
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 1">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 2">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 3">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 4">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 5">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 6">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 7">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 8">

      <!-- ========================================== -->
      <!-- GRUPO 2: ¡Repite exactamente las mismas 8! -->
      <!-- ========================================== -->
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 1">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 2">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 3">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 4">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 5">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 6">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 7">
      <img src="PON_TU_LINK_DE_IMAGEN_AQUI" alt="Img 8">

    </div>
  </div>
</div>

 

•   Paso 2; Cómo poner tus propias imágenes?

El secreto de la "cinta infinita" es que las imágenes están duplicadas. Si te fijas en la parte final del código (el HTML), verás que hay dos grupos de imágenes. 

 Primero borra el texto que dice PON_TU_LINK_DE_IMAGEN_AQUI y pega ahí el link directo de tu imagen (asegúrate de no borrar las comillas " ")

 Y luego lo que pongas en el Grupo 1, tienes que copiarlo exactamente igual en el Grupo 2. ¡Esto es lo que crea la ilusión óptica de que las imágenes nunca se acaban! Puedes agregar cuantas quieras, siempre y cuando dupliques la lista... Espero me hayan entendido hasta esa parte, 

• Paso 3; Modificarlo como te guste

Para que combine con el estilo de tu blog, puedes cambiar los colores en la parte de arriba del código (el bloque <style>). Busca estas líneas y cambia los códigos hexadecimales (los números con un #):

1. Para el título: Busca .titulo-vertical y cambia color: #4a5d23;

2. Para el fondo de la cajita: Busca .wrap-vertical y cambia background: #e2e8d0;

3. Para el borde de la cajita: Ahí mismo en .wrap-vertical, busca border: 3px solid #6b7c41; y cambia el color.

¡Y listo! espero les haya ayudado, cualquier duda pueden consultar, gracias :D...