Obtenga una vista previa para ver cómo se ve este diseño en el móvil.
Para ver las instrucciones, cambie al escritorio.
Recrea esta animación de desplazamiento
Utilice nuestros Sandboxes para experimentar con herramientas y funciones del Editor de Estudio y tener una idea de lo que es posible con la plataforma.
Siga los pasos de este Sandbox para recrear una sección con animación de desplazamiento.
Desplácese hacia abajo para comenzar
5-10 minutos
_gif.gif)
PART 1/3
Configurar el efecto de desplazamiento de fondo
Trabaja aquí
1
Añadir el fondo de la sección
a.
Desplácese hasta la sección vacía debajo de esta y haga clic para seleccionarla. Puede editar la sección desde el panel Inspector a la derecha.
En la pestaña Diseño del panel Inspector,
Elija Agregar imagen o video
b.
do.
Busca "Dalia". Selecciona la imagen utilizada en el diseño final. Haz clic en "Cambiar fondo".
2
Añade el efecto de desplazamiento de fondo
a.
Seleccione la sección
b.
Desde el menú flotante del lienzo, haga clic en Efectos de desplazamiento de fondo
do.
Elija Parallax
En la parte superior del panel Inspector, abra el menú desplegable Comportamiento responsivo y elija Ajustar a la pantalla
d.
e.
Muy bien. Pulsa "Vista previa" en la parte superior derecha para ver el efecto en acción.
Una vez que haya terminado, desplácese hacia abajo hasta la Parte 2 ↓
Los cambios realizados en la Parte 1 se trasladan a la siguiente sección.
Coloca tus elementos
PARTE 2/3
Posicionar el texto
1
a.
Seleccione el elemento de texto a continuación y arrástrelo a la sección inferior. Colóquelo justo encima del centro de la sección. Manténgalo seleccionado.
b.
Desde el panel Inspector, cambie el comportamiento Responsivo a Abrazar
do.
En Diseño , cambie el tamaño de fuente a 120 px*
Duplicar el texto
2
a.
Copy and paste to duplicate the text element
b.
Coloque el segundo elemento de texto debajo del original.
do.
Mantenga presionada la tecla Mayús para seleccionar ambos elementos de texto. Use los íconos azules en la parte superior del panel Inspector y seleccione Alinear al centro horizontal.
Apilar y alinear el texto
3
a.
Con ambos elementos de texto seleccionados, elija Apilar en el menú flotante del lienzo
b.
Utilice los íconos azules en la parte superior del panel Inspector para alinear la pila con el centro vertical de la sección
Activos para uso
Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres /
Añadir animaciones
PARTE 3/3
Añadir una animación de desplazamiento
1
Seleccione el elemento de texto superior. En la parte superior del panel Inspector, abra la pestaña Interacciones.
a.
b.
En Desplazarse , haga clic en +Agregar
do.
Seleccione la animación Mover y haga clic en Ajustar animación
Ajustar la animación
2
a.
Cambie el ángulo a 270°
b.
Adjust the Animation area slider to go from 0% to 100%
Añade la segunda animación de desplazamiento
3
a.
Seleccione el elemento de texto inferior
b.
Repita el paso 1 para agregar la animación de desplazamiento.
do.
Establezca el ángulo a 90°
d.
Ajuste el área de animación para que vaya del 0% al 100%
¡Genial! Ya está todo listo. Previsualiza el resultado.
Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres /
Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres /
Hemos añadido más elementos en la sección de abajo para que puedas ver el diseño final. Haz clic en la vista previa para verlo.
Bloom & Cía.
Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres /
Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres / Flores silvestres /
Todas las flores solían ser silvestres. Son esenciales para la vida. Por eso, solo usamos flores silvestres nativas en nuestros arreglos y plantamos semillas nuevas por cada ramo vendido.
Las flores silvestres en flor nos brindan mucho más que una explosión de color. Plantarlas atrae a los polinizadores y contribuye al equilibrio de la naturaleza.
Domine el uso del Editor de Studio y encuentre otros recursos para perfeccionar sus habilidades en la Academia de Wix Studio.
Asegúrese de hacer clic en “ Vista previa ” antes de iniciar un nuevo Sandbox.
Pruebe más Sandboxes