Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.
Creando el efecto Parallax con JetElements
Creando el efecto Parallax con JetElements
Charlies Academy
Diseño Web
Eric Nieves Rivera
Project Design
Yogufruti
Dr Steven Roman
Jessy Rojas
Emotion
King Sandwich
Intense
Advanced Chiropractic Services
Giovannis Pizza
Colon Pratts Rascacielo
Mofongo Italiano
PALS
OceanWP Rascacielos
RC Joyeros
Max International
Crossway Salon
Desnudando el Corazon
Seguros Yazmín Irizarry
Natural Life Center
Tu Anuncio Podria Estar Aqui
Farmacia Central SS
Generate Press
Villas del Rey Hotel
Machete
Plomeria Garcia
ACPI PR
Advanced Digital Image
Para cambiar el orden de los elementos de paralaje, arrastra y suelta los elementos hacia arriba y/o hacia abajo. El primer elemento de la lista se mostrará sobre todos los demás elementos y los cubrirá. El último elemento de la lista se mostrará debajo de todas las demás capas de elementos.

En este Tutorial, puedes obtener más información sobre la creación de fondos con efectos de paralaje utilizando el Efecto Parallax de JetElements.

parallax

Primero, vamos a acceder al área de ajustes o configuración del fondo de la sección de Elementor. Para hacerlo, navega hasta el editor de páginas de Elementor y has clic en el botón Agregar nueva sección.

Añadir Seccion Elementor

Añadir Seccion par2

Ahora selecciona la estructura de la sección y agrégale widgets de contenido (por ejemplo, espaciadores, encabezados, imágenes, etc.).

Vé al borde superior de la sección y has clic en la opción Editar sección para acceder a la configuración de la sección.

Editar seccion

Jet Parralax TabEn la Configuración de Diseño, localiza la pestaña de Jet Parallax. Ábrelo y has clic en el botón Añadir Elemento para agregar un nuevo elemento con el efecto Parallax. Al hacerlo, de inmediato puedes ver la lista de las configuraciones de Parallax que hay disponibles.

Has clic en el elemento recién creado y una vez allí has clic en Imagen para agregar una nueva imagen de la biblioteca de medios o cargarla desde tu disco duro. También puedes agregar una imagen dinámica personalizada.

Para cambiar la velocidad del efecto de paralaje, debes utilizar el control de velocidad de paralaje. Arrástralo hacia la izquierda para reducir la velocidad, o hacia la derecha para aumentarla.

Seleccione el tipo de paralaje de la lista desplegable

Opciones de ParralaxTipos de paralaje.

Ninguno: selecciona este tipo de paralaje para no usar efectos de paralaje para este elemento.

Desplazar: selecciona este tipo para aplicar el efecto de paralaje en el desplazamiento.

Mover con el mouse: seleccione este tipo para que el efecto de paralaje responda a los movimientos del mouse.

Fondo X Posición%: define la posición horizontal del elemento en porcentajes en relación con el fondo.

Fondo Y Posición%: define la posición vertical del elemento en porcentajes en relación con el fondo.

Tamaño de fondo: aquí puedes seleccionar el tamaño preferible para el elemento (Automático, Abarcar o Contenedor).

Propiedad de animación: aquí puedes definir el efecto de animación para el elemento (Posición de fondo, Transformar, Transformar 3D)

Habilitar en dispositivo: aquí puede especificar los dispositivos donde aparece el elemento.

Ten en cuenta que puedes agregar tantos elementos con diferentes configuraciones de paralaje (velocidad, posición), como lo necesites.

Para cambiar el orden de los elementos de paralaje, arrastra y suelta los elementos hacia arriba y/o hacia abajo. El primer elemento de la lista se mostrará sobre todos los demás elementos y los cubrirá. El último elemento de la lista se mostrará debajo de todas las demás capas de elementos.

Índice Z: usa esta opción si deseas que el elemento de paralaje cubra el contenido de la sección.

Para ver los cambios, has clic en el botón Guardar para guardar los cambios y has clic en la opción Ver página en la esquina inferior izquierda para navegar a la página y ver los resultados.

Cómo Evalúas este Tutorial​
/5

Deja un comentario

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

Publicaciones que también podrían interesarte

El widget de Navegación por Desplazamiento

El widget de Navegación por Desplazamiento

El widget de Navegación por Desplazamiento o Scroll Navigation…
Cómo añadir una búsqueda AJAX con JetSearch

Cómo añadir una búsqueda AJAX con JetSearch

Play Video El Formulario de búsqueda AJAX es un…
Cómo crear un Mega-Menú

Cómo crear un Mega-Menú

Existen términos que nada más el leerlos nos resultan…