🥇 ▷ ¿Qué es el secuestro de desplazamiento?

El secuestro de desplazamiento, a veces simplemente llamado “secuestro de desplazamiento”, ha causado un gran revuelo en el mundo de la usabilidad y el desarrollo web.

Algunos lo llaman una “pesadilla de usabilidad”. Otros piensan que es una excelente manera de crear experiencias únicas e inmersivas. Algunos lo evitan como la peste. Otros lo juran.

Como suele ser el caso, tanto en el diseño como en la vida en general, la verdad se encuentra en algún lugar entre los extremos. Si utiliza el secuestro de desplazamiento de forma incorrecta, puede frustrar y molestar a sus usuarios. Hoy comenzaremos desde cero: hablaremos sobre qué es el secuestro de desplazamiento, cómo implementarlo y algunas cosas clave a tener en cuenta.

El secuestro de desplazamiento es cuando tomas el control del comportamiento de desplazamiento normal de un sitio web y haces que haga algo inesperado.

Esto podría significar (para nombrar solo algunos ejemplos):

¿Por qué la controversia?

Para comprender por qué esto es controvertido, debemos comprender algunos conceptos básicos de usabilidad.

Para que un sitio web se considere “fácil de usar” o “intuitivo” (esto también se aplica a cualquier tecnología, dispositivo, electrodoméstico… cualquier cosa que use la gente), tiene que aprovechar las convenciones. En otras palabras, tiene que funcionar como esperamos que funcione.

Tome esas puertas batientes internas que encontrará en cualquier edificio de oficinas. Ya sabes, los que se cierran solos. Si esas puertas solo se abren de una manera, es mejor poner una manija en el lado de ‘tirar’ y solo un panel en el lado de ’empujar’. El propósito de una manija es que pueda agarrar y jalar la puerta; si la puerta no se puede jalar desde ese lado, entonces no tiene sentido que haya una manija allí. Terminarás con situaciones como esta:

El mismo principio se aplica a la usabilidad web: los elementos deben comportarse de la forma en que la gente espera que lo hagan. Debes poder hacer clic en las cosas que parecen enlaces. El video incrustado debe comenzar y detenerse al hacer clic. Y el desplazamiento debería permitir al usuario controlar cómo se mueve por el sitio de una manera predecible.

Ahora, eso no significa que nunca debas usar el secuestro de desplazamiento. De hecho, a algunas de las marcas más importantes del mundo, incluida Apple, centrada en el diseño, les gusta bastante. Solo debe asegurarse de que se agregue a la experiencia del usuario, en lugar de restarle valor. Repasemos un par de casos de uso para el secuestro de desplazamiento y discutamos algunos de los problemas relacionados.

¿Alguna vez ha aterrizado en un sitio web, comenzó a desplazarse y, en lugar de moverse hacia abajo por el contenido, ve una animación?

de manzana Página de AirPods es un gran ejemplo. A medida que te desplazas, la luz se precipita alrededor de los elegantes y curvilíneos AirPods. Te desplazas más, y la pantalla se oscurece… un poco más, y aparece una copia de ventas. Aunque técnicamente sigues desplazándote hacia abajo en la página, no se siente así.

Se siente como si estuvieras controlando la animación que se está reproduciendo frente a ti.

Esto es algo en lo que debe pensar cuidadosamente antes de emplearlo. El desplazamiento, por convención, es un poder que los usuarios tienen sobre un sitio web. Si quitas ese poder, se siente como una pérdida de control. Además, muchos usuarios son escáneres: no quieren sumergirse en su narrativa, solo quieren obtener las funciones clave del producto y seguir adelante.

Pero si decide seguir adelante con este método de secuestro de desplazamiento, ¿cómo lo haría? Bueno, en esencia, el método básico es bastante simple:

Averiguar a dónde se ha desplazado el usuario
Use JS para actualizar el CSS de un elemento en función de ese posicionamiento

Aquí hay un ejemplo simple:

ver la pluma
en CódigoPen.

Y aquí está cómo hacerlo…

En este ejemplo, solo tengo dos elementos: la barra que se desplaza de izquierda a derecha y el texto que se desvanece después:

<div class="container">
<div id="scroll-animation">
<div id="scroll-bar"></div>
</div>
<div id="message-animation">
<div id="message-text">
Scroll Different.
</div>
</div>
</div>

Entonces, para cada animación, tendría un contenedor separado. Tengo dos animaciones, por lo que mis contenedores son: animación de desplazamiento y animación de mensajes. Usaremos estos elementos para averiguar qué tan abajo se ha desplazado el usuario, y la altura de ellos determina cuánto tiempo tomará esa animación; si desea una animación más larga, simplemente haga que los contenedores sean más grandes. Los elementos dentro son las cosas que realmente animaremos.

Y el CSS para estos es:

#scroll-animation {
height: 1000px;
position: relative;
}


	
  



	
  



#scroll-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #B0A3D4;
z-index: 1;
}
#message-animation {
width: 100%;
height: 500px; 
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
#message-text {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
z-index: 2;
opacity: 0;
}

Nada demasiado loco aquí: lo más importante es que configuré los elementos que estamos animando en una posición: fija, lo que los mantiene en la pantalla mientras el usuario se desplaza hacia abajo.

Primero almacenemos nuestros elementos en variables JS:

let scrollAnimation = document.getElementById("scroll-animation");
let scrollBar = document.getElementById("scroll-bar");
let messageAnimation = document.getElementById("message-animation");
let messageText = document.getElementById("message-text");

Luego, averigüemos hacia dónde se ha desplazado el usuario. La siguiente función devolverá qué tan abajo se ha desplazado el usuario en un elemento en particular, como un porcentaje:

function getPercentageScrolled(element) {
let distanceScrolled = window.scrollY - element.offsetTop;
let percentageScrolled = Math.round(distanceScrolled / (element.offsetHeight / 100));
return Math.min(100, Math.max(0, percentageScrolled));
}

Esto funciona porque window.scrollY le dice cuántos píxeles hacia abajo en la página se ha desplazado el usuario, y element.offsetTop devuelve la distancia entre la parte superior del elemento (incluido el relleno y los bordes, pero sin incluir el margen) y la parte superior de su elemento principal. Al restar offsetTop de scrollY, por lo tanto, nos dice qué tan abajo en el elemento se ha desplazado el usuario, en píxeles.

Una vez que tengamos esto, podemos desplazar el porcentaje dividiéndolo por la altura del elemento / 100, que es lo que hace la segunda línea.

La línea de retorno asegura que estamos devolviendo un valor entre 0 y 100.

3) Actualice la animación según la distancia de desplazamiento

Entonces solo es cuestión de usar JS para animar sus elementos de acuerdo a cuánto se ha desplazado el usuario. Entonces, solo escuchamos un evento de desplazamiento y ejecutamos una función si detectamos uno:

document.onscroll = function() { 
scrollBar.style.width = getPercentageScrolled(scrollAnimation) + '%';
messageText.style.opacity = (getPercentageScrolled(messageAnimation) / 100);
}

Cuando pasamos getPercentageScrolled() un elemento en particular, nos dice cuánto nos hemos desplazado más allá de ese elemento, como un porcentaje. Podemos usar eso para cambiar la propiedad CSS de otro elemento.

En mi ejemplo anterior, la barra de desplazamiento es simple: simplemente establecemos su ancho en el valor devuelto por getPercentageScrolled(). Cuando el usuario haya recorrido el 100 % del recorrido del elemento, el ancho de la barra de desplazamiento también será del 100 %. Fácil.

Para hacer que el texto se desvanezca, hacemos algo similar con la opacidad, excepto que aquí tenemos que dividir el porcentaje desplazado por 100, ya que la propiedad de opacidad toma un valor de 0 a 1, no de 0 a 100.

Puede actualizar cualquier propiedad CSS que desee de esta manera. Las animaciones de desplazamiento avanzadas como los AirPods de Apple son mucho más impresionantes que esta pequeña demostración, pero funcionan según el mismo principio: detectan hasta dónde se ha desplazado el usuario y actualizan CSS en consecuencia.

Aunque leemos libros y revistas horizontalmente, el desplazamiento horizontal nunca se popularizó en el mundo digital. Pero puedes implementarlo con CSS puro si quieres:

ver la pluma
en CódigoPen.

Simplemente configure un elemento contenedor y un elemento interno para contener su contenido:

<div class="horizontal-wrapper">
<div class="horizontal-content">
</div>
</div>

Y luego usa el siguiente CSS:

.horizontal-wrapper {
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
}.horizontal-content {
height: 100%;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}

Esto crea la esencia de un sitio de desplazamiento horizontal. Luego puede llenar el elemento interno con el contenido que desee.

Entonces, este tipo de secuestro de desplazamiento es bastante fácil de configurar, pero ¿debería hacerlo? Probablemente hay algunas situaciones en las que es posible que desee. El desplazamiento horizontal es probablemente más aceptable si se espera que su marca sea única, creativa y quizás un poco extraña (como un estudio de arte, por ejemplo). O tal vez esté solicitando trabajo en la industria de los juegos y desee configurar un CV en línea al estilo de un videojuego de desplazamiento lateral. Eso también sería apropiado.

Pero a excepción de estos casos de uso bastante raros, probablemente desaconsejaría esto. El desplazamiento horizontal se usa con mayor eficacia dentro de los elementos, como parte de un diseño de desplazamiento vertical más grande (como Netflix, por ejemplo).

Sin embargo, en estos casos, recomendaría no configurar los elementos de desplazamiento lateral como se muestra arriba, porque entonces la rueda de desplazamiento de su usuario hará cosas diferentes según el elemento sobre el que se esté desplazando.

Puede ser frustrante si intenta desplazarse hacia abajo en un sitio y, de repente, un elemento secundario comienza a desplazarse horizontalmente. Incluso podría quedarse atascado, incapaz de desplazarse más sin usar la barra de desplazamiento, así:

ver la pluma
en CódigoPen.

El ejemplo anterior se usa mejor para todo el sitio, o cuando los elementos no ocupan mucho espacio verticalmente en la ventana gráfica.

Entonces, ahora que ha aprendido algunos métodos de secuestro de desplazamiento, ¿debería usarlo?

Piense con cuidado y asegúrese de que es lo que necesita. Si lo hace bien, puede hacer algo divertido y único, que lo diferencie de su competencia y muestre su marca. Pero si te equivocas, puedes crear una experiencia muy frustrante para tus visitantes. Algunas preguntas clave que debe hacerse son:

¿Estás buscando estilo sobre sustancia? En otras palabras, ¿solo está buscando formas de lucir llamativo, con la esperanza de que sus visitantes queden impresionados? Si es así, le recomiendo que primero se concentre en transmitir bien su mensaje. Pero si lucir llamativo es tu objetivo número 1, ¡adelante!
¿Le quitará demasiado control al usuario? ¿Será difícil para ellos volver a la parte superior de la página, por ejemplo? Si está secuestrando por completo el comportamiento de desplazamiento, asegúrese de tener otros medios de navegación disponibles.
¿Podría usar el secuestro de desplazamiento en algunos elementos de la página, en lugar de en toda la página? Esto podría permitirle obtener el impacto que desea, sin eliminar el comportamiento de desplazamiento que los usuarios conocen y adoran.
¿Ralentizará su sitio?

Como dije anteriormente, hay algunas situaciones en las que el secuestro de desplazamiento puede funcionar muy bien, y un ejemplo son los sitios web de página completa. Estos se dividen en varios segmentos de página completa, y al desplazarse hacia abajo con el mouse o deslizar el dedo en el panel táctil, se lo lleva a la página siguiente.

Lo mejor del diseño de página completa es que evita muchas de las cosas que la gente odia sobre el secuestro de desplazamiento. El usuario mantiene el control: puede desplazarse de una página a otra con la rapidez y la facilidad que desee. El contenido aún se puede escanear: puede desplazarse y encontrar la información que está buscando sin tener que pasar por un montón de animaciones. Y se integra perfectamente con elementos de desplazamiento horizontal como los controles deslizantes.

Y si esto suena como lo que está buscando, querrá probar fullPage.js. Es la biblioteca JS líder para sitios de página completa y es utilizada por grandes marcas como Google, Sony, EA y eBay. fullPage es fácil de configurar, no ralentizará su sitio y es altamente personalizable con una variedad de transiciones y efectos que puede usar. ¡Échale un vistazo!