{"id":126224,"date":"2018-09-17T08:02:51","date_gmt":"2018-09-17T06:02:51","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/parallax\/"},"modified":"2025-02-03T20:53:25","modified_gmt":"2025-02-03T19:53:25","slug":"parallax","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/parallax","title":{"rendered":"Parallax"},"content":{"rendered":"

Puedes crear f\u00e1cilmente encabezados, pies de p\u00e1gina y ventanas emergentes flotantes en Justinmind utilizando posiciones ancladas. Normalmente, los elementos permanecer\u00e1n en su sitio mientras simulas, pero si est\u00e1n anclados, se mover\u00e1n con el desplazamiento de la pantalla. Echa un vistazo a los siguientes ejemplos para aprender a utilizar elementos anclados y otros efectos de paralaje. <\/p>\n

<\/a>Fija arriba y abajo (cabeceras y pies adhesivos)<\/h2>\n

    \n
  1. Dise\u00f1a una cabecera o un pie de p\u00e1gina utilizando rect\u00e1ngulos, texto e im\u00e1genes. Cuando hayas terminado de dise\u00f1ar, selecciona todos los elementos, haz clic con el bot\u00f3n derecho del rat\u00f3n, ve a Agrupar y selecciona \u00abAgrupar en panel din\u00e1mico\u00bb.
    \n\"Selecciona
    \nEsto coloca todos los elementos en un panel din\u00e1mico, que funciona como contenedor. Podr\u00e1s anclar ese panel din\u00e1mico (y todos los elementos que contiene) a la parte superior o inferior de la pantalla.  <\/p>\n

    Ten en cuenta que no podr\u00e1s anclar un grupo normal por s\u00ed mismo. Tendr\u00e1s que colocar varios elementos en un panel din\u00e1mico para poder anclarlos. Si s\u00f3lo utilizas un elemento como cabecera\/pie, no necesitar\u00e1s agruparlo en un panel din\u00e1mico. <\/p>\n<\/li>\n

  2. Con el encabezado o pie de p\u00e1gina seleccionado, ve a la paleta Propiedades. Haz clic en el bot\u00f3n \u00abFijar\u00bb situado junto a las posiciones X e Y de la cabecera. \"Haz<\/li>\n
  3. Ahora ver\u00e1s que aparecen dos desplegables. Haz clic en el que est\u00e1 junto a la posici\u00f3n Y y selecciona \u00abAnclar arriba\u00bb para crear una cabecera anclada, y selecciona \u00abAnclar abajo\u00bb para crear un pie de p\u00e1gina anclado. \"Elige<\/li>\n<\/ol>\n
    Nota:<\/strong> Aseg\u00farate de que tu encabezado y pie de p\u00e1gina est\u00e1n por encima de otros elementos en la paleta Capas, o m\u00e1rcalos como \u00absiempre arriba\u00bb en la paleta Propiedades.<\/div>\n

    \"Marca
    \nToca el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto y comprobar c\u00f3mo tu encabezado y pie de p\u00e1gina se mantienen en su sitio en la pantalla mientras te desplazas.<\/p>\n

    <\/a>Centro fijado (emergente fijo)<\/h2>\n

      \n
    1. Construye una ventana emergente con rect\u00e1ngulos, elementos de texto y un campo de texto de entrada. Selecciona todos los elementos de la ventana emergente, haz clic con el bot\u00f3n derecho del rat\u00f3n, ve a Agrupar y selecciona \u00abAgrupar en panel din\u00e1mico\u00bb. <\/li>\n
    2. Ve a la paleta Propiedades y haz clic en el bot\u00f3n \u00abClavija\u00bb para abrir las opciones de posici\u00f3n de la clavija. En los desplegables X e Y, selecciona \u00abAnclar al centro\u00bb. Ahora, la ventana emergente se fijar\u00e1 a los centros horizontal y vertical de la pantalla mientras te desplazas. <\/li>\n
    3. Con la ventana emergente a\u00fan seleccionada, haz clic en el bot\u00f3n \u00abojo\u00bb de la paleta Propiedades, que ocultar\u00e1 la ventana emergente por defecto durante la simulaci\u00f3n.\"Marca<\/li>\n
    4. Ahora puedes crear un evento para mostrar la ventana emergente con un efecto de fundido cuando se cargue la p\u00e1gina. Crea un evento de elemento Al cargar la p\u00e1gina<\/strong> + Mostrar<\/strong>, seleccionando la ventana emergente a mostrar. A\u00f1ade un efecto ‘fundido’ y haz clic en ‘Aceptar’ para terminar de crear el evento. \"Mostrar<\/li>\n<\/ol>\n

      Toca el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto y ver c\u00f3mo tu ventana emergente se desvanece cuando se carga la pantalla y se mantiene fija en el centro de la pantalla mientras te desplazas.<\/p>\n

      <\/a>Efectos de paralaje<\/h2>\n

      biblioteca de widgets de paralaje<\/a> para crear efectos de desvanecimiento, deslizamiento y paralaje flotante. Cuando hayas descargado la biblioteca, imp\u00f3rtala en tu paleta Bibliotecas (enlace al tutorial de bibliotecas UI). Para empezar, crea un proyecto Web y aumenta su altura a unos 4000px. Coloca una cabecera en la parte superior de la pantalla y un pie de p\u00e1gina en la parte inferior.<\/p>\n

      Fundido de la imagen del h\u00e9roe<\/h3>\n
        \n
      1. Arrastra el elemento de capa Fundido de la biblioteca de elementos de paralaje a la parte superior del lienzo. Redimensi\u00f3nalo hasta que ocupe todo el ancho de la pantalla y tenga unos 700px de largo. \"Arrastra<\/li>\n
      2. F\u00edjate bien en el elemento del lienzo. Ver\u00e1s que es un panel din\u00e1mico que tiene un elemento de texto oculto llamado \u00abposici\u00f3n inicial\u00bb y un gr\u00e1fico en su interior.Puedes seguir adelante y eliminar el gr\u00e1fico, pero aseg\u00farate de dejar el texto \u00abposici\u00f3n inicial\u00bb.El efecto de desvanecimiento funciona mostrando el panel din\u00e1mico cuando el desplazamiento de la pantalla es superior a la posici\u00f3n del texto \u00abposici\u00f3n inicial\u00bb. Como est\u00e1 colocado en la parte superior de la pantalla, el evento se activar\u00e1 en cuanto empieces a desplazarte. <\/li>\n
      3. Para que coincida con el ejemplo, a\u00f1ade una imagen de fondo al panel din\u00e1mico de la paleta Propiedades.\"A\u00f1ade<\/li>\n<\/ol>\n

        Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. En cuanto empieces a desplazarte, deber\u00eda aparecer la imagen del h\u00e9roe. <\/p>\n

        Efectos de deslizamiento<\/h3>\n
          \n
        1. Arrastra la capa Deslizar a la izquierda de la biblioteca de paralaje al lienzo, coloc\u00e1ndola encima de la imagen h\u00e9roe. Ver\u00e1s que tambi\u00e9n contiene el texto \u00abposici\u00f3n inicial\u00bb y algunos gr\u00e1ficos.Redimensiona el panel hasta que ocupe todo el ancho de la pantalla y tenga unos 850px de longitud.
          \n\"Selecciona
          \nAl igual que el elemento de capa de fundido, el efecto de deslizamiento a la izquierda funciona mostrando el panel din\u00e1mico siempre que el desplazamiento de la pantalla sea mayor que el texto \u00abposici\u00f3n inicial\u00bb. <\/p>\n

          El texto de \u00abposici\u00f3n inicial\u00bb se coloca donde empieza la imagen principal, as\u00ed que ver\u00e1s que esta capa se desliza desde la izquierda cuando pases por delante de la imagen principal.<\/li>\n

        2. Elimina los gr\u00e1ficos pero deja el texto \u00abposici\u00f3n inicial\u00bb. Mant\u00e9n pulsada la tecla Comando<\/kbd> (en Mac) o Control<\/kbd> (en Windows) para colocar los elementos dentro del panel din\u00e1mico. Para que coincidan con el ejemplo, a\u00f1ade tres elementos de Texto y un Rect\u00e1ngulo y dales el estilo que prefieras. <\/li>\n
        3. Ahora a\u00f1adir\u00e1s un elemento que se deslizar\u00e1 desde la derecha. Coloca el elemento Deslizar a la derecha de la librer\u00eda parallax en el Canvas donde termina la imagen del h\u00e9roe.Redimensi\u00f3nalo para que tenga el ancho de la pantalla y 850px de largo. Coloca tres elementos de Texto y un Rect\u00e1ngulo dentro del panel. \"A\u00f1ade<\/li>\n<\/ol>\n

          Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Ver\u00e1s aparecer la imagen principal y poco despu\u00e9s el panel izquierdo de diapositivas. Sigue desplaz\u00e1ndote y ver\u00e1s que a continuaci\u00f3n aparece el panel derecho de diapositivas. <\/p>\n

          Fijar elementos al desplazarse<\/h3>\n
            \n
          1. Coloca un Rect\u00e1ngulo en el Lienzo debajo del elemento Deslizar a la derecha y redimensi\u00f3nalo para que ocupe todo el ancho de la pantalla. A\u00f1ade una imagen de fondo al Rect\u00e1ngulo para que coincida con el ejemplo. <\/li>\n
          2. Con el rect\u00e1ngulo a\u00fan seleccionado, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n
          3. Crea un evento On Scroll<\/strong> + Mover<\/strong>. Selecciona el rect\u00e1ngulo como elemento a mover. Ver\u00e1s que debajo aparecen dos desplegables en los que puedes definir hacia d\u00f3nde quieres que se mueva el rect\u00e1ngulo. Haz clic en el desplegable ‘Y’ (vertical) y selecciona ‘Anclar arriba’. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.\"Fija<\/li>\n
          4. De vuelta en la paleta Eventos, haz clic en el enlace de texto \u00abA\u00f1adir condici\u00f3n\u00bb situado encima del evento que acabas de crear.
            \n\"Haz
            \nPara construir la condici\u00f3n: <\/p>\n
              \n
            • a.<\/strong> Ve a la pesta\u00f1a Constantes y arrastra la constante Desplazamiento de ventana Y (Scroll Y)<\/strong> al espacio abierto en la expresi\u00f3n.\"Arrastra<\/li>\n
            • b.<\/strong> Vuelve a la pesta\u00f1a Funciones y despl\u00e1zate hasta la secci\u00f3n L\u00f3gica. Arrastra la funci\u00f3n Mayor (><\/strong> ) a la expresi\u00f3n. <\/li>\n
            • c.<\/strong> Ver\u00e1s que aparece un nuevo espacio abierto en la expresi\u00f3n. Haz clic en ese espacio y escribe la posici\u00f3n Y (vertical) del rect\u00e1ngulo. En este ejemplo, el rect\u00e1ngulo se sit\u00faa a 1686px en el lienzo. \"Escribe<\/li>\n
            • d.<\/strong> Haz clic en \u00abAceptar\u00bb para terminar de crear la condici\u00f3n. Este evento y condici\u00f3n fijar\u00e1n el rect\u00e1ngulo en la parte superior de la pantalla cuando te desplaces m\u00e1s all\u00e1 de 1686px en el Lienzo.<\/li>\n<\/ul>\n<\/li>\n
            • Haz clic en el enlace de texto \u00abOtro\u00bb situado debajo del evento que acabas de crear en la paleta Eventos. Crea un evento En Desplazamiento<\/strong> + Mover<\/strong>. Selecciona el rect\u00e1ngulo como elemento a mover. Deja los desplegables \u00abX\u00bb e \u00abY\u00bb fijos con sus valores por defecto y haz clic en \u00abAceptar\u00bb para terminar de crear el evento.
              \n\"Crea
              \nEste evento devolver\u00e1 el rect\u00e1ngulo a su posici\u00f3n original siempre que el desplazamiento de la pantalla sea inferior a 1686px.<\/li>\n
            • Debajo del rect\u00e1ngulo, a\u00f1ade dos elementos de texto y dales el estilo que prefieras. C\u00f3pialos y p\u00e9galos dos veces y distrib\u00fayelos espaciados por el lienzo. Aseg\u00farate de que est\u00e1n encima del rect\u00e1ngulo en la paleta Capas. \"Coloca<\/li>\n<\/ol>\n

              Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Despl\u00e1zate por el proyecto y ver\u00e1s que el rect\u00e1ngulo permanece en la parte superior de la pantalla mientras los elementos de texto pasan por encima de \u00e9l. <\/p>\n","protected":false},"excerpt":{"rendered":"

              Puedes crear f\u00e1cilmente encabezados, pies de p\u00e1gina y ventanas emergentes flotantes en Justinmind utilizando posiciones ancladas. Normalmente, los elementos permanecer\u00e1n en su sitio mientras simulas, pero…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8421],"tags":[],"class_list":["post-126224","post","type-post","status-publish","format-standard","hentry","category-formacion","category-interacciones-web-y-moviles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/126224"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=126224"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/126224\/revisions"}],"predecessor-version":[{"id":126272,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/126224\/revisions\/126272"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=126224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=126224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=126224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}