Los Paez v7.0
img de Infinite slider

Infinite slider

en Tech por


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.


El resultado




Artículos relacionados

Aún no hay entradas relacionadas. 😢