{"id":3354,"date":"2023-06-22T15:15:16","date_gmt":"2023-06-22T15:15:16","guid":{"rendered":"https:\/\/www.appyweb.es\/diccionario\/?post_type=project&p=3354"},"modified":"2024-03-21T16:32:31","modified_gmt":"2024-03-21T16:32:31","slug":"parallax","status":"publish","type":"page","link":"https:\/\/www.appyweb.es\/diccionario\/parallax\/","title":{"rendered":"Parallax"},"content":{"rendered":"

\"Parallax\"<\/h1>\n

Se traduce al espa\u00f1ol como \u201cparalaje\u201d, es un efecto que naci\u00f3 en el dise\u00f1o de los dibujos animados de Disney, con la intenci\u00f3n de otorgarles m\u00e1s realismo a estos, ya que estaban concebidos en animaci\u00f3n 2D. Con el efecto Parallax la superposici\u00f3n de elementos le otorga profundidad a sus fondos<\/strong>, algo que tambi\u00e9n es posible en el dise\u00f1o web.<\/p>\n

\u00bfQu\u00e9 es Parallax?<\/h2>\n

Es un efecto visual que utiliza capas superpuestas de elementos, para simular el efecto 3D en el fondo de un sitio web. Parallax hace ver que el contenido se desplaza de forma separada con el fondo<\/strong>, otorg\u00e1ndole dinamismo a la estructura de la p\u00e1gina.<\/p>\n

Es una de las tendencias m\u00e1s populares en el dise\u00f1o web<\/a>, es muy utilizado para la navegaci\u00f3n de forma vertical que utilizan los smartphones al hacer scrolling. De esta forma, los sitios son m\u00e1s atractivos y tambi\u00e9n suman puntos extras para la experiencia de usuario.<\/p>\n

\u00bfPor qu\u00e9 es \u00fatil?<\/h2>\n

Su utilidad es totalmente est\u00e9tica, con el objetivo de mejorar la experiencia del usuario mientras navega por Internet. La finalidad de los elementos que componen el efecto Parallax contribuyen a que este el usuario se identifique con el sitio digital, siga navegando en \u00e9l de forma intuitiva y que haga scroll constantemente.<\/p>\n

Debido a sus beneficios en el dise\u00f1o gr\u00e1fico<\/a> tambi\u00e9n ofrecen la posibilidad de emplear elementos multimedia muy llamativos para cualquier tipo de p\u00e1gina. Por ejemplo, las p\u00e1ginas de destino tambi\u00e9n son un buen lugar para utilizar este tipo de dise\u00f1o<\/strong>, ya que buscan que el usuario pueda tener m\u00e1s inter\u00e9s por el producto y la marca con solo un vistazo.<\/p>\n

Recursos para hacer Parallax<\/h2>\n

Conocimientos de HTML5 y CSS3 ser\u00e1n suficientes para crear Parallax en un sitio digital<\/strong>. Sin embargo, existen otros recursos m\u00e1s adaptados a principiantes, como los plugin, algunos de los m\u00e1s utilizados son ScrollMagic, Page Piling y Stellar de JQuery. Cada uno con funciones diferentes que permiten la animaci\u00f3n de objetos fijos, la superposici\u00f3n de capas y mucha personalizaci\u00f3n.<\/p>\n

Aunque es necesario mencionar que existen otras opciones en Internet, como la posibilidad de utilizar plantillas, en WordPress se pueden conseguir muchas opciones con un promedio de 40$. Pero, sin dudas la m\u00e1s recomendada es utilizar la ayuda de un experto en desarrollo web para crear un efecto original<\/strong> y m\u00e1s ajustado a las expectativas de la empresa.<\/p>\n

Ejemplo de Parallax<\/h2>\n

Si has jugado Mario Bros alguna vez, entonces ya conoces c\u00f3mo interact\u00faa el efecto Parallax<\/strong>, es el mismo concepto, el paisaje se mueve de forma constante mientras que Mario corre de forma horizontal. Ahora, trata de imaginar esa idea, pero en un sitio web y de forma vertical, se podr\u00eda decir que tu cursor es Mario, ya que mientras hagas scroll, el fondo se mover\u00e1, a excepci\u00f3n de algunos elementos.<\/p>\n

Mira el siguiente gif para que te hagas una idea de c\u00f3mo funciona.<\/p>\n