La navegación es un requisito fundamental en muchas aplicaciones, ya sea una aplicación web o móvil. Las empresas tienden a poner mucho esfuerzo y tiempo para ser únicas o para destacarse de la competencia y esto se extiende a sus páginas de destino. Una barra lateral de navegación basada en viñetas es uno de los pocos métodos extravagantes para hacerlo.
Comprender el efecto
El componente principal de este efecto es la barra lateral que se fija al lado izquierdo o derecho de la ventana gráfica, preferiblemente hacia el centro para atraer la mayor parte de la atención del usuario. Cuando se interactúa con este componente, debe permitir a los usuarios navegar por la página. También es importante que el salto sea lo más suave posible, para lo que utilizaremos el concepto de desplazamiento suave.
Configurando el HTML
Por el bien de este tutorial, tendremos 3 secciones que ocuparán toda la altura de la ventana gráfica, cada una de ellas tendrá un atributo de identificación que nos ayudará a navegar entre las secciones y agregaremos algunos encabezados en el ellos, pero puede reemplazar los encabezados con lo que desee.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sidebar navigation</title>
</head>
<body>
<main>
<section id="first">
<h1>Hello</h1>
</section>
<section id="second">
<h1>How are you?</h1>
</section>
<section id="third">
<h1>Goodbye!</h1>
</section>
</main>
</body>
</html>
A continuación, configuraremos la barra lateral y usaremos la etiqueta HTML semántica a un lado que contendrá una lista desordenada que contendrá una etiqueta de anclaje en cada elemento de la lista. Para simplificar las cosas, usaremos un montón de cÃrculos pequeños, pero literalmente puedes poner cualquier cosa dentro de las etiquetas a, ¡y puedes darle el estilo que quieras!
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<aside>
<ul>
<li>
<a class="indicator active" href="#first"></a>
</li>
<li>
<a class="indicator" href="#second"></a>
</li>
<li>
<a class="indicator" href="#third"></a>
</li>
</ul>
</aside>
</main>
</body>
</html>
¡Estiliza las cosas!
Los estilos unirán muy bien nuestro marcado y lógica. En primer lugar, habilitamos el desplazamiento suave mediante la propiedad scroll-behavior.
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}Ahora diseñamos el elemento aparte. Tenemos que asegurarnos de que la barra lateral sea accesible para el usuario sin importar en qué sección se encuentre, especialmente si la barra de desplazamiento se ha desactivado. position: fixed combinado con top: 50% puede lograr un cierto grado de esto, pero necesitamos usar transform para asegurarnos de que el lado esté al 50% desde la parte superior de la ventana gráfica.
La clase de indicador convertirá la etiqueta de anclaje ordinaria en un cÃrculo blanco con una altura y un ancho de 15 px. Debido a que la clase activa aumenta la escala de estos puntos blancos, nos aseguramos de que la lista desordenada siempre esté alineada correctamente usando flexbox.
aside {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
}
aside ul {
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
margin: 0;
}
aside ul li .indicator {
cursor: pointer;
margin-top: 1rem;
display: block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: white;
}
aside ul li .active {
transform: scale(1.7);
transition: transform 200ms ease-in-out;
}A continuación, hacemos que cada sección tome la altura de la ventana gráfica y le damos a cada sección par e impar un color de fondo diferente. ¡Muchos potenciales para hacer un estilo creativo aquÃ!
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(odd) {
background-color: #ffcc33;
}
section:nth-child(even) {
background-color: #ffb347;
}
section h1 {
margin: 0;
font-family: sans-serif;
font-size: 4rem;
color: white;
}Destacando el enlace activo
¿Recuerdas la clase activa de antes? La función estilÃstica era ayudar a los usuarios a identificar cuál de las etiquetas de anclaje está asignada a la sección actual. Ahora debemos asegurarnos de que el estilo se aplique a la etiqueta de anclaje correcta. Para hacer esto, obtenga una lista de todas las etiquetas de anclaje con la clase de indicador, luego itere la lista cada vez que aplique un detector de eventos de clic.
Este oyente primero llamará a resetIndicators para eliminar la clase activa de todas las etiquetas de anclaje con la clase de indicador y luego agregará la clase activa de manera segura.
const indicators = document.querySelectorAll('a.indicator');
const resetCurrentActiveIndicator = () => {
const activeIndicator = document.querySelector(".active");
activeIndicator.classList.remove("active");
};
indicators.forEach((indicator) => {
indicator.addEventListener('click', function () {
resetCurrentActiveIndicator();
this.classList.add('active');
});
});Si acaba de probar el código tal como está ahora, es posible que haya notado la incomodidad que sintió cuando se desplazó con la barra de desplazamiento y los indicadores no se activaron. Para ello, podemos hacer uso de la IntersecciónObservador API. La clase IntersectionObserver acepta 2 argumentos. El primero es una devolución de llamada y el segundo es un objeto de opciones que se puede usar para configurar el comportamiento del observador. La devolución de llamada se llamará siempre que se cumplan las condiciones descritas en el objeto de opciones. Por el bien de este tutorial, la única propiedad del objeto de opciones que importa es el umbral.
La propiedad de umbral se puede establecer en un valor o una matriz, describe en qué porcentaje de la visibilidad del elemento observado en la ventana gráfica debe activarse la función de devolución de llamada. La función onSectionLeavesViewport crea una instancia de IntersectionObserver que toma una función que contiene la lógica que activará el indicador respectivo. Esta función en particular recibe como entrada una matriz de entradas de objetos, cada objeto contiene información sobre cosas como si está ocurriendo una intersección o no.
Finalmente, para hacer que IntersectionObserver apunte a un elemento, llamaremos al método observe() en el observador, que es una referencia a la instancia de IntersectionObserver.
Cuando aproximadamente el 75 % (umbral de 0,75) del elemento observado (una sección) haya salido de la ventana gráfica, se llamará a la devolución de llamada, y aquà es cuando restableceremos el indicador activo y encontraremos el indicador que debe activarse y luego lo activaremos. . Si desea cambiar cuándo se llama a la devolución de llamada, debe modificar el valor del umbral.
const sections = document.querySelectorAll("section");const onSectionLeavesViewport = (section) => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
resetCurrentActiveIndicator();
const element = entry.target;
const indicator = document.querySelector(`a[href="#${element.id}"]`);
indicator.classList.add("active");
return;
}
});
},
{
root: null,
rootMargin: "0px",
threshold: 0.75
}
);
observer.observe(section);
};
sections.forEach(onSectionLeavesViewport);
Agregar una alternativa para navegadores antiguos
Desafortunadamente, algunos de los navegadores más antiguos no son compatibles con comportamiento de desplazamiento Propiedad CSS. Como tal, si desea admitir navegadores más antiguos, podemos utilizar el método scrollIntoView. Lo que sucede aquà es que obtenemos el elemento con el atributo href que tiene el elemento actual (que es una identificación) y luego llamamos al método en él.
Este no es un método 100% sólido para admitir navegadores antiguos, scrollIntoViewOptions por ejemplo, no es compatible con los navegadores IE antiguos, pero las únicas otras alternativas son usar una biblioteca externa para un desplazamiento suave, agregando un polirellenoo haciendo el bit de desplazamiento suave usted mismo.
indicators.forEach((indicator) => {
indicator.addEventListener('click', function () {
document
.querySelector(this.getAttribute('href'))
.scrollIntoView({ behavior: 'smooth' });
});
});
¡Eche un vistazo al siguiente codepen y vea si todo funciona como se esperaba! También puede ser un buen enlace de referencia, por lo que podrÃa marcarlo como favorito para más adelante.
ver la pluma
en CódigoPen.
Si está interesado en efectos como este y más, deberÃa echar un vistazo a fullPage. Es una biblioteca JS que se encarga de muchas de las partes complicadas (como la compatibilidad con el navegador) y proporciona un conjunto más completo de caracterÃsticas como modos receptivos, extensiones, clases condicionales CSS, devoluciones de llamada, etc., lo que la hace ideal para aplicaciones que ir más allá del simple efecto que echamos un vistazo.
