
Infinite slider
Infinite Slider Marquee
Lo que llamamos marquesina, slider… un código para mostrar contenido animado en una parte de nuestra web, podemos usarlo con textos, imagenes, etc.
En este caso lo quería para integrarlo en mi proyecto de Astro, usando Tailwinds.
📝tuve la inspiración en este artículo de Julien Thibeaut
Así que lo que vamos a hacer es animar un par de “marquesinas” del mismo tamaño y mismos elementos para que parezca que es una única.
Preparando el terreno
Lo primero que debemos tener es un proyecto de Astro, configurado con Tailwinds, para ello vamos a la documentacón de Astro.
Instalación automática
Podemos hacerlo de manera automática mediante la configuración de integraciones
npx astro add tailwind
Instalación manual
Primero, instala los paquetes @astrojs/tailwind y tailwindcss usando tu administrador de paquetes. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:
npm install @astrojs/tailwind tailwindcss
Luego, aplica la integración a tu archivo astro.config.* usando la propiedad integrations:
astro.config.mjs
import { defineConfig } from 'astro/config';
+ import tailwind from '@astrojs/tailwind';
export default defineConfig({
// ...
integrations: [tailwind()],
});
A continuación, crea un archivo tailwind.config.mjs en el directorio raíz de tu proyecto.
npx tailwindcss init
Finalmente, agrega esta configuración básica a tu archivo tailwind.config.mjs:
tailwind.config.mjs
/** @type {import('tailwindcss').Config} */
module.exports = {
+ content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
};
Vamos allá
Vamos a necesitar crear un componente de Astro, por ejemplo en la carpeta src/components/widgets siguiendo la estructura general de los componentes, espacio para Frontmatter y declaraciones JavaScript donde vamos a importar nuestros logotipos.
Las imágenes
En mi caso lo hago mediante SVG a los que declaro en variables para poder usarlos luego en el componente Image para mostrar 7 logotipos, hay que tener en cuenta que cuantas más imágenes mostrmos, mas problemas tendremos luego para estilizar el contenido.
---
import { Image } from 'astro:assets';
import LogoAstro from '/src/components/svg/AstroLogo.svg'
import LogoCss3 from '/src/components/svg/Css3Logo.svg'
import LogoFlowBite from '/src/components/svg/FlowbiteLogo.svg'
import LogoHtml5 from '/src/components/svg/Html5Logo.svg'
import LogoTailWinds from '/src/components/svg/TailwindsLogo.svg'
import LogoTypeScript from '/src/components/svg/TypescriptLogo.svg'
import LogoVsCode from '/src/components/svg/VsCodeLogo.svg'
---
Podrías importar las imágenes de cualquier otra manera, mi forma de escoger Image es para tener el control sobre las mismas.
El código HTML
Ahora tenemos que construir el HTML y las definiciones CSS de Tailwinds para ir dando estilos básicos y adecuarlo a nuestro proyecto particular.
<article class="relative hidden md:block w-full min-h-[8rem] bg-stone-200 rounded-lg p-2">
<section class="relative w-full h-full before:absolute
before:left-0 before:top-0 before:z-[2] before:h-[99%] before:w-[100px]
before:bg-[linear-gradient(to_right,#e7e5e4_0%,rgba(255,255,255,0)_100%)]
before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2]
after:h-[99%] after:w-[100px] after:-scale-x-100
after:bg-[linear-gradient(to_right,#e7e5e4_0%,rgba(255,255,255,0)_100%)]
after:content-['']">
<div class="relative flex flex-row justify-center h-full overflow-x-hidden">
<div class="flex flex-row h-full items-center
gap-12 py-2 animate-marquee whitespace-nowrap">
<span class=""><Image src={LogoAstro} alt="" height="60" /></span>
<span class=""><Image src={LogoCss3} alt="" height="60" /></span>
<span class=""><Image src={LogoFlowBite} alt="" height="60" /></span>
<span class=""><Image src={LogoTailWinds} alt="" height="60" /></span>
<span class=""><Image src={LogoTypeScript} alt="" height="60" /></span>
<span class=""><Image src={LogoVsCode} alt="" height="60" /></span>
<span class=" pr-12"><Image src={LogoHtml5} alt="" height="60" /></span>
</div>
<div class="absolute top-0 hidden md:flex flex-row
h-full items-center gap-12 py-2 animate-marquee2 whitespace-nowrap">
<span class=""><Image src={LogoAstro} alt="" height="60" /></span>
<span class=""><Image src={LogoCss3} alt="" height="60" /></span>
<span class=""><Image src={LogoFlowBite} alt="" height="60" /></span>
<span class=""><Image src={LogoTailWinds} alt="" height="60" /></span>
<span class=""><Image src={LogoTypeScript} alt="" height="60" /></span>
<span class=""><Image src={LogoVsCode} alt="" height="60" /></span>
<span class=" pr-12"><Image src={LogoHtml5} alt="" height="60" /></span>
</div>
</div>
</section>
</article>
Dando estilos
El código en sí no tiene ningun problema, estuve pensando en usar un array para construirlo, quizas lo haga por demostrar su uso, la verdad que se me fue la mano en poner logos, con 4 funciona de maravilla y es mucho más fácil de estilarlo mediante mx-4 y gap-4
Los tamaños de logos, margenes, separaciones, todo vais a tener que adecuarlo a vuestras necesidades, es muy fácil.
Puse un padding-right en el último elemento de cada fila para que tenga el mismo espaciado en todos los elementos.
El efecto “blur” de el principio y el final se hace en el contenedor de las dos 2marquesinas” con este código de estilo:
<section class="
relative w-full h-full
before:absolute before:left-0 before:top-0
before:z-[2] before:h-[99%] before:w-[100px]
before:bg-[linear-gradient(to_right,#e7e5e4_0%,rgba(255,255,255,0)_100%)]
before:content-['']
after:absolute after:right-0 after:top-0
after:z-[2] after:h-[99%] after:w-[100px]
after:-scale-x-100
after:bg-[linear-gradient(to_right,#e7e5e4_0%,rgba(255,255,255,0)_100%)]
after:content-['']
">
Sólo hay que adecuar el color de fondo a vuestro proyecto.
La animación
Ya solo nos falta animar nuestro slider, lo hacemos en el archivo de configuración de Tailwinds. Dándole los valores que corresponde para que el movimiento de ambas se produzca de forma fluida.
Tenemos que editar el archivo tailwind.config.cjs de nuestro proyecto y añadir las siguientes líneas dentro del apartado
tailwind.config.cjs
animation: {
marquee: 'marquee 60s linear infinite',
marquee2: 'marquee2 60s linear infinite',
},
keyframes: {
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' },
},
marquee2: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(0%)' },
},
},
Asegúrate que lo insertas detras de theme / extend
Si todo ha ido bien sólo tienes que importar tu componente y darle estilo.