Plusieurs animations décalées dans le temps

Version imprimable

09/07/2018, 17h53
taka10

Plusieurs animations décalées dans le temps
Bonjour,

J'essaie de reproduire l'effet suivant : http://www.amandegelateria.it/ (ou sur ce site https://www.sbs.com.au/margarete/)

C'est à dire avec la glace, le polaroid et l'image de fond, on a l'impression que les événements se font l'un après l'autre, j'ai regardé le code source et je vois e ngros ceci :
Code:

1 2 3 4 5 <section id="homepage"> <div class="drawing">...</div> <div class="spoon">...</div> <div class="polaroid">...</div> </section>
Au chargement, la class "visible", s'ajoute la balise "section" et du coup les éléments arrivent l'un après l'autre, juste en ajoutant la class visible.

J'ai tenté de faire la même chose mais mes éléments arrivent en même temps, je ne comprend pas.

Voici ce que moi j'ai fait en jquery :
Code:

1 2 3 4 5 $('.conteneur_principal').queue(function(next){ $(this).addClass('visible'); next(); });
D'avance, je vous remercie
09/07/2018, 23h24
psychadelic

a titre perso, pour ce genre de chose je code moi-même ce genre de truc à coup de promesses JavaScript => https://developer.mozilla.org/fr/doc..._les_promesses
surtout que ça s'est simplifié avec les instruction async et await.

Sinon, il y a aussi une excellente librairie JS pour ça : GSAP.js https://greensock.com/gsap

Bonjour,

Merci pour votre retour, j'ai bien compris le coup des promesses mais cela ne s'applique à mon cas (si je ne veux pas changer le principe) car la seule action qui se produit c'est l'ajout d'une classe "visible" au conteneur principal :

Code:

1
2
3
4
5
6
7
8
<div class="conteneur_principal">
			<h2 class="text">Le Quiz ou le bullshit est interdit...</h2>
			<p class="text">Pas facile d'être monsieur/madame parfait ! <br />Bah ouais entre sport ou magnum de rosé au soleil difficile de choisir ! Viens tester à quel point tu es foutu !!</p>
			<div class="rs_bouton les_boutons">
				<div class="rs"></div>
				<a href="#" class="btn_noir">J'me lance...</a>
			</div>
	</div>

et voici les css appliquées quand la classe est ajoutée en jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.text{
    opacity: 0;
    transition: all .6s ease-out;
    transition-delay: 0;
    transform: translate(0,0);
}
 
.les_boutons{
    opacity: 0;
    transition: all .6s ease-out;
    transition-delay: 0;
    transform: translate(0,-50%);
}
 
.conteneur_principal:not(.visible) h2.text {
    transform: translate(0,-50%);
}
 
.conteneur_principal:not(.visible) p.text {
    transform: translate(calc(160px - 20%),0);
}
 
.conteneur_principal:not(.visible) .les_boutons {
    transform: translate(0,50%);
}
 
.visible .text{
    transition-delay: .6s;
    opacity: 1;
}
 
.visible .les_boutons{
    transition-delay: .6s;
    opacity: 1;
}

10/07/2018, 10h03
taka10

J'ai trouvé par rapport à mon exemple, c'est le transition-delay qui permet d'avoir un léger décalage
10/07/2018, 10h24
SpaceFrog

Et avec les callback de animate ?

Oui on peut utiliser un callback sur une animation css

c'est un peu particulier, parce que l'event de retour est différent suivant le navigateur

pour ma part j'utilise une const dans lesquels je les ai tous(?) mis :

Code:

const DetectAnimationEnding = 'webkitAnimationEnd oAnimationEnd oanimationend msAnimationEnd animationend';

pour l'utiliser (icic sur un élément #truc) :
Code:

1 2 3 4 5 6 $('#truc').addClass(animClassName); // anim $('#truc').one(DetectAnimationEnding, function () { $('#truc').css({"background-color":TrucBgColorNeutre}); // changement en fin d'anim $('#truc').off(DetectAnimationEnding); });
La pb des call back c'est quand on doit en enchaîner une plusieurs qu'on doit imbriquer les un dans les autres, et ça fait pas très propre,
et même pénible si on veut y changer l'ordre ou en ajouter une nouvelle à l'intérieur..

c'est pour ça que j'utilise les promesses, c'est bien plus simple et propre:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function Anim_Truc() { return new Promise(function (resolve) { $('#truc').addClass(animClassNameTruc); // anim $('#truc').one(DetectAnimationEnding, function () { $('#truc').css({"background-color":TrucBgColorNeutre}); // changement en fin d'anim $('#truc').off(DetectAnimationEnding); resolve(); }); }); } async function SequenceTrucBidule() { await Anim_Truc(); await Anim_Bidule(); }