Cómo llevar al diseño web a Pedro, el mapache de TikTok

Fecha de publicación: 2024-07-28
Pedro el meme de TikTok
En este tutorial te mostraré cómo usar animaciones personalizadas en un componente de React, utilizando css para crear efectos como giro y rebote. Veremos cómo integrar la imagen de Pedro, el famoso meme de TikTok, y darle un giro continuo con un rebote suave. Usaremos el componente Image de Next.js para optimizar la carga de la imagen, y nos apoyaremos en tailwind css para la estructura y centrado de elementos, pero las animaciones las gestionaremos con CSS tradicional para tener un mayor control.

¿Por qué usar Image de Next.js junto con animaciones CSS?

El componente `Image` de Next.js proporciona optimizaciones automáticas para imágenes como carga progresiva y adaptación a diferentes tamaños de pantalla. Sin embargo, Next.js añade un contenedor extra alrededor de las imágenes, lo que puede interferir con ciertas animaciones como el rebote o giro. Por eso, en este caso usaremos css tradicional para animar tanto el giro como el rebote, asegurándonos de que las animaciones funcionen correctamente sin tener que modificar la configuración global de Tailwind CSS o Next.js.

El componente en React

Vamos a implementar un componente llamado Pedro, donde la imagen de Pedro girará y rebotará utilizando animaciones definidas en CSS.

import React from "react";
import Image from "next/image";
import './pedro.css';

const Pedro: React.FC = () => {
    return (
        <div className="spinner mx-auto max-w-screen-sm text-center m-8">
            <Image
                className="mapachito"
                src="/img/pedro.png"
                alt="bailalo pegaito :)"
                width={300}
                height={300}
            />
        </div>
    );
}

export default Pedro;

Los estilos y animaciones en CSS

Aquí definimos las animaciones con css, manejando tanto el giro como el rebote.

.spinner {
    width: 100px;
    height: 100px;
    background: #f5dad8;
    border-radius: 50%;
    overflow: hidden;
    animation: spin 6s infinite linear;
}

.mapachito {
    display: block;
    width: 100%;
    animation: bounce 0.2s linear infinite alternate;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    to {
        translateY(20px);
    }
}

Explicación de las animaciones

  • .spinner: Aplicamos esta animación al contenedor, haciendo que gire 360 grados continuamente.
  • .mapachito: La imagen dentro del contenedor realiza una animación de rebote que la hace subir y bajar.

Conclusión

Este enfoque nos permite combinar lo mejor de Next.js para la optimización de imágenes y csspara animaciones personalizadas, sin la necesidad de modificar configuraciones globales como tailwind.config.js. Ahora tienes a Pedro, el meme de TikTok, girando y rebotando en tu página web, demostrando cómo puedes integrar animaciones dinámicas en React con facilidad.

Pedro en acción

A continuación puedes ver el componente Pedro en acción.