0
263
ViewsHacer que un grupo de elementos se mueva horizontalmente hacia la izquierda
En el siguiente código, organicé algunos divs para alinearlos horizontalmente. Quiero crear 3 filas y en cada fila, quiero que los divs se muevan horizontalmente hacia la izquierda a diferentes velocidades.
Consulte este giphy como referencia visual: http://www.giphy.com/gifs/ME8Av6LT9hgymDnqSP
.roundeddivs { background: white; white-space: nowrap; padding: 20px 25px; border-radius: 44px; max-height: "1px"; width: auto; margin: 8px; font-size: 18px; font-weight: 500; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; } .block { padding: 6rem 2rem; } .arrangeflex { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; margin: 0 25px; } <section> <div class="block "> <div class="arrangeflex"> <span class="roundeddivs">Hello 1</span> <span class="roundeddivs">Hello 2</span> <span class="roundeddivs">Hello 3</span> <span class="roundeddivs">Hello 4</span> <span class="roundeddivs">Hello 5</span> <span class="roundeddivs">Hello 6</span> <span class="roundeddivs">Hello 7</span> <span class="roundeddivs">Hello 8</span> <span class="roundeddivs">Hello 9</span> <span class="roundeddivs">Hello 10</span> <span class="roundeddivs">Hello 11</span> <span class="roundeddivs">Hello 12</span> <span class="roundeddivs">Hello 13</span> <span class="roundeddivs">Hello 14</span> <span class="roundeddivs">Hello 15</span> <span class="roundeddivs">Hello 16</span> <span class="roundeddivs">Hello 17</span> </div> </section> 
Animado así ( GIF animado) :
2 answers
Answer question0
La forma más fácil que se me ocurre es usar una etiqueta de marquesina, sin embargo, el elemento no aparecerá directamente desde la derecha.
.marquee{ width: 100% } <section> <div class="block "> <div class="arrangeflex"> <marquee scrollamount="6"> <span class="roundeddivs">Hello 1</span> <span class="roundeddivs">Hello 2</span> <span class="roundeddivs">Hello 3</span> <span class="roundeddivs">Hello 4</span> </marquee> <marquee scrollamount="5"> <span class="roundeddivs">Hello 5</span> <span class="roundeddivs">Hello 6</span> <span class="roundeddivs">Hello 7</span> <span class="roundeddivs">Hello 8</span> </marquee> <marquee scrollamount="10"> <span class="roundeddivs">Hello 9</span> <span class="roundeddivs">Hello 10</span> <span class="roundeddivs">Hello 11</span> <span class="roundeddivs">Hello 12</span> </marquee> <marquee scrollamount="8"> <span class="roundeddivs">Hello 13</span> <span class="roundeddivs">Hello 14</span> <span class="roundeddivs">Hello 15</span> <span class="roundeddivs">Hello 16</span> <span class="roundeddivs">Hello 17</span> </marquee> </div> </div> </section>0
Si puede agregar copias de los elementos a su HTML, puede hacer el resto en CSS.
Cada fila se trata de forma independiente y tiene al menos dos copias de los elementos de esa fila; coloque más (duplicando) si cree que los elementos no se extenderán por todo el ancho del bloque contenedor en algunos dispositivos.
Una fila se mueve el 50% de su ancho total hacia la izquierda y luego comienza de nuevo. Esto significa que la acción parece fluida ya que la segunda mitad de la fila se "sobrescribe" con la primera mitad cuando toca el lado izquierdo de su contenedor.
Este fragmento usa una variable CSS --t para establecer el tiempo, y cada una de las filas puede establecer su propio --t.
Solo se muestran un par de filas en este fragmento para dar una idea. Agregue más según sea necesario, cada uno dentro de su propia división principal. He puesto 4 copias de los elementos en cada fila, probablemente una exageración, depende de su contenido y de los dispositivos para los que está tratando de diseñar.
.roundeddivs { background: white; white-space: nowrap; padding: 20px 25px; border-radius: 44px; max-height: "1px"; width: auto; margin: 8px; font-size: 18px; font-weight: 500; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; } .block { padding: 6rem 2rem; width: 50vw; } .marquees { margin: 0 25px; white-space: nowrap; overflow: hidden; } .marquees>* { white-space: nowrap; display: flex; width: fit-content; animation: move var(--d) linear infinite; } .marquees>*:nth-child(1) { --d: 9s; } .marquees>*:nth-child(2) { --d: 15s; } .marquees>*:nth-child(3) { --d: 8s; } .marquees>*:nth-child(4) { --d: 15ss; } @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } <section> <div class="block "> <div class="marquees"> <div> <span class="roundeddivs">Hello 1</span> <span class="roundeddivs">Hello 2</span> <span class="roundeddivs">Hello 3</span> <span class="roundeddivs">Hello 4</span> <span class="roundeddivs">Hello 5</span> <span class="roundeddivs">Hello 6</span> <span class="roundeddivs">Hello 7</span> <span class="roundeddivs">Hello 8</span> <span class="roundeddivs">Hello 1</span> <span class="roundeddivs">Hello 2</span> <span class="roundeddivs">Hello 3</span> <span class="roundeddivs">Hello 4</span> <span class="roundeddivs">Hello 5</span> <span class="roundeddivs">Hello 6</span> <span class="roundeddivs">Hello 7</span> <span class="roundeddivs">Hello 8</span> <span class="roundeddivs">Hello 1</span> <span class="roundeddivs">Hello 2</span> <span class="roundeddivs">Hello 3</span> <span class="roundeddivs">Hello 4</span> <span class="roundeddivs">Hello 5</span> <span class="roundeddivs">Hello 6</span> <span class="roundeddivs">Hello 7</span> <span class="roundeddivs">Hello 8</span> <span class="roundeddivs">Hello 1</span> <span class="roundeddivs">Hello 2</span> <span class="roundeddivs">Hello 3</span> <span class="roundeddivs">Hello 4</span> <span class="roundeddivs">Hello 5</span> <span class="roundeddivs">Hello 6</span> <span class="roundeddivs">Hello 7</span> <span class="roundeddivs">Hello 8</span> </div> <div> <span class="roundeddivs">Hello 9</span> <span class="roundeddivs">Hello 10</span> <span class="roundeddivs">Hello 11</span> <span class="roundeddivs">Hello 12</span> <span class="roundeddivs">Hello 13</span> <span class="roundeddivs">Hello 14</span> <span class="roundeddivs">Hello 15</span> <span class="roundeddivs">Hello 16</span> <span class="roundeddivs">Hello 17</span> <span class="roundeddivs">Hello 9</span> <span class="roundeddivs">Hello 10</span> <span class="roundeddivs">Hello 11</span> <span class="roundeddivs">Hello 12</span> <span class="roundeddivs">Hello 13</span> <span class="roundeddivs">Hello 14</span> <span class="roundeddivs">Hello 15</span> <span class="roundeddivs">Hello 16</span> <span class="roundeddivs">Hello 17</span> <span class="roundeddivs">Hello 9</span> <span class="roundeddivs">Hello 10</span> <span class="roundeddivs">Hello 11</span> <span class="roundeddivs">Hello 12</span> <span class="roundeddivs">Hello 13</span> <span class="roundeddivs">Hello 14</span> <span class="roundeddivs">Hello 15</span> <span class="roundeddivs">Hello 16</span> <span class="roundeddivs">Hello 17</span> <span class="roundeddivs">Hello 9</span> <span class="roundeddivs">Hello 10</span> <span class="roundeddivs">Hello 11</span> <span class="roundeddivs">Hello 12</span> <span class="roundeddivs">Hello 13</span> <span class="roundeddivs">Hello 14</span> <span class="roundeddivs">Hello 15</span> <span class="roundeddivs">Hello 16</span> <span class="roundeddivs">Hello 17</span> </div> </div> </div> </section>Obviamente querrás jugar con los tiempos para conseguir el efecto que necesitas.