Presentación del tutorial Divi

En este post voy a compartir con vosotros el código CSS y los pasos a realizar para generar un scroll al pasar por una imagen. Imagina que queremos mostrar una plantilla web para que nuestro posible comprador la vea completa. Añadirla en toda su longitud sería muy pesado y poco práctico. ¿Y si pudiéramos hacer un scroll que hiciera un recorrido por la plantilla mostrándola poco a poco? De eso exactamente trata este pequeño tutorial.

Está basado en un tutorial de Divithemeexamples.com. Allí tienen muchos y buenos tutoriales, aunque están todos en inglés. Por eso me he decidido a traducirlo y adaptarlo para el usuario castellanoparlante.

Bajo estas líneas puedes ver el efecto. Pasa el ratón (o el dedo si estás leyéndonos desde una tablet o móvil) para comprobar cómo actúa.

Paso 1. Crea tus imágenes

Para este tutorial las imágenes resultantes de las capturas de la web tienen una anchura de 230 pixeles. La altura es indiferente, dependerá de la cantidad de contenido que tenga. Recuerda que cuanto más altura tenga la imagen, más rápido irá el scroll, ya que recorrerá más distancia en el mismo tiempo que en una imagen con menos altura. La captura de la web se ha realizado con una magnífica utilidad  para google chrome: Joxi full page screen capture for Chrome. Puedes crear una captura de toda la página, guardarla como png y editarla en cualquier programa de imagen como Photoshop, por ejemplo.

Paso 2. Crea una fila con 3 ó 4 columnas

Añade una fila con 4 columnas o 3 si estás usando barra lateral (sidebar), dependerá del espacio de que dispongas y las dimensiones de las imágenes desplazables.

Cada columna debe contener un módulo de texto y cada módulo debe contener como fondo la imagen que queramos usar.

Ahora pulsa la pestaña CSS personalizado y añade la clase scrollme en el campo donde pone Clase CSS. Mira la imagen.

Paso 3. Añade el código

Ahora debes añadir el código CSS en la hoja de estilos de tu tema hijo, si estás usando una (recomendable). Copia el código que puedes ver un poco mas abajo y entra en  Apariencia >>Editor y pégalo en tu hoja de estilo.

Si no usas tema hijo, puedes ponerlo donde te indicamos a continuación. Accede a Divi >> Opciones del tema y desplázate hasta abajo del todo donde verás la zona donde pegar el código.

Una tercera opción, que es la que hemos escogido nosotros, es colocar el código CSS en la página. De esta forma este código solo se leerá al entrar en esta página y sólo afectará a ésta. A mí es la opción que más me gusta.

Y bajo estas líneas tienes el código que debes copiar y pegar en la zona que elijas.

/*-----DESPLAZAMIENTO IMAGEN SCROLL-----*/
.scrollme:hover {
 -webkit-transition: background-position 4s linear 0s;
 -moz-transition: background-position 4s linear 0s;
 transition: background-position 4s linear 0s;
 background-position: center bottom;
/*El valor 4s (segundos) es el tiempo que tarda la imagen
en desplazarse de principio a fin, por lo que las capturas
de pantalla más largas se desplazan más rápido*/
}

.scrollme {
 min-height: 300px;
 display: block;
 background-position: center top;
 background-repeat: no-repeat;
 background-size: 100% auto;
 position: relative;
 -webkit-transition: background-position 1.5s ease-out 0.5s;
 -moz-transition: background-position 1.5s ease-out 0.5s;
 transition: background-position 1.5s ease-out 0.5s;
/*The ease-out 0.5s es el tiempo que pasa hasta que vuelva
a desplazarse a su posición original*/
}