Créez une animation d'image d'arrière-plan en mouvement à l'aide du générateur de pages d'élémentateur gratuit

Créer une animation d'image d'arrière-plan en mouvement à l'aide du générateur de pages Free Elementor me semble très facile maintenant Ici, vous devez ajouter du code CSS dans la page Il existe un moyen d'ajouter du code CSS gratuit Elementor aussi.

Je vais partager quelque chose d'étonnant avec l'image de fond C'était vraiment amusant de créer quelque chose de génial qui semble accrocheur Voici deux sources sur différents types de Fond de la page de l'élémentateur et Fond incliné de l'élémenteur Assurez-vous de vérifier cela si vous souhaitez organiser votre page ou vos sections d'élément ou votre arrière-plan de manière créative. 

Qu’est-ce qu’une animation d’image de fond en mouvement ?

UN animation d'image d'arrière-plan mobile est une animation CSS en boucle qui glisse lentement une large image d'arrière-plan derrière le contenu de votre page, de sorte que la section se sent vivante sans charger un fichier vidéo Dans Elementor, vous le construisez avec une section pleine hauteur, deux espaceurs portant les ID CSS bg et superposition1, et un court bloc de CSS @keyframes code collé dans un widget HTML : aucune licence Elementor Pro et aucun JavaScript requis. C'est l'un des plus légers Effets d'animation d'élémenteurs vous pouvez ajouter, car le navigateur anime une seule transformation au lieu de lire un média.

Voyons d'abord à quoi cela ressemble exactement dans la vidéo suivante.

Cette section est disponible en Bibliothèque de modèles Master Addons gratuitement. Vous pouvez facilement l'importer dans votre page Web si vous êtes un Ajout de modules complémentaires principaux : module complémentaire de création de pages Elementor utilisateur plugin. 

        <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. 

Vérifier comment installer et activer le plugin Master Addons

Créez une page ou une publication et modifiez-la à l'aide d'Elementor. Vous verrez l'icône de la bibliothèque Master Addons Template. 

Cliquez sur la bibliothèque MA Tempalte et attendez quelques secondes pour charger les données Vous verrez “Ready Page” et “Sections” Cliquez sur l'onglet sections et attendez quelques secondes Maintenant vous verrez le “Moving Background image animation”. 

Cliquez maintenant sur l'icône de zoom pour l'afficher en avant-première Ensuite, vous verrez un bouton d'insertion Cliquez sur ce bouton “insert” pour obtenir ce modèle en un clic Après cela, vous êtes libre de modifier le contenu.

Voici à quoi ressemblera votre section J'utilise le thème par défaut de WordPress dans mon localhost Cliquez simplement sur le titre ou le paragraphe ou le social pour modifier le contenu. 

Si vous souhaitez ajouter votre propre image et votre propre effet de superposition, vous devez passer au modification de la section BG et Overlay Image maintenant.

Tutoriel d'animation d'images d'arrière-plan en mouvement

Réponse courte : créez une section Élémenteur à une colonne définie sur “Fit to screen”, ajoutez une entretoise avec l'ID CSS bg au-dessus de votre contenu et un deuxième espaceur avec l'ID superposition en dessous, collez ensuite le code d'animation CSS ci-dessous dans un widget HTML et échangez votre propre URL d'image. Vous avez besoin de trois éléments d'actif : une image d'arrière-plan large, une superposition PNG et une superposition SVG et l'ensemble de la version prend environ dix minutes sur le générateur de pages gratuit Elementor.

Actifs dont vous avez besoin : 

1. Une image ayant 1500 par 500 pixels Dimensions
2. Une image superposée PNG
3. Une image superposée SVG

Ajoutez maintenant une structure à une colonne et faites en sorte que sa hauteur soit “Fit to screen”. 

Ajoutez simplement votre contenu maintenant. Je vais partager les informations de typographie du contenu de la démo ici. 

Titre (élément de titre par défaut de l'élément d'utilisation): Famille de polices : Source Sans Pro, Taille de la police : 120 px, Poids de la police : 900, Hauteur de la ligne : 140, Espacement des lettres : -5, Couleur : Noir

Texte (élément d'éditeur de texte par défaut de l'élément d'utilisation): Famille de polices : Source Sans Pro, Taille de la police : 30 px, Poids de la police : 400, Hauteur de la ligne : 40, Couleur : Noir

Social (élément social par défaut de l'élément d'utilisation): Forme : Cercle, Alignement : Centre, Couleur : Personnalisé, Noir primaire : rgba (175,175,175,0), Couleur secondaire : Noir, Taille : 40, Espace : 30, Type de bordure : Solide, Largeur de bordure : 2, Couleur de bordure : Noir

Jetez un œil à l'animation GIF suivante et vous comprendrez comment appliquer toutes ces propriétés dans votre élément ou élément. 

Mettez z-index=1 à chaque élément à l'aide de l'onglet avancé Il suffit de cliquer sur chaque élément et de naviguer vers l'onglet Avancé Vérifiez l'image suivante. 

(Si vous manquez cela, vous rencontrerez un problème lors de l'édition du contenu des éléments après avoir ajouté du code CSS d'image d'arrière-plan mobile. Vous devez utiliser le système Elementor Navigator pour modifier le contenu si vous ne mettez pas d'index z ici.)

Maintenant Ajouter deux espaceurs L'un est en haut du titre et un autre est en bas de l'icône des médias sociaux. 

Mettez “BG” comme ID dans l'espaceur supérieur Et mettez “overlay” comme ID dans l'espaceur inférieur. 

Ajout de BG ID dans l'espaceur supérieur

Ajout d'un identifiant de superposition dans l'espaceur inférieur

Ajouter les “HTML” élément sous l'icône de médias sociaux ou en haut de la deuxième entretoise. 

Modification de l'image BG et lien de superposition d'image

Vous souvenez-vous de nos ressources d'animation d'images Moving BG ? il est maintenant temps de les télécharger dans votre site Web Téléchargez l'image d'arrière-plan, la superposition PNG et l'image de superposition SVG. Ensuite, copiez ces 3 liens et listez dans votre éditeur de code ou bloc-notes. 

Copiez le code suivant dans votre éditeur de code Et modifiez le lien image de fond, lien de superposition d'image PNG et SVG J'ai ajouté deux captures d'écran où vous pouvez trouver facilement quels liens vous devriez modifier. 

Cliquez sur chaque image pour voir la version haute résolution. 

Modifier l'URL de l'image d'arrière-plan

Modifier l'URL des images de superposition

<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>

Copiez maintenant votre code édité avec des images Bg et Overlay Puis collez-le dans l'élément HTML Vous verrez le résultat instantanément Si vous savez travailler avec CSS alors vous pouvez personnaliser l'animation aussi.

Changeons la couleur du texte et celle des réseaux sociaux en blanc pour voir l'aspect exact que je vous ai montré.

Il s'agit de créer Moving Background Image Animation à l'aide du plugin elementor page builder Vous pouvez styliser votre contenu en utilisant notre Plugin de Maître Addon aussi. Ce sera l'arrière-plan fixe pour votre page Si vous voulez définir l'arrière-plan mobile pour une section alors il suffit de changer la position en “absolu“. 

N'hésitez pas à commenter ici si vous rencontrez un problème. Je vous guiderai pour personnaliser votre animation d'image BG en mouvement.

Foire aux questions