En este tutorial aprenderás a crear una página con desplazamiento horizontal, en inglés «horizontal scrolling».
El efecto consiste que al desplazarnos hacia abajo (scroll down) o hacia arriba (scroll up) de la página ésta se desplazará horizontalmente y no verticalmente cómo lo es de manera natural. La verdad me es un poco difícil encontrar las palabras correctas para explicarte cómo funciona. Mejor dale Play al tutorial para que lo entiendas.
¡Espera! Antes quiero dejarte los fragmentos de código que utilizaremos en este tutorial.
Para realizar éste ejercicio, nos vamos a apoyar de una librería JavaScript llamada Skrollr.js. Y también de un «poquito» de código CSS.
El fragmento de código CSS que necesitamos es el siguiente (en el video te explico para que sirve):
@media only screen and (min-width: 981px) {
#contenedor {
position: fixed;
width: 100%;
display: flex;
}
#contenedor .fila {
min-width: 100%;
}
}
@media only screen and (max-width:981px){
#contenedor {
transform: none!important;
}
}También necesitamos enlazar la librería Skrollr.js, para eso usaremos el siguiente enlace:
https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js
Además tenemos que aplicar unos atributos «data» al contenedor de las filas, lo haremos con este fragmento de código:
jQuery(function($){
$( "#contenedor" ).attr( "data-0", "transform:translateX(0%)" );
$( "#contenedor" ).attr( "data-4000", "transform:translateX(-400%)" );
});
Y por último debemos inicializar la librería Skrollr.js con el siguiente código (el código ha sido corregido para deshabilitarlo en móviles y éste funcione correctamente):
(function($){
$(document).ready(function() {
skrollr.init();
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
skrollr.init().destroy();
}
});
})(jQuery)
¡Ahora sí! Dale play al video para que sepas dónde colocar todos estos fragmentos de código…
Buenas noches, he seguido su tutorial para crear un sitio con scroll horizontal, funciona muy bien pero, ¿Cómo le puedo hacer para que se vea bien en el teléfono?
Aunque sea scroll vertical estaría correcto, solo que ahora no se puede dar scroll para ningun lado
Muchas gracias! Saludos,
Regina reemplaza el código para inicializar la librería por este otro:
(function($){
$(document).ready(function() {
skrollr.init();
if (skrollr.init().isMobile()) {
skrollr.init().destroy();
}
});
})(jQuery)
Hola, perdón por el mal español que tiene Google Translate. Tengo el mismo problema, funciona en el escritorio pero no en la tableta y el móvil y no sé cómo solucionarlo. ¿Tienes alguna sugerencia?
Amigo ya tengo la solución, para que funcione reemplaza el código de inicializar skrollr.js por:
(function($){
$(document).ready(function() {
skrollr.init();
if (skrollr.init().isMobile()) {
skrollr.init().destroy();
}
});
})(jQuery)
Sino te funciona en tabletas puedes probar con este otro código:
(function($){
$(document).ready(function() {
skrollr.init();
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
skrollr.init().destroy();
}
});
})(jQuery)
Hola Oscar.
Enhorabuena por el tutorial, es fantástico y me funcionó sin problemas para móvil y desktop, Sin embargo no consigo que se vea bien en Tablet. He probado con el código que mencionas pero nada. ¿Alguna idea de por qué ocurre esto?
Muchas gracias 😉
Alex ¿probaste con este otro código?
(function($){
$(document).ready(function() {
skrollr.init();
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
skrollr.init().destroy();
}
});
})(jQuery)
Inténtalo y me comentas como te va…
—
Perdón creí que era un comentario nuevo, por lo visto lo probaste y no te funcionó 🙁 voy a investigar que pasa
Hola Oscar. Este efecto de skroll, llamo mucho la atención y quise aprender a hacerlo. Seguí las instrucciones pero me aparece un error. ¡tu que conoces del tema tal vez pudieras orientarme!
Sucede que cuando termino de ingresar los códigos css y js, y todas las 5 secciones quedan en el inicio. Hace el skroll horizontal perfectamente.
link: https://soyweb.net/horizontal/
Hola Javier. Es difícil saber que sucede simplemente con el enlace de tu sitio. Me gustaría entrar al administrador para poder revisar que pasa. Si gustas escríbeme a [email protected] y me das acceso a tu WP para revisar mas a detalle y darte una solución. 🙂
Un abrazo.
Brutal!!! seguro que lo utilizaré, sólo una consulta, para saltar totalmente de una imagen a otra, debo hacer 13 saltos de la rueda del ratón, cómo podría hacer para que de un sólo movimiento de la rueda, saltara de una imagen a otra, gracias!!!!
Hola Javier, eso que me comentas sería genial, la verdad que no lo he intentado pero sería estupendo poder lograr ese efecto. En cuanto tenga un tiempo libre trataré de hacer la prueba y si lo logro con mucho gusto compartiré la solución 🙂
Gracias, estaré atento 😉
Está genial. Me ha encantado
Pero, a mi no me funciona para móviles y me imagino que para Tablet tampoco. pongo el script que has comentado pero nada.
Me encantaría implantarlo.
Hola Martin, me gustaría intentarlo en tu sitio, ¿me puedes dar acceso? Si es que sí, escríbeme a [email protected] por fa
¡Saludos!
Hola Oscar, que aporte tan bueno este. Quisiera saber si el scroll horizontal también se puede activar en celulares?. Saludos
Hola Charli, sí se podría hacer un scroll horizontal en móvil pero sería otro método. Aunque no sé qué tan bueno sea para la experiencia de usuario ya que en móvil nos desplazamos con el dedo hacia abajo, pero de todas formas voy a intentar realizar un tutorial más adelante. Saludos
Gracias Oscar, tienes toda la razón y estoy de acuerdo contigo con respecto a la UX. Pero me refería a que al hacer scroll hacia abajo en el celular, el contenido se desplace horizontalmente. Sería como un translate?
No estoy seguro que lo podamos lograr. Aún así trataré de realizarlo a ver si lo logro.
este efecto me sirve para crear post en un blog sin problema? es decir crear una plantilla e ir duplicanco y duplicando sin que tenga problemas.
Interesante lo que propones Pedro, no lo he intentado pero podría funcionar 🙂 Trataré de realizar un tutorial al respecto. ¡Saludos!
Hola Oscar,
gracias por tu tutorial.
Me a ayudado a cumplir las necesidades de un cliente.
Solamente ando con la preocupación de su uso en celulares y tablets. Me aparece una pantalla completamente en blanco.
Te he enviado un email.
Hola Sebastian, tendría que darle un vistazo al sitio para saber que pasa.
Por cierto, tengo un nuevo tutorial premium dónde realizamos también una página con desplazamiento horizontal, pero un poco más avanzada, puedes ver el post aquí.
Muchas gracias por los aportes, por favor podrias ayudarme ya intento 2 pruebas pero no funciona, espero respuesta.
Hola Gio, qué tal a ver envíame el enlace de tu web para ver que está pasando.
Hola Óscar,
¿habría posibilidad de además de hacer el desplazamiento con el scroll hacerlo con flechas?
Muchas gracias de antemano
Con el método de este tutorial no es posible. Pero tengo un tutorial premium con otro método que si es posible colocarle unas flechas.
Hola Óscar, ¿qué tal todo? Espero que bien.
Si me suscribiese por un mes, aparte de tener acceso al tutorial, ¿me incluirías el añadir unas flechas de desplazamiento?
Muchas gracias y saludos,
Hola Andrés, si por supuesto, te daría una mano con eso 🙂 ¡Saludos!
Hola, buenas, vieras que lo hice y sí funciona, sin embargo, cuando intento colocar un módulo aparte, éste no se muestra y el scroll deja de funcionar. ¿Alguna idea de porqué deja de funcionar?
Hola Jose, ¿Cómo un módulo aparte?
Hola buenas,
He seguido todos los pasos pero no me ha salido… ¿ igual es por qué tengo un menú vertical?
Me puedes ayudar?
Gracias
Hola, no creo que tenga que ver con el menú vertical… Tu configuración de divi performance deshabilita: Defer jQuery And jQuery Migrate… A ver si esto ayuda
Deshabilite esa opción, y aún así nada…
¿Cuál es la url de tu web?
Hola Oscar! Eres increíble, me encanta el efecto. Pero tengo un problema, en mi web «https://pruebas.crececonweb.com/» tengo un footer global, y el problema es que el footer se me pone por encima de la seccion de scrolling y sale primero el header luego el footer y luego la seccion de scrolling. A que se debe?? :((
Hola Ivan, estoy revisando tu web pero no veo lo que mencionas. Creo que al final quitaste el efecto 🤔
Hola Oscar, gracias por contestar!
https://pruebas.crececonweb.com/servicios/
He estado investigando para intentar arreglarlo, pero no hay manera, de momento había ocultado el footer. Al poner la clase contenedor a la sección se pone el footer arriva.
Dejo el problema visible en la web. Si necesitas cualquier cosa hazmela saber 🙂
Ahora lo veo. Es mejor que quites el footer global para esa página. Y el footer lo puedes insertar dentro de la misma página para evitar ese detalle que te está ocurriendo.
Hola oscar, lo pudistes revisar?
https://pruebas.crececonweb.com/servicios/
Hola, en la versión móvil sale una pagina vacía al final. ¿alguna solución por favor?
Hola María, reviso lo que comentas. Compárteme la url de tu web por fa.