Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Crear el Carrusel Perfecto, Parte 1

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Create the Perfect Carousel.
Create the Perfect Carousel, Part 2

Spanish (Español) translation by James (you can also view the original English article)

Carruseles son un elemento básico de los sitios de streaming y e-commerce. Amazon y Netflix utilizan como herramientas de navegación prominentes. En este tutorial, a evaluar el diseño de la interacción de ambos y utilizar los resultados para implementar el carrusel perfecto.

En esta serie de tutoriales, vamos a también aprender algunas funciones de Popmotion, un motor de JavaScript de movimiento. Ofrece herramientas de animación como interpolaciones (útiles para la paginación), puntero (para desplazarse) y física de primavera (a nuestros preciosos acabados.)

Parte 1 evaluará cómo Amazon y Netflix han implementado desplazamiento. Entonces a implementar un carrusel que puede desplazar a través del tacto.

Al final de esta serie, se habrá implementado rueda y touchpad scroll, paginación, barras de progreso, navegación mediante el teclado y algunos pequeños detalles con resorte física. Que también habrán sido expuestos algunos composición funcional básica.

¿Perfecto?

¿Qué necesita para que un carrusel ser "perfecto"? Tiene que ser accesible:

  • Ratón: Deben ofrecer los botones anteriores y siguientes que son fáciles de hacer clic y no ocultar contenido.
  • Táctil: Debe seguir el dedo y luego desplazarse con el mismo ímpetu como cuando levanta el dedo de la pantalla.
  • Rueda de Desplazamiento: a menudo pasado por alto, el Magic Mouse de Apple y muchos trackpads portátil ofrecer desplazamiento horizontal lisa. Debemos aprovechar esas capacidades.
  • Teclado: Muchos usuarios no deseen o no puede utilizar un ratón para la navegación. Es importante que hacer nuestro Carrusel accesible para que los usuarios pueden utilizar nuestro producto también.

Finalmente, cosas de tomar ese paso extra más y hacen de este un pedazo de UX seguro, encantador haciendo el carrusel responder claramente y visceralmente con la física de primavera cuando el cursor ha llegado al final.

Programa de instalación

En primer lugar, vamos a obtener el HTML y CSS necesarios para construir un carrusel rudimentario por bifurcar este CodePen.

La pluma se configura con Sass para preprocesamiento CSS y Babel de transpiling ES6 JavaScript. También he incluido Popmotion, que se puede acceder con window.popmotion.

Puede copiar el código en un proyecto local si lo prefiere, pero tendrá que asegurar que su entorno apoya Sass y ES6. Usted también tendrá que instalar Popmotion con npm instalar popmotion.

Creación de un Nuevo Carrusel

En cualquier página, tengamos muchos carruseles. Así que necesitamos un método para encapsular el estado y la funcionalidad de cada uno.

Voy a utilizar una función de fábrica en lugar de una class. Funciones de fábrica evitar la necesidad de usar a menudo confundiendo esta clave y va a simplificar el código para los propósitos de este tutorial.

En su editor de JavaScript, añadir esta función simple:

Se va añadiendo nuestro código carrusel específico dentro de esta función de carrusel.

Los Cómos y Porqués de Desplazamiento

Nuestra primera tarea es hacer el rollo de carrusel. Hay dos maneras que podíamos ir sobre esto:

Navegador Nativo de Desplazamiento

La solución obvia sería configurar overflow-x: scroll en el control deslizante. Esto permitiría nativa desplazamiento en todos los navegadores, incluyendo el touch y los dispositivos de rueda horizontal del ratón.

Sin embargo, existen desventajas de este enfoque:

  • Contenido fuera de los contenedores no sería visible, que puede ser restrictivo para nuestro diseño.
  • También limita las formas que podemos usar animaciones para indicar que hemos llegado al final.
  • Navegadores de escritorio tendrán una barra de desplazamiento horizontal (aunque accesible!) feo.

Como alternativa:

Animar translateX

También podríamos animar propiedad translateX de carousel. Esto sería muy versátil ya que sería capaces de aplicar exactamente el diseño que nos gusta. translateX también es muy eficaz, a diferencia de la CSS left característica puede ser manejada por GPU el dispositivo.

En el lado negativo, tendríamos que implementar funcionalidad desplazable mediante JavaScript. Eso es más trabajo, más código.

¿Amazon y Netflix Enfoque Desplazamiento?

Carruseles de Amazon y Netflix hacen diferentes ventajas y desventajas en el abordaje de este problema.

Amazon anima la propiedad left de carousel en modo "desktop". Animación left es una opción muy pobre, como cambio desencadena una actualización de diseño. Esto es CPU-intensivo, y máquinas más viejas tendrán dificultades para golpear 60fps.

Quien tomó la decisión de animar left en vez de translateX debe ser un verdadero idiota (spoiler: era yo, en el 2012. No éramos tan iluminadas en esos días.)

Cuando se detecta un dispositivo táctil, el carrusel utiliza el navegador nativo de desplazamiento. El problema con sólo habilitar esto en modo "mobile" es usuarios escritorio con desplazamiento horizontal de las ruedas pierda. También significa que cualquier contenido fuera el carrusel tendrá que cortarse visualmente:

Screenshot of Amazon illustrating lack of design bleed

Netflix anima correctamente propiedad translateX de carrusel, y así sucesivamente todos los dispositivos. Esto les permite tener un diseño que sangra fuera del carrusel:

Screenshot of Netflix carousel illustrating design bleed

Esto, a su vez, les permite hacer un diseño de lujo donde se agrandan elementos fuera de la x y y bordes de carrusel y los elementos circundantes salir de su camino:

Screenshot of Netflix carousel illustrating enlarged item

Desafortunadamente, la reimplementación de Netflix de desplazamiento para dispositivos táctiles es insatisfactorio: utiliza un sistema de paginación basadas en gestos que se siente lento y engorroso. También no hay ninguna consideración para las ruedas de desplazamiento horizontal.

Nosotros podemos hacer mejor. ¡Código!

Desplazamiento Como un Profesional

Nuestro primer paso es tomar el nodo .slider. Mientras estamos en ello, vamos a tomar los elementos que contiene por lo que podemos averiguar de dimensión de la barra deslizante.

Midiendo el Carrusel

Podemos averiguar el área visible de la botella por su anchura:

También te queremos el ancho total de todos los artículos contenidos dentro. Para mantener nuestra función carrusel relativamente limpio, vamos a pone este cálculo en una función aparte en la parte superior de nuestro archivo.

Mediante el uso de getBoundingClientRect para medir el desplazamiento left de nuestro primer elemento y el desplazamiento right de nuestro artículo pasado, podemos utilizar la diferencia entre ellos para encontrar el ancho total de todos los elementos.

Después de nuestra medición de sliderVisibleWidth, escriba:

Nosotros podemos ahora averiguar la distancia máxima que nuestro Carrusel debe poder desplazarse. Es el ancho total de todos nuestros artículos, menos un ancho total de nuestro cursor visible. Esto proporciona un número que permite el artículo más a la derecha para alinearse con la derecha de nuestra barra deslizante:

Con estas medidas en el lugar, ya estamos listos para empezar nuestro carrusel de desplazamiento.

Ajuste translateX

Popmotion viene con un procesador CSS para el simple y eficaz ajuste de propiedades de CSS. También viene con una función de valor que puede utilizarse para rastrear los números y lo importante (como pronto veremos), para consultar su velocidad.

En la parte superior del archivo JavaScript, importarlos como tal:

Entonces, en la línea después de que minXOffset, crear a un renderizador CSS para nuestro slider:

Y crear un valor para pista desplazamiento de x de nuestro deslizador y actualice translateX propiedad el control de deslizante cuando cambia:

Ahora, mueve el control deslizante horizontal es tan sencillo como escribir:

¡Pruébalo!

Desplazamiento Táctil

Queremos que nuestro carrusel para iniciar desplazamiento cuando un usuario arrastra el control deslizante horizontal y detener el desplazamiento cuando un usuario deja de tocar la pantalla. Nuestros controladores de eventos se ven así:

En nuestra función de startTouchScroll, queremos:

  • Detener cualquier otra acción alimentación sliderX.
  • Encontrar el punto de contacto de origen.
  • Escuchar el próximo evento touchmove para ver si el usuario está arrastrando verticalmente u horizontalmente.

Después de document.addEventListener, añadir:

Esto detendrá cualquier otras acciones (como el rollo de impulso de energía física que lo implementamos en stopTouchScroll) mueva el control deslizante. Esto permitirá al usuario inmediatamente "atrapar" el regulador si se desplaza más allá de un artículo o título que quieren que haga clic en.

A continuación, tenemos que almacenar el punto de contacto de origen. Que nos permite ver donde el usuario mueve el dedo siguiente. Si se trata de un movimiento vertical, nos permitirán el desplazamiento de la página como de costumbre. Si se trata de un movimiento horizontal, a desplazarse el cursor en su lugar.

Queremos compartir este touchOrigin entre los controladores de eventos. Así que después de let action; Añadir:

En nuestro controlador de startTouchScroll, añadir:

Ahora podemos añadir un Escuchador de evento touchmove al documento para determinar la dirección de arrastre basada en este touchOrigin:

Nuestra función de determineDragDirection va a medir la próxima ubicación de toque, comprobar que realmente ha pasado y, si es así, medir el ángulo para determinar si es vertical u horizontal:

Popmotion incluye unas calculadoras útiles para medir cosas como la distancia entre dos x y coordenadas. Podemos importarlos como esta:

Luego medir la distancia entre dos puntos es una cuestión de usar la calculadora de distancia:

Ahora si se ha movido al tacto, podemos desactivar este detector de eventos.

Medir el ángulo entre los dos puntos con la calculadora de ángulo:

Podemos utilizar esto para determinar si este ángulo es un ángulo horizontal o vertical, al pasar a la siguiente función. Añadir esta función a la parte superior de nuestro archivo:

Esta función devuelve true si el ángulo siempre es en -90 +-45 grados (hacia arriba) o 90 +-45 grados (hacia abajo). Así que podemos agregar otra cláusula de retorno si esta función devuelve true.

Indicador de Seguimiento

Ahora sabemos que el usuario está tratando de desplazar el carrusel, podemos comenzar su dedo de seguimiento. Popmotion ofrece una acción de puntero que es la salida de la x / y coordenadas del puntero del ratón o touch.

Primero, importación de pointer:

Para el seguimiento de la entrada táctil, proporcionar el evento originando a pointer:

Queremos medir la posición x inicial de nuestro puntero y aplicar cualquier movimiento a la barra deslizante. Para ello, podemos utilizar un transformador llamado applyOffset.

Los transformadores son puras funciones que toman un valor y devolución — sí — transformado. Por ejemplo: const double = (v) => v * 2.

applyOffset es una función con curry. Esto significa que cuando lo llamamos, se crea una nueva función que puede pasar un valor. Primero lo llamamos con un número que queremos medir el desplazamiento, en este caso el valor actual de action.x y aplicar esa compensación a. En este caso, es nuestro sliderX.

Así que nuestra función applyOffset tendrá el siguiente aspecto:

Ahora podemos utilizar esta función de devolución de llamada de salida del puntero para aplicar el movimiento del puntero en la barra deslizante.

Parada, Con Estilo

El carrusel ahora es arrastrable por el tacto. Puede probar esto mediante emulación de dispositivos en herramientas para desarrolladores de Chrome.

¿Se siente un poco janky, correcto? Usted puede han encontrado desplazamiento que se siente como antes: Levante el dedo, y el desplazamiento se detiene muerto. O los muertos de paradas de desplazamiento y luego una pequeña animación asume el control para una continuación del desplazamiento.

No vamos a hacer eso. Podemos utilizar la acción física en Popmotion para tomar la verdadera velocidad de sliderX y aplicar fricción que sobre un período de tiempo.

En primer lugar, agregarlo a nuestra lista creciente de las importaciones:

Luego, al final de la función stopTouchScroll añade:

Aquí, desde y que velocidad se están estableciendo con el valor actual y la velocidad de sliderX. Esto asegura que nuestra simulación física tiene las mismas condiciones partidas iniciales como movimiento de arrastre del usuario.

la fricción se establece como 0.2. Fricción se establece como un valor de 0 a 1, con 0 no siendo ninguna fricción en todos y siendo absoluta fricción 1. Trate de jugar con este valor para ver el cambio que hace a la "sensación" del carrusel cuando un usuario deja de arrastrar.

Números más pequeños lo harán sentir más ligero, y números más grandes hará que el movimiento más pesado. Para un movimiento de desplazamiento, siento golpes 0,2 un buen balance entre el errático y lento.

Límites

Pero hay un problema! Si usted ha estado jugando con su nuevo carrusel táctil, es obvio. No hemos limitado movimiento, haciendo posible que literalmente tirar tu carrusel!

Hay otro transformador para este trabajo, clamp. También es una función con curry, lo que significa si la llamamos con un min y valor máximo, digamos 0 y 1, devuelve una nueva función. En este ejemplo, la nueva función restringirá cualquier número dado a que entre 0 y 1:

Primero, importación de clamp:

Queremos utilizar esta función de sujeción a través de nuestro carrusel, así que agregue esta línea después definimos minXOffset:

Vamos a modificar la salida dos hemos creado en nuestras acciones con alguna ligera composición funcional con el transformador de pipe.

Pipe

Cuando llamamos a una función, la escribimos así:

Si queremos la salida de esa función a otra función, podríamos escribir como esta:

Esto se vuelve un poco difícil de leer, y sólo se pone peor medida que agregamos más funciones.

Con pipe, podemos componer una nueva función de foo y bar que podemos reutilizar:

También está escrito en un comienzo natural-> orden final, que hace más fácil a seguir. Podemos utilizar esto para componer applyOffsetclamp en una sola función. Importación de pipe:

Reemplace la devolución de llamada de salida de nuestro pointer con:

Y la devolución de llamada de salida de la física con:

Este tipo de composición funcional muy cuidadosamente puede crear procesos descriptivos, paso a paso de funciones más pequeñas, reutilizables.

Ahora, cuando se arrastre y tiro el carrusel, no moverse fuera de sus fronteras.

La parada abrupta no es muy satisfactoria. Pero eso es un problema para una parte más adelante!

Conclusión

Eso es todo para la parte 1. Hasta ahora, hemos dado un vistazo a los carruseles para ver las fortalezas y debilidades de los diferentes enfoques a fin de desplazamiento. Has usado la entrada de Popmotion de seguimiento y de la física a performantly animate translateX de nuestro carrusel con desplazamiento táctil. También hemos introducidos a la composición funcional y funciones al curry.

Puedes agarrar una versión comentada de la "historia hasta ahora" en este CodePen.

En próximas entregas, analizaremos:

  • desplazamiento con la rueda del ratón
  • ahora el carrusel cuando cambia el tamaño de la ventana
  • paginación, con accesibilidad de teclado y ratón
  • detalles deliciosos, con la ayuda de la física de springs

¡Esperamos verte allí!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.