Cree animación de imágenes de fondo en movimiento utilizando el generador de páginas Elementor gratuito

Crear una animación de imagen de fondo en movimiento utilizando el creador de páginas Free Elementor me parece muy fácil ahora. Aquí necesitas agregar algo de código CSS dentro de la página. También hay una manera de agregar código CSS gratis Elementor.

Voy a compartir algo sorprendente con la imagen de fondo. Fue muy divertido crear algo increíble que parece llamativo. Aquí hay dos fuentes sobre diferentes tipos de Antecedentes de la página Elementor y Fondo sesgado de Elementor Asegúrate de comprobarlo si quieres organizar el fondo de tu elemento o página o sección de forma creativa. Si prefiere rotar varias fotos detrás de una sección en lugar de desplazarse una imagen, la gratuita control deslizante de fondo la extensión en Master Addons lo hace sin ningún CSS.

¿qué es una animación de imagen de fondo en movimiento?

A animación de imagen de fondo en movimiento es una animación CSS en bucle que desliza lentamente una amplia imagen de fondo detrás del contenido de su página, de modo que la sección se sienta viva sin cargar un archivo de video. En Elementor lo construyes con una sección de altura completa, dos espaciadores que llevan los ID de CSS bg y superposición, y un bloque corto de CSS @claveframes código pegado en un widget HTML «no se requiere licencia Elementor Pro ni JavaScript. Es uno de los más ligeros Efectos de animación elemental puede agregar porque el navegador anima una única transformación en lugar de reproducir medios.

Primero veamos cómo se ve exactamente en el siguiente vídeo.

Esta sección está disponible en Biblioteca de plantillas de complementos maestros gratis. Puede importar esto fácilmente dentro de su página web si es un Complementos maestros Complemento de creación de páginas Elementor ñame usuario del complemento. 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

Verificar cómo instalar y activar el complemento Master Addons

Cree una página o publique y edítela usando elementor. Verá el icono de la biblioteca de plantillas de complementos maestros. 

Haga clic en la biblioteca MA Tempalte y espere unos segundos para cargar los datos. Verás “Página lista” y “Secciones”. Haga clic en la pestaña de secciones y espere unos segundos. Ahora verá la “animación de imagen de fondo en movimiento”. 

Ahora haga clic en el icono de zoom para obtener una vista previa. Luego verá un botón de inserción. Haga clic en este botón “insertar” para obtener esta plantilla con un solo clic. Después de eso, podrá editar el contenido.

Así será tu sección. Estoy usando el tema predeterminado de WordPress en mi localhost. Simplemente haga clic en el título, párrafo o social para editar el contenido. 

Si desea agregar su propia imagen y efecto de superposición, debe pasar a cambiando la sección BG y superposición de imágenes ahora.

Tutorial de animación de imágenes de fondo en movimiento

Respuesta corta: cree una sección Elementor de una columna configurada en “Caja en la pantalla”, agregue un espaciador con el ID de CSS bg encima de tu contenido y un segundo espaciador con el ID superposición debajo, luego pegue el código de animación CSS a continuación en un widget HTML e intercambie las URL de su propia imagen. Necesitas tres recursos «una imagen de fondo amplia, una superposición PNG y una superposición SVG « y toda la compilación tarda unos diez minutos en el creador de páginas gratuito Elementor.

Acțiuni necesare: 

1. Una imagen que tiene dimensiones de 1500 por 500 píxeles
2. Una imagen superpuesta de PNG
3. Una imagen superpuesta de SVG

Ahora agregue una estructura de una columna y haga que su altura sea “Ajustada a la pantalla”. 

Simplemente agregue su contenido ahora. Voy a compartir la información de tipografía del contenido de demostración aquí. 

Título (elemento de encabezado predeterminado de Elementor usado): Familia de fuentes: Fuente Sans Pro, Tamaño de fuente: 120px, Peso de fuente: 900, Altura de línea: 140, Espaciado de letras: -5, Color: Negro

Texto (Elemento de editor de texto predeterminado de Elementor usado): Familia de fuentes: Fuente Sans Pro, Tamaño de fuente: 30px, Peso de fuente: 400, Altura de línea: 40, Color: Negro

Social (Elemento social predeterminado del Elementor usado): Forma: Círculo, Alineación: Centro, Color: Personalizado, Negro primario: rgba(175,175,175,0), Color secundario: Negro, Tamaño: 40, Espacio: 30, Tipo de borde: Sólido, Ancho de borde: 2, Color de borde: Negro

Eche un vistazo a la siguiente animación GIF y comprenderá cómo aplicar todas estas propiedades dentro de su elemento o elemento. 

Coloque z-index=1 en cada elemento usando la pestaña avanzada. Simplemente haga clic en cada elemento y navegue hasta la pestaña Avanzado. Verifique la siguiente imagen. 

(Si se pierde esto, tendrá problemas al editar el contenido de los elementos después de agregar el código CSS de la imagen de fondo en movimiento. Debe usar el sistema Elementor Navigator para editar el contenido si no coloca el índice z aquí)

Ahora agregue dos espaciadores. Uno está en la parte superior del título y otro en la parte inferior del ícono de las redes sociales. 

Coloque “BG” como ID en el espaciador superior. Y coloque “superposición” como ID en el espaciador inferior. 

Agregar ID de BG en el espaciador superior

Agregar ID de superposición en el espaciador inferior

Agregue el “HTML” elemento debajo del ícono de las redes sociales o en la parte superior del segundo espaciador. 

Cambio de imagen BG y enlace de imagen superpuesta

¿recuerda nuestros recursos de animación de imágenes Moving BG? Ahora es el momento de cargarlos en su sitio web. Cargue la imagen de fondo, la superposición de PNG y la imagen de superposición de SVG. Luego copie estos 3 enlaces y enumere en su editor de código o bloc de notas. 

Copie el siguiente código en su editor de código. Y cambie el enlace de la imagen de fondo, el enlace de superposición de imágenes PNG y SVG. He agregado dos capturas de pantalla donde puedes encontrar fácilmente qué enlaces debes cambiar. 

Haga clic en cada imagen para ver la versión de alta resolución. 

Cambiar la URL de la imagen de fondo

Cambiar URL de imágenes superpuestas

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

Ahora copie su código editado con imágenes Bg y Overlay. Luego péguelo en el elemento HTML. Verás el resultado al instante. Si sabes trabajar con CSS, también puedes personalizar la animación.

Cambiemos el color del texto y el color de las redes sociales a blanco para ver el aspecto exacto que les he mostrado.

Se trata de crear animación de imágenes en segundo plano mediante el complemento elementor page builder. Puede diseñar su contenido utilizando nuestro Complemento del complemento maestro también. Este será el fondo fijo para su página. Si desea establecer un fondo móvil para una sección, simplemente cambie la posición a “absoluto“. 

No dudes en comentar aquí si te enfrentas a algún problema. Te guiaré para personalizar tu animación de imagen BG en movimiento.

Preguntas frecuentes