4 Botones de desfile animados para la sección Héroe de tu Div

Los botones de desfile animados tienen una tarea simple pero importante de atraer la atención de los usuarios y llevarlos a su página web. Estos tipos de botones están normalmente por encima de la página, de modo que un visitante puede hacer clic en el botón sin tener que ejecutarse en la siguiente sección importante de la página web. De hecho, DIV tiene esta característica del botón de desplazamiento incorporado en el módulo de encabezado de ancho completo. En este tutorial, le mostraré cómo crear botones animados completamente personalizados en la división. Entonces, si está buscando una alternativa creativa al botón de desfile incrustado en el barco de ancho completo, estos botones de desplazamiento animado lo ayudarán a ir en la dirección correcta (literalmente).
Eche un vistazo rápido a los proyectos que construiremos juntos.




Descargue la apariencia de botones de desplazamiento animado de forma gratuita para poner su mano en los dibujos en este tutorial, primero tendrá que descargarlo 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!
Suscríbase a nuestro canal de YouTube para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en el constructor. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás tener lo siguiente:
El tema instalado y activo
Una nueva página creada para construir desde cero en el frente (Visual Builder)
Imágenes que se utilizarán para contenido falso
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Construyendo la sección del encabezado antes de comenzar a diseñar los botones de desplazamiento animado, debemos configurar nuestra sección de encabezado falso. Debido a que nos centraremos más en obtener diseños animados de botones de desplazamiento, mantendremos el diseño del diseño con un fondo oscuro. Después de haber terminado, podemos duplicar la sección para abordar cada nuevo diseño del botón de desplazamiento.
Para comenzar, cree una sección regular con una fila de una columna.
Luego, antes de agregar un módulo, abra la configuración de la sección y agregue un fondo oscuro de la siguiente manera: Color de fondo: # 222222 Funcionará cualquier fondo oscuro. Agregue el texto del encabezado para crear el texto del encabezado falso, agregue un nuevo módulo de texto a su vez con una sola columna.

Luego actualice el contenido del cuerpo con un encabezado H1 justo por encima del texto de párrafo predeterminado. & amp; lt; h1 & amp; gt; botón de desplazamiento animación & amp;/h1 & amp; gt;

& amp; lt; p & amp; gt; su contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. También puede diseñar todos los aspectos de este contenido en la configuración de diseño del módulo e incluso aplicar la costumbre a este texto en la configuración avanzada del módulo. & Amp;/p & amp; gt;

Luego actualice la configuración de diseño de la siguiente manera: Fuente Texto: Karla Alineación Texto Texto: Centro de encabezado Texto: 5VW Color: Abrir
Este será el diseño de la sección básica que utilizaremos para los diferentes botones de desplazamiento animado. Diseño del botón de desfile animado # 1: Texto vertical con animación de retorno lento Considerando el diseño de la sección básica, estamos listos para agregar nuestro primer botón de desplazamiento animado. Este botón de desplazamiento consiste en un módulo de desenfoque que tendrá un icono a la derecha. Luego, el texto y el icono se girarán verticalmente, de modo que el icono de flecha se dirija hacia abajo. Después de eso, agregaremos la animación de rechazo con una duración lenta.

Aquí le mostramos cómo hacerlo. Primero, agregue una nueva fila con una columna justo debajo de nuestro turno que contiene el texto del encabezado.

Luego agregue un módulo de propaganda en una fila.
En la configuración de la propaganda, elimine el contenido predeterminado del cuerpo y agregue lo siguiente: Título: Scroll Use el icono: Sí Icono: Arrow Right (consulte Captura de pantalla) Luego actualice la configuración de diseño de la siguiente manera: Color del icono: #FFFFF Place Imagen / Icon: Izquierda Use el tamaño del icono Font: Sí Tamaño del icono Fuente: 50 PX Fuente Estilo Título: TT Title Texto Color: #FFFFFF Tamaño de texto Título: 14 PX Letras de título: 3 PX Altura de línea de título: 50 PX (así como tamaño de fuente icono)

Luego, tenemos que darle a la propaganda un ancho establecido y rotarlo verticalmente, como sigue: Ancho: 132px Alineación del módulo: El eje del centro de transformación Z: 90 grados ahora, todo lo que tenemos que hacer es revertir el orden de la propaganda, de modo que el ícono de la flecha debe estar a la derecha de la propaganda en lugar de la izquierda. Esto hará que la flecha se muestre debajo del texto vertical según lo previsto. Para hacer esto, debemos agregar los siguientes elementos CSS personalizados al elemento principal: Dirección: RTL;

Agregar animación de pulso lento para agregar animación, actualice lo siguiente:

Estilo de animación: Dirección de rebote de la animación: Down La duración de la animación: 5000 ms de retraso Animación: 400 ms Imagen Animación / icono: De izquierda a derecha

Resultado final ahora, verifiquemos el resultado final para el Proyecto # 1.

Diseño del botón de desfile animado no. 2: Animación de texto con carcasa vertical El siguiente diseño se basa en el diseño no. 1, en el sentido de que mantendremos el botón vertical para llevar a cabo el texto creado usando el módulo de la propaganda. La diferencia será la animación. Para este diseño, agregaremos una animación de diapositivas que comience con el botón de desplazamiento oculto sobre el contenedor de fila y luego termina con el botón oculto a continuación. Con la animación en el bucle, esto creará un efecto de marcado de texto que atraiga la atención del usuario. Primero copie la Sección de diseño completa # 1. Actualice la configuración de la fila y luego actualice la fila de sección que contiene el botón de módulo de propaganda / desplazamiento de la siguiente manera:
Desbordamiento horizontal: Overflow verticalmente oculto: oculto

Actualice la configuración del módulo de blurb para crear la animación de marcado, primero debemos usar la transformación para mover el texto de la propaganda en el contenedor de fila (oculto de vista). Esta será la posición en la que el texto estará al final de la animación. Actualizar lo siguiente: Transformar la traducción del eje y: 115 PX

Luego agregue la siguiente configuración de animación:
Estilo de animación: Dirección de diapositivas de la animación: Down La duración de la animación: 4000 ms Intensidad de la animación: 195% Opacidad inicial: 100% Curva de velocidad de animación: Repita lineal Animación: Loop

Resultado final ahora, verifiquemos el resultado final para el Proyecto # 3.

Diseño del botón de desfile animado no. 3: La pestaña de flecha con animación deslizante tardía para este próximo proyecto, combinaremos un módulo de texto y un módulo de propaganda para crear un diseño de archivo de flecha único. Para este diseño comenzaremos con el diseño básico de la sección del encabezado. Por lo tanto, puede duplicar la sección de diseño duplicada # 3 y luego borrar el módulo de la propaganda de la fila 2. Luego agregue un módulo de texto en una fila con una columna directamente debajo de la primera fila. Luego actualice el contenido del cuerpo con la palabra “desplazamiento”.

Luego, actualice la configuración de diseño de la siguiente manera: Color de fondo: #FFFFFF TEXTO Color Texto: # 222222 Alineación de texto: Ancho Centro: 50 PX Alineación del módulo: Margen Centro: 0 PX Bajo el revestimiento: 20 PX hacia arriba, 20 PX Down Rounded Corners 5 PX Bottom Bottom izquierda, 5 px hacia abajo a la derecha
Agregue el icono de la propaganda ahora que el módulo de texto está en su lugar, debemos crear el icono de la propaganda directamente debajo para completar el diseño de la flecha. Para hacer esto, agregue un nuevo módulo de propaganda en el módulo de texto.

Luego elimine el título predeterminado y el texto del cuerpo. Luego agregue la siguiente actualización: Use el icono: Sí Icono: Triángulo Down (ver captura de pantalla)

Luego, actualice la configuración de la siguiente manera: Color del icono: #FFFFFF Marja: -36 PX en la parte superior, 0 PX en la parte inferior Este margen negativo conectará la flecha al módulo de texto para un hermoso diseño del archivo de flecha. Luego agregue el siguiente CSS a la imagen de la propaganda para eliminar un margen inútil debajo del icono. Imagen de blurb CSS: Bottom de margen: 0px;

Fila 2 Configuración y animación Debido a que queremos agregar la misma animación a ambos módulos que componen el diseño del botón de desplazamiento, tendremos que agregar la animación en la fila. Actualice la configuración de la fila de la siguiente manera: Ancho máximo: 100 px revestimiento: 0 px arriba, 0 px estilo de animación hacia abajo: Dirección de portaobjetos de animación: Down the Duration of Animation: 1200 ms fila 1 el color del fondo y el tono de la caja el El toque final de este diseño implica agregar un color de fondo en la primera fila directamente sobre la fila del botón de desplazamiento. Y al actualizar el índice Z de esa fila, permitiremos que la animación del botón de desplazamiento aparezca como si estalle el encabezado. Abra la configuración para la fila 1 de la siguiente manera: Wallpaper: # 222222z-índice: 10

Box Shadow: Vea la captura de pantalla de la Box Shadow Vertical Post: 80px Power of the Shadow of the Box: 22 PX Potencia de la sombra de la caja: -70px Color de sombra: # 22222 (asegúrese de que coincida con el color de fondo)

Resultado final ahora verifique el resultado final.

Botón de diseño animado Botón de desfilation # 4: Animación del desfile del mouse Para este último botón de desplazamiento animado, crearemos una animación para desplazar el mouse combinando un texto y un módulo de propaganda. Aquí le mostramos cómo hacerlo. Para comenzar, puede usar la sección de encabezado básico. Luego agregue una nueva fila debajo de la fila 1.

Agregue el módulo de propaganda y luego, agregue un módulo de propaganda en una fila. Luego elimine el título predeterminado y el texto del cuerpo. Después de eso, actualice el icono de la siguiente manera: Use el icono: Sí Icono: Círculo (ver captura de pantalla)

Luego, actualice la configuración de diseño de la propaganda de la siguiente manera: Color del icono: #FFFFF Use el tamaño del icono Font: DA Tamaño de fuente Icono: 15 PX Estilo de animación: Dirección de la animación de deslizamiento: Down the Duration of Animation: 1200 ms Repetir animación: Imagen Animation / icon Loop: sin animación, luego agregue los siguientes CSS personalizados en la explosión Imagen: Margen-Bottom: 0px; Agregue el módulo de texto y luego, agregue un nuevo módulo de texto directamente debajo del módulo de la propaganda. Luego actualice el texto del cuerpo con la palabra “desplazamiento”.

Luego actualice la siguiente configuración de texto: Color de texto de texto: #FFFFFFF Alineación de texto: Width Center: 90 PX Margen: 10 PX Up, -30 Px Izquierda

Actualización de la fila Configuración 2 Ahora actualice la configuración de la fila de la siguiente manera: Ancho: 30 PX Altura: 60 PX Corrnia redondeadas: 16 PX Ancho de borde: 1 PX Color de borde: #FFFFFF FIFER BORDE: Overflojo horizontal sólido: Visiblemente Overfullo vertical: Visible

El resultado final ahora para verificar el resultado final:

Agregar funcionalidad de enlace de anclaje Los enlaces de anclaje son aquellos enlaces que van a diferentes secciones de una página. A menudo se usan en sitios web de una sola página. Podemos usar el mismo concepto para agregar un enlace de anclaje a nuestros botones de desplazamiento para que salgan por la página en la sección deseada. Para agregar la funcionalidad de la conexión de anclaje a los botones de desplazamiento animado, debe hacer dos cosas principales.

Debe agregar una identificación de CSS a la sección o fila que desea pasar

Debe agregar un enlace de anclaje con la misma ID de CSS al botón de desplazamiento

Así es como funcionaría esto. Primero, cree una nueva sección debajo del encabezado que contiene el botón de desplazamiento. Luego, le dé a la nueva sección una identificación CSS en la pestaña avanzada. Luego busque el elemento en ejecución / botón que desea convertir en su conexión de anclaje y agregue una URL que comience con un hashtag (o el símbolo de señuelo) y es seguido inmediatamente. ID de CSS del artículo que saltas. Por ejemplo, si la ID CSS de la sección es “Sección 2”, agregará “# Sección 2” como URL del enlace.

Recuerde, DIV le permite agregar URL de los enlaces a cada elemento en la división, por lo que no dude en agregar enlaces a toda la fila que contiene el botón de desplazamiento animado. Para obtener más información, consulte algunas cosas interesantes que puede hacer con los enlaces de anclaje. ¡Ser creativo! No tenga miedo de combinar diferentes módulos y animarlos de diferentes maneras. De hecho, si bien exploramos nuevas formas de diseñar botones de desplazamiento de desplazamiento, creamos una divertida animación de contaminación que podría usarse para dispositivos móviles. Lo incluí en la descarga gratuita de arriba, si desea verificarlo.

Pensamientos finales Los botones animados de desfile son fáciles de construir con Div. Y se pueden usar en más lugares que el encabezado, si los trata como enlaces de anclaje. Espero que estos modelos lo inspire a crear un nuevo botón de desplazamiento para su próximo proyecto. Espero tener noticias suyas en los comentarios. ¡Suerte!