Accélérer une animation JS

Version imprimable

Bonjour,
J'ai une animation à l'ouverture de mon site : un logo qui descend puis monte. Mais cela ralentis énormément le slider qui suit. Comment accélérer au maximum cette animation ?
Merci énormément.
ED
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  <script> $(document).ready(function(){ $('.logo').hide(); }); $(window).load(function(){ $('.logo').fadeIn('fast'); $(".logo").animate({ marginTop:'0px', opacity:1 },200,'swing'); }); </script>  <script> $(document).ready(function(){ $('.logo').hide(); }); $(window).load(function(){ $('.logo').fadeIn('slow'); $(".logo").delay(200).animate({ marginTop:'-2400px', opacity:1 },800,'swing'); }); </script>

Bonjour,
il faudrait déjà mettre de l'ordre dans ton code et regrouper ce qui est groupable dans le $(window).load(function(){}.
Ainsi tu va obtenir :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $(window).load(function(){ $('.logo').fadeIn('fast'); $(".logo").animate({ marginTop:'0px', opacity:1 },200,'swing'); $('.logo').fadeIn('slow'); $(".logo").delay(200).animate({ marginTop:'-2400px', opacity:1 },800,'swing'); });
Il faudrait savoir ce que tu veux au chargement de la page !

Regarde la documentation officielle pour voir comment lancer une deuxième animation en fin de la première, paramètre complete par exemple.

Attention car le trop d'animation tue les animations.

14/02/2023, 14h33
el_debutanti

Bonjour NoSMoking,
Toujours présent, un ENORME MERCI !
Je ne touche pas au js, je n'y comprends rien, j'ai tenté mais ce n'est pas ma logique et je n'arrive pas à y entrer... un peu comme l'Anglais :weird:
Pour les CSS, ça vient ;)
Merci pour ton aide.
L'objectif est que le logo descende dès le chargement de la page, histoire que la première image du slider qui suit (remonte en même temps que le logo) reste plus longtemps à l'écran.
A moins qu'on puisse augmenter la durée de la première image par rapport aux trois autres. Mais l encore c'est du js :roll:
Merci encore et bon après-midi !
18/02/2023, 17h13
el_debutanti

Bonjour,
Le réel problème est que l'animation met du temps à apparaître. Le body reste LONGTEMPS affiché. Ce qui fait que la première image du slider reste peu de temps visible :weird:
Si on peut faire apparaître l'animation (logo qui descend) de suite, dès l'affichage de la page, cela règlera mon problème.
J'ai touché un peu à tout pour voir, mais aucun effet :roll:
Cela vient-il du code envoyé précédemment ?
Merci pour votre aide et bon week-end,
ED

Bonjour,
Mon code ressemble maintenant à ceci

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
36
$(window).load(function(){
	$('.logo').fadeIn('fast');
	$(".logo").animate({
		marginTop:'0px',
		opacity:1
	},200,'swing');
 
	$('.logo').fadeIn('slow');
	$(".logo").delay(200).animate({
		marginTop:'-2400px',
		opacity:1
	},800,'swing');
});
 
$(document).ready(function(){
	$('#slider').hide();
});
$(window).load(function(){
	$('#slider').fadeIn('slow');
	$("#slider").delay(400).animate({
		marginTop:'-1200px',
		opacity:1
	},800,'swing');
 
 
	$('.sl-slider').fadeIn('slow');
	$(".sl-slider").delay(800).animate({
		marginTop:'0px',
		opacity:1
	},800,'swing');
});
 
 
$(document).ready(function(){
	$('sl.slider').hide();
});

et malgré un

Code:

<script src="./js/intro.js" defer></script>

L'animation met toujours un temps fou à apparaître.

Merci de votre aide et bon week-end,

ED