Introducción a Animaciones CSS y JavaScript para Texto Inclinado

Algo de Código

[Texto Inclinado] - [Slanted Text] <transform CSS> <rotate JS>

Introducción

En el mundo del desarrollo web, las animaciones juegan un papel crucial para mejorar la experiencia del usuario y hacer que los sitios web sean más atractivos visualmente. En este artículo, exploraremos cómo crear una animación simple pero efectiva utilizando CSS y JavaScript para inclinar texto en una página web. Vamos a desglosar el código paso a paso y comprender los conceptos detrás de esta animación.

Póster de programación

HTML: Estructura del Documento

En primer lugar, necesitamos definir la estructura básica de nuestro documento HTML. Utilizaremos un artículo (<article>) dentro de un contenedor centralizado (<div class="center">) para nuestro texto inclinado. También agregaremos un ID (id="animatedText") al artículo para identificarlo fácilmente desde JavaScript.

<div class="center">

    <article id="animatedText" class="transform">

        <b>@Jorgedipra</b>

        <br><span class="italic">texto inclinado</span>

    </article>

</div>

 

CSS: Estilo y Transformación

Luego, aplicamos estilos CSS para dar formato al texto y definir la transformación de inclinación. Es importante establecer transform-origin: left top; para que el elemento gire desde su esquina superior izquierda.

body {

    background: url(/imagenes/fondos/fondoA.jpg?raw=true) center fixed;

    height: 100vh; /* Usa vh en lugar de % para un mejor manejo de la altura */

    width: 100vw; /* Usa vw en lugar de % para un mejor manejo del ancho */

    margin: 0; /* Asegúrate de que no haya margen adicional */

    padding: 0; /* Asegúrate de que no haya relleno adicional */

}

.center {

    display: flex; /* Usa flexbox para centrar el contenido verticalmente */

    justify-content: center; /* Centra horizontalmente */

    align-items: center; /* Centra verticalmente */

    height: 100%; /* Ocupa toda la altura del cuerpo */

}

.transform {

    width: 200px;

    font-size: 35px;

    transform: rotate(30deg);

    transform-origin: left top; /* Define el punto de origen de la transformación */

}

.italic {

    font-style: italic; /* Agrega estilo cursiva al texto inclinado */

}

 

JavaScript: Animación de Rotación

Ahora viene la parte divertida: usando JavaScript para animar nuestro texto inclinado. Creamos una función llamada animateText() que gradualmente incrementa el ángulo de rotación del texto. Utilizamos setInterval() para ejecutar esta función repetidamente cada segundo.

// Función para animar el texto inclinado

function animateText() {

    var angle = 0;

    var textElement = document.getElementById('animatedText');

   

    // Animación cada 1 segundo

    setInterval(function() {

        angle += 10; // Incrementa el ángulo de rotación

        textElement.style

        .transform = 'rotate(' + angle + 'deg)'; // Aplica la rotación al elemento

    }, 1000);

}

// Llama a la función para iniciar la animación

animateText();

 

En resumen, hemos creado una animación de texto inclinado utilizando CSS para aplicar estilos y JavaScript para controlar la animación. Este ejemplo demuestra cómo combinar estas tecnologías para agregar interactividad y dinamismo a un sitio web. ¡Experimenta con diferentes valores y propiedades para crear tus propias animaciones personalizadas y llevar tus proyectos web al siguiente nivel!

Código Resultante: 

See the Pen [Texto Inclinado] - [Slanted Text] <transform CSS> <rotate JS> by jorgedipra (@jorgedipra) on CodePen.