Cómo marcar una nueva sección div con formas de movimiento sutiles

Hay muchas formas en que puede hacer que su visitante consciente del hecho de que se muevan a otra sección en su página. Hay una amplia gama de secciones que puede usar en el bate. Pero si está buscando una forma más animada de aclarar esto, le gustará este tutorial. Le mostraremos cómo marcar una nueva sección de la división utilizando formas de movimiento sutiles. Crearemos estas formas con las opciones integradas de la división y agregaremos el movimiento con los efectos del desfile del DIV. Las posibilidades son ilimitadas, pero compartiremos tres ejemplos de diseño que puede usar de inmediato. ¡Podrá descargar los archivos JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Ejemplo no. 1 escritorio

Móvil

Ejemplo no. 2 escritorio

Móvil

Ejemplo no. 3 escritorio

Móvil

Descargue los problemas de formas de movimiento sutiles de forma gratuita para poner sus manos en los aspectos de movimiento sutiles, primero los descargará usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Los pasos generales cargaron la apariencia de la página de destino de la galería de arte para este tutorial, utilizaremos el paquete de apariencia para la galería de arte, pero puede aplicar la técnica de cualquier tipo de sitio web que cree. Agregue una nueva página y cargue la página de diseño del paquete Look.
Agregue una nueva línea a la parte inferior de la estructura de la Sección # 1 de la columna ahora, pasaremos por algunos pasos básicos que se aplican a los tres ejemplos que se han presentado al comienzo de este tutorial. Primero, agregue una nueva fila a la parte inferior de la primera sección de su página utilizando la siguiente estructura de columna:

Dimensión Abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Difundir el cambio y el margen y los valores de llenado.

Margen superior: 10 VW
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Retire el capítulo inferior de la sección # 1 para asegurarse de que la fila y los formularios de movimiento aparezcan en la parte inferior de la sección, tendremos que eliminar el revestimiento inferior de la sección. Cabeza inferior: 0 VW

Recrear el ejemplo no. 1 Agregue la visibilidad del módulo Divisor # 1 Después de haber recorrido los pasos generales, es hora de comenzar a recrear los diferentes ejemplos, comenzando con el primero. Agregue un primer módulo divisor y asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

La línea va a la pestaña Diseño del módulo y cambia el color de la línea.
Color de línea: # FFA100

Dimensión Modifique la configuración de dimensionamiento del módulo.
Peso del divisor: 50 PX

Altura: 50 PX
Extienda luego, acceda a la configuración de espaciado y agregue algunos valores de margen y llenado personalizados.
Margen izquierdo: -200px (solo tableta y teléfono)

Margen derecho: -200px (solo tableta y teléfono)
Junta izquierda: 15 VW
Junta derecha: 15 VW
Transformar también la sesgo, transformaremos fácilmente el módulo agregando un valor de inclinación más bajo en la configuración de transformación.
El fondo: 60 grados

¡El efecto del movimiento horizontal es el momento de agregar diferentes efectos a nuestro módulo! En primer lugar, agregaremos un movimiento horizontal.
Active el movimiento horizontal: sí

Compensación de inicio: 0
GAPACIÓN PROMEDIA: 0 (al 80%)
Compensación final:
Escritorio: 20 (al 85%)
Tableta y teléfono: 5 (al 85%)
Efecto de contaminación dentro y fuera, también agregaremos un efecto de decoloración y salida.
Habilitar el desvanecimiento dentro y fuera: Sí

Opacidad inicial: 0%
Opacidad promedio: 0% (al 36%)
Opacidad final: 100% (al 40%)
Efectos hacia arriba y hacia abajo y completaremos la configuración del módulo agregando un cambio de tamaño y abajo. Active la escala hacia arriba y hacia abajo: Sí
Escala inicial: 20%

Escala promedio: 50% (al 69%)
Escala de conclusión: 100% (al 73%)
Clone Divider # 1 Después de que haya completado el módulo Divisor, puede clonarlo.
Cambie el color de la línea Abra la configuración del módulo duplicada y cambie el color de la línea.
Color de línea: # 24252d

Cambie el espacio y cambie los valores de separación del módulo.

Margen izquierdo: -200px (solo tableta y teléfono)
Margen derecho: -200px (solo tableta y teléfono)


Junta izquierda: 25VW
Junta derecha: 25VW
Cambie el efecto del movimiento horizontal y luego acceda a los efectos de progreso en la pestaña avanzada y cambie la brecha final del efecto de movimiento horizontal.
Compensación final:
Escritorio: -20

Tableta y teléfono: -5
Recrear el ejemplo no. 2 Agregue la visibilidad del Módulo Divisor # 1 Si prefiere recrear el segundo ejemplo, continúe y agregue un primer módulo divisor a la última fila de la sección. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
La línea cambia el color de la línea del módulo a continuación.

Color de línea: # FFA100
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 200 PX
Ancho: 200 PX

Alineación del módulo: centro
Altura: 200 PX
Border, entonces, convertiremos el módulo en un círculo agregando un rayo de borde.
Todas las esquinas: 200 PX
¡El efecto del movimiento horizontal es el momento de agregar los efectos de desarrollo! El primer efecto que usamos es el movimiento horizontal.

Active el movimiento horizontal: sí
Comenzando el desplazamiento: -2

Brecha promedio: 0
Compensación final:
Escritorio: 20
Tableta y teléfono: 5
Efectos hacia arriba y hacia abajo entonces, también activaremos un cambio de tamaño y hacia abajo.
Active la escala hacia arriba y hacia abajo: sí
Escala inicial: 20%

Escala promedio: 100%
Escala de conclusión: 100%
Modo de clon Divider Continuar y clonar todo el modo Divisor.
Cambie el color de la línea Abra el duplicado y cambie el color de la línea.
Color de línea: # 24252d

Cambie el espacio Agregar y un margen superior.

Margen superior: -200px
Cambie el efecto del movimiento horizontal luego, acceda a la configuración del efecto de movimiento horizontal y cambia la brecha final.

Compensación final:
Escritorio: -20

Tableta y teléfono: -5
Recrear el ejemplo no. 3 Agregue la junta de fila ¡Vamos al siguiente y último ejemplo! Comience abriendo el giro que creó en los pasos generales de este tutorial y modifique los valores de llenado desde la configuración de espaciado.
Revestimiento superior: 50 px
Revestimiento inferior: 50 PX

Agregue el Módulo Divisor # 1 Visibilidad Agregue un nuevo módulo divisor a la última fila de su sección y oculte el divisor.
Divisor del espectáculo: no
El fondo de gradiente agrega un fondo degradado adicional.

Color 1: # FFA100
Color 2: # F77F00

Tipo de gradiente: lineal
Dirección de gradiente: 121 grados
Dimensión Vaya a la pestaña Diseño del módulo y cambie la configuración de tamaño de la siguiente manera:
Ancho: 200 PX
Alineación del módulo: centro

Altura: 0px
Spaction Además, agregamos algunos revestimientos personalizados desde arriba y abajo.
Revestimiento superior: 100 px
Finamiento inferior: 100 PX

Efecto del movimiento horizontal ahora es el momento de agregar los efectos de desarrollo, comenzando con un movimiento horizontal en diferentes tamaños de pantalla. Active el movimiento horizontal: sí
Comenzando el desplazamiento: -1 (al 30%)
Brecha promedio: 0

Compensación final:
Escritorio: 20
Tableta y teléfono: 5
Efecto rotativo del desarrollo Completaremos la configuración del módulo agregando un efecto de rendimiento rotativo.
Activar la rotación: si
Rotación de inicio: 0 ° (al 46%)
Rotación promedio: 50 ° (al 75%)

Rotación final: 90 °
Modo de divisor clon continúa y clona todo el módulo.
Cambie el fondo de gradiente Abra la configuración duplicada y cambie los colores de fondo de gradiente.
Color 1: # 24252d
Color 2: # 16161C

Cambie el espacio Agregue un margen superior negativo.

Margen superior: -100px
Cambie el efecto de desplazamiento horizontal y cambie la brecha final del movimiento horizontal en la configuración de los efectos de configuración.
Compensación final:

Escritorio: -20
Tableta y teléfono: -5

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Ejemplo no. 1 escritorio
Móvil
Ejemplo no. 2 escritorio
Móvil

Ejemplo no. 3 escritorio

Móvil