Discussion :

[taka10]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('.conteneur_principal').queue(function(next){
		$(this).addClass('visible');
		next();
	});

D'avance, je vous remercie

[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

[taka10]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[taka10]

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

[SpaceFrog]

Et avec les callback de animate ?

[psychadelic]

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

Sélectionner tout - Visualiser dans une fenêtre à part

const DetectAnimationEnding = 'webkitAnimationEnd oAnimationEnd oanimationend msAnimationEnd animationend';

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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();
  }