Split Landing Page. "Página de aterrizaje dividida."
En este ejercicio, crearemos una página de aterrizaje dividida en dos secciones que cambian de tamaño al pasar el ratón sobre ellas, proporcionando una experiencia interactiva y visualmente atractiva. Este diseño puede ser útil para mostrar dos productos o servicios diferentes, cada uno con su propio estilo y contenido.
¿Qué hace?
- Al pasar el ratón sobre la sección izquierda, esta se expande mientras que la sección derecha se contrae.
- Al pasar el ratón sobre la sección derecha, esta se expande mientras que la sección izquierda se contrae.
- La animación crea una transición suave y atractiva entre los estados de expansión y contracción.
¿Cómo se realiza?
El código completo lo puede encontrar en: Repositorio GitHub de Brad Traversy https://github.com/bradtraversy/50projects50days/tree/master/split-landing-page, a continuación te mostramos lo mas relevante de cada sección resumida y te explicamos su funcionalidad.
HTML.
- <div class="container">: Este contenedor agrupa las dos secciones de la página, permitiendo aplicar estilos y comportamientos de manera conjunta.
- <div class="split left"> y <div class="split right">: Estas divisiones representan las dos mitades de la página. Cada una contiene un título (<h1>) y un botón (<a>).
CSS.
- Transiciones:
transition: all var(--speed) ease-in-out;: Esta propiedad está en .split y sus pseudo-elementos (::before). Especifica la duración (1000ms) y la función de tiempo (ease-in-out) para la transición entre los estados. - Transformaciones:
.hover-left .left y .hover-right .right: Estas clases se añaden cuando el ratón pasa sobre las respectivas secciones, ajustando su ancho para crear el efecto de expansión y contracción.
JavaScript.
Selección de elementos:
- const left = document.querySelector('.left'): Selecciona el elemento HTML con la clase left.
- const right = document.querySelector('.right'): Selecciona el elemento HTML con la clase right.
- const container = document.querySelector('.container'): Selecciona el elemento HTML con la clase container.
Manejo de eventos
- left.addEventListener('mouseenter', () => container.classList.add('hover-left')): Agrega un event listener al elemento left para detectar cuando el mouse entra en el área del elemento, añadiendo la clase hover-left al contenedor principal.
- left.addEventListener('mouseleave', () => container.classList.remove('hover-left')): Agrega un event listener al elemento left para detectar cuando el mouse sale del área del elemento, removiendo la clase hover-left del contenedor principal.
- right.addEventListener('mouseenter', () => container.classList.add('hover-right')): Agrega un event listener al elemento right para detectar cuando el mouse entra en el área del elemento, añadiendo la clase hover-right al contenedor principal.
- right.addEventListener('mouseleave', () => container.classList.remove('hover-right')): Agrega un event listener al elemento right para detectar cuando el mouse sale del área del elemento, removiendo la clase hover-right del contenedor principal.
Recuerda que este ejercicio pertenece al repositorio:
50 proyectos en 50 días: https://github.com/bradtraversy/50projects50days
Ejercicio 7 Split landing page