Los efectos de desplazamiento están de moda en estos días. A medida que el usuario baja la página, el contenido hace más que subir la pantalla, cobra vida y se vuelve más interesante. Desafortunadamente, no hay una manera fácil de lograr estos efectos con CSS puro. Si no sabes JavaScript, estás fuera de suerte.
Ahí es donde entra en juego Stroll.js. Es una biblioteca súper fácil de implementar que hace que la aplicación de efectos de desplazamiento alucinantes sea muy fácil. Todo lo que tienes que hacer es pegar un par de líneas breves de JavaScript, el resto se maneja con HTML y CSS. Sigue leyendo y te mostraré cómo funciona.
Conoce a Stroll.js
Stroll.js es una pequeña y atractiva biblioteca de JavaScript que trae un montón de animaciones llamativas a la acción de desplazamiento en los elementos de la lista. La idea es que tenga un grupo de elementos en una lista desplazable y use Stroll.js para hacer que la búsqueda de esa lista sea más interesante.
La página de inicio del proyecto (que se muestra arriba) tiene un montón de demostraciones que puedes probar para ver los tipos de efectos que se incluyen. Las animaciones en sí están construidas con simples transformaciones de CSS3, por lo que debería poder agregar y personalizar fácilmente la biblioteca con sus propias ideas.
¡Vamos a construir una demo!
Cada vez que me encuentro con un proyecto genial como Stroll.js, inmediatamente quiero sumergirme, patear los neumáticos y ver cómo funciona todo. Leer documentación aburrida está muy bien, pero realmente no puedo sentir algo como esto hasta que lo intente yo mismo. Eso es lo que vamos a hacer hoy.
Manifestación: Haga clic aquí para lanzar.
HTML
Para empezar, sabemos que vamos a necesitar una lista porque de eso se trata Stroll.js: animar la lista de rollos. Los elementos de la lista en la demostración eran solo una simple línea de texto, pero quiero seguir avanzando para ver cómo Stroll.js lo maneja. Haremos que cada elemento de la lista contenga una imagen, un título y un párrafo.
Si usa la codificación Zen como yo, escriba lo siguiente en su editor de HTML (de lo contrario, simplemente escriba la siguiente parte manualmente).
Como puede ver, comenzamos con una lista desordenada, luego le dimos un elemento secundario de lista, que contiene los tres elementos que acabamos de decir que queríamos. Cuando presionas la pestaña o cualquier acceso directo que use tu editor, esto se expandirá al siguiente HTML:
Imágenes
Para los estilos de imagen, agregaremos un margen de 20 px para darles un poco de espacio para respirar y un radio de borde del 50% (¡mira ma, sin prefijos del navegador!) Para que las miniaturas sean perfectamente redondas. Además, haremos flotar las imágenes a la izquierda para que el texto aparezca junto a ellas en lugar de debajo de ellas.
Tipografía
Para el tipo, necesitamos definir nuestros estilos h2 y de párrafo. Usé la taquigrafía para darle al encabezado un tratamiento audaz, sans-serif y el párrafo un peso normal, tratamiento serif. También tenga en cuenta que el párrafo tiene un color ligeramente más claro para ayudar a diferenciar los dos visualmente.
Lista
Ahora es el momento de la mayor parte de CSS, la pieza final que hará que nuestra lista de artículos se vea perfecta. Establezca la posición en relativa, el ancho en 800 px y la altura en 510 px. A continuación, aplique algunos márgenes y relleno y asegúrese de que el estilo de lista esté establecido en ninguno.
Lo que realmente tienes que hacer bien es el desbordamiento. Establezca el overflow-x en oculto y el overflow-y para desplazarse de esa manera su lista realmente será desplazable.
Ahora que hemos resuelto los estilos de lista desordenados, es hora de profundizar y establecer los estilos de elementos de lista. Una vez más, establezca la posición (relativa), la altura (200 px) y el relleno (20 px). Luego, establezca los colores para el fondo y el tipo, establezca el desbordamiento en automático y el índice z en dos.
La parte difícil aquí es ese segundo selector. Estoy usando nth-child (impar) para variar el color de cada otro elemento de la lista, lo que ayuda a que cada uno se destaque del siguiente. Esto no está bien soportado en IE, pero tampoco Stroll.js, así que lo usaremos de todos modos. Sin embargo, recuerde siempre que puede usar Selectivizr para aumentar su soporte de selector. En última instancia, si los efectos de desplazamiento no son ampliamente compatibles, no es un gran problema (son solo un ojo dulce), pero debe hacer que el otro estilo visual sea lo más cruzado posible entre los navegadores.
Control del progreso
¡La mayor parte de nuestro trabajo está hecho! Nuestra lista se ve fantástica, todo lo que queda por hacer es darle vida con un poquito de JavaScript. No dolerá un poco, lo prometo.
JavaScript
Ahora, cuando iniciamos este proyecto, le prometí que no necesitaba conocer JavaScript para continuar.Sin embargo, aquí te estoy lanzando JavaScript! ¿Lo que da? La verdad es que necesitas un poco de JS, pero una acción de copiar y pegar funcionará bien y es fácil de personalizar para tu proyecto.
Tira este código en al final del cuerpo en su HTML.
¿Ver? Eso no fue tan malo. Todo lo que tiene que hacer para personalizarlo es asegurarse de apuntar la ID correcta. Nosotros usamos? #Main? en nuestro proyecto de hoy, pero siéntase libre de cambiar esto para sus propios usos.
¡Esta vivo!
¡Con eso ya hemos terminado! Todo lo que tenemos que hacer para cambiar el efecto es aplicar una clase diferente en la lista desordenada. Para la demostración, utilicé los efectos de volteo, rizo e inclinación.
Manifestación: Haga clic aquí para lanzar.
¿Qué piensas?
Pensar en cómo hacer que los eventos de desplazamiento sean más interesantes abre todo un nuevo campo de posibilidades de diseño interesantes. Como con cualquier efecto, estos pueden usarse para bien o para mal. Llevándolos demasiado lejos o abusando de ellos resultará en una página vertiginosa que nadie querrá usar. Usa Stroll.js con moderación y tendrá un efecto mucho mayor.
Deja un comentario y déjanos saber qué piensas de Stroll.js. ¿Le gustan las animaciones de desplazamiento o prefiere que los desarrolladores dejen de encontrar nuevos lugares para incluir más animaciones? ¡Haznos saber!