UX//UI

Explicación del Efecto de Escalado SVG al Hacer Scroll

El efecto de escalado del SVG al hacer scroll y la aparición de una sección de texto se logra utilizando HTML, CSS y JavaScript.
A continuación, se detallan los pasos realizados para crear este efecto:

Estructura HTML

Se define un contenedor para el logo SVG de Apple y otra sección para los textos.
El contenedor del SVG se posiciona en el centro de la pantalla, mientras que la sección de texto se coloca justo debajo del contenedor del SVG, inicialmente oculta.

Estilos CSS

CSS se utiliza para centrar el logo SVG y aplicar una transición suave al escalado.
La sección de texto está inicialmente oculta mediante una transformación que la desplaza hacia abajo y una opacidad de 0. Cuando se agrega la clase 'visible', la sección de texto se desliza hacia arriba y se hace visible.

JavaScript

Escuchamos el evento de scroll de la ventana para controlar el escalado del logo SVG y la visibilidad de la sección de texto.
A medida que el usuario hace scroll, el tamaño del SVG aumenta linealmente de 1 a 3 veces su tamaño original. Al mismo tiempo, cuando el scroll supera la mitad de la altura de la ventana, la sección de texto se muestra añadiendo la clase 'visible', que aplica la transformación y opacidad necesarias para hacerla visible.

Gracias por la confianza!

COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan

Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Explora las Razas en el Juego Lineage 2: Un Análisis Detallado

COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

🔍 Analiza tu web con Inteligencia Artificial – Gratis y al instante

¿Tu sitio está optimizado? Descúbrelo en segundos con nuestra herramienta de IA y recibe un informe de UX
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Domina el Arte del CSS para Transformar tus Proyectos Web

COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

CV Andrés

Desarrollo webs que cargan rápido y venden mejor. Logística mental de 7 a 3, WordPress ninja de 3 a 9. Si hay API, hay camino.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

The quiet shame of vibecoding

THANK YOU for the feedback, the ideas and the honesty. Building an AI SaaS in public.