WordPress Parallax. Conclusiones e implementación en WP (y III)

Bien. Terminamos esta mini-serie de artículos sobre el efecto parallax, viendo las conclusiones finales y buscando los diferentes aspectos de la implementación de un WordPress Parallax.

Primero permitidme que haga las conclusiones finales, para después detenernos más profundamente en la implementación WordPress.

Conclusiones

Han sido dos artículos previos, ‘Parallax. Tipos e implementación (I)‘ y ‘Parallax. Puntos de adición de efectos (II). Quizá me he extendido demasiado sobre el efecto parallax, ya que he añadido efectos que no son específicos de esta técnica, y he acabado explicando más la técnica de una front-page que de un simple efecto parallax. Sin embargo, parecía obligado, ya que muchas veces vienen cogidos de la mano.

Vamos a hacernos varias preguntas:

¿Hay más?

Efectivamente, hay más. A los efectos podemos añadir todas las animaciones que se nos ocurran, sólo es cuestión de dominar jQuery.

Pero también hay más efectos. Por ejemplo, podemos añadir gráficos SVG, cosa que yo he hecho en el ejemplo. Incluso, he visto gráficos SVG que se van creando conforme descendemos por la página. Y seguro que hay más que yo no conozco.

¿Se puede hacer mejor?

Rotundamente, sí. Yo sólo he revisado los fundamentos, pero un estudio más intenso seguramente mejorará el resultado final. Tendré que hacerlo, ya que quiero incorporar esta técnica en el próximo tema de esta web. Ya os comentaré.

Sin ir más lejos, crear un evento ‘scroll’ para cada efecto es ridículo. Mejor manejar todos los efectos desde un solo evento, con llamadas a funciones que realicen las diferentes acciones cuando sea necesario.

Por otro lado, los tiempos en los desplazamientos y el easing.

¿Qué verificaciones debemos hacer?

Además de verificar el correcto funcionamiento en todos los navegadores y sistemas operativos posibles, hoy en día son obligadas las verificaciones del funcionamiento en smartphones, tablets y equipos portátiles.

Aparte de que existirán posibles conflictos con el diseño adaptativo, seguramente sea necesario el uso de jQuery mobile, el cual, francamente, desconozco. Aunque sé que para estos dispositivos móviles, se pueden tener funciones que doten a nuestras creaciones de nuevas propiedades (por ejemplo utilizando el giroscopio de nuestro dispositivo). El ejemplo más gráfico es http://matthew.wagerfield.com/parallax/.

 

WordPress Parallax. Pautas para su implementación

Según qué efectos queramos integrar en nuestro website y cómo pretendamos hacerlo, así deberemos implementarlos. Por ejemplo, no será lo mismo hacer una front-page completa que una imagen fade con movimiento final.

Por eso, pensemos primero en qué maneras podemos implementar los efectos WordPress parallax en nuestro WordPress:

  • Theme. Los casos más conocidos podrían ser Divi o el reciente Twenty Seventeen. Tened en cuenta que en este supuesto hay que crear un formulario de montaje en el back-end.
  • Plugin. Bastante más sencillo sería este caso, aunque permitiría menos efectos, y nunca actuaría a nivel global de una página.

Tanto en un caso como en otro, ¿cómo haríamos aparecer estos efectos en pantalla?. En principio, con tres métodos posibles:

  • Página entera. Crearíamos una o diversas plantillas que contendrían el código necesario, en el caso de themes, y podíamos crear plantillas de archivo de categorías o taxonomías, para el caso de plugin.
  • Widget. Los podríamos ubicar en cualquier zona libre de widgets que dispusiera el tema.
  • Shortcode. Ideal para poder incorporar un efecto dentro de cualquier artículo o página estática.

Aquí hago un inciso. También se podrían añadir efectos sobre, por ejemplo, thumbnails, mediante hooks.

 

Bien, pues hasta aquí ha llegado esta mini-serie. Las posibilidades que aportan el efecto parallax y otros efectos asociados abren un amplio abanico de posibilidades a la hora de diseñar el theme de nuestro sitio WordPress. Ahora bien, creo que hay que ser cautos a la hora de utilizar todos estos efectos, y no abusar de ellos, pues nuestro sitio web puede acabar pareciendo más una feria de atracciones que una web seria. A veces, menos es más.

Para un diseño completo, recomendaría efectos parallax comedidos, juntamente con tratamiento de texturas, colores, transparencias y tipografías.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *