« Offre spéciale BLACK FRIDAY »  -50% sur FULL TEMPLATES  Du 01/11 au 30/11/22

Comment réaliser des images flottantes superposées ?

3 images superposées

Images flottantes superposées ?

L’effet a pour but de créer une animation avec des images qui vont se superposer donnant l’impression de flotter sur votre page. Effet qui ne laissera pas vos visiteurs sans réaction et qui vous distinguera de tous les autres sites web. 

Qu’est-ce que vous trouverez dans la vidéo ?

Dans cette vidéo, je vous explique pas à pas comment réaliser un effet d’images superposées flottantes avec le divi builder. Un super effet à implémenter sur vos sites web.

Enjoy😎

Classe CSS à positionner dans les modules images

« dr-page-floating » – « dr-page-floating1 » – « dr-page-floating2« 

Code CSS à positionner dans les paramètres de la page

@keyframes floating {

    0% {transform: translate(0,  0px);}

    50%  {transform: translate(0, 15px);}

    100%   {transform: translate(0, 0px);}     

}

.dr-page—floating {   

  animation: floating 7s ease-in-out infinite;

}

.dr-page—floating1 {

  animation-delay: -4.5s;

}

.dr-page—floating2 {

  animation-delay: -3s;

}

Olivier Dufour

Olivier Dufour

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *