En este artículo vamos a ver como aplicar el efecto parallax de Parallax Pro en Altitude Pro. En concreto, a las imágenes de la portada.
He leído en algunas revisiones de Altitude Pro que le atribuyen el efecto parallax al sus imágenes de portada. Técnicamente no es correcto. Por defecto, las imágenes de la portada de Altitude Pro son fijas. Algo contrario al efecto parallax, que lo que pretende mostrar es como la imagen se mueve la hacer scroll a distinta velocidad que el resto de elementos.
Personalizando Altitude Pro
Parallax Pro Theme viene con ese efecto incorporado a sus imágenes de portada. Pues bien, hoy incorporaremos ese efecto a las imágenes de la portada de Altitude Pro.
Siempre he dicho que Altitude Pro es un theme muy personalizable. Esta de una de las personalizaciones, que sabiendo un poco de código, podemos hacer. Ya son varios los tutoriales sobre Altitude Pro que he publicado, y desde luego este no será el último.
Pasos a seguir para aplicar el efecto parallax en Altitude Pro
Para conseguir este efecto, debemos seguir varios pasos.
El primero de ellos, es editar el archivo front-page.php de Altitude Pro.
Dado que sólo queremos aplicar el efecto en las imágenes de la portada, añadiremos la función de carga del archivo JS necesario a este archivo. De esta manera sólo se cargará la página de inicio y no en otro sitio de la web.
La depuración del proceso de carga de archivos, es una parte importante de la optimización web.
Editamos la función de carga de scripts del archivo front-page.php. La original se ve así:
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Y una vez editada, añadiendo el código para cargar el nuevo script, se verá así:
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Editado esto, sólo nos queda crear ese archivo JS. Crearemos un archivo llamado parallax.js y le añadiremos este snippet de código. Este archivo lo agregaremos a la carpeta /js de Altitude Pro Theme.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusión
No sé si estarás de acuerdo conmigo, pero con sólo un poco de código la portada de Altitude Pro mejora muchísimo. Y ha sido sencillo.
Extras
Ya vimos como añadir dos áreas más de widgets a la portada de Altitude Pro. De tener estas secciones extra en la portada, tendríamos que editar un poco el código para dar efecto parallax a estas nuevas secciones.
Como siempre, si quieres proponer nuevos tutoriales, o tienes alguna pregunta sobre el código de este tutorial, puedes dejar un comentario abajo. Feliz día! 😉