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!