Discussion :

[el_debutanti]

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 :

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
<!-- /logo descend -->
 
<script>
$(document).ready(function(){
	$('.logo').hide();
});
$(window).load(function(){
	$('.logo').fadeIn('fast');
	$(".logo").animate({
		marginTop:'0px',
		opacity:1
	},200,'swing');
});
</script>
 
<!-- /logo remonte -->
 
<script>
$(document).ready(function(){
	$('.logo').hide();
});
$(window).load(function(){
	$('.logo').fadeIn('slow');
	$(".logo").delay(200).animate({
		marginTop:'-2400px',
		opacity:1
	},800,'swing');
});
</script>

[NoSmoking]

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 :

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

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.

[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
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
Merci encore et bon après-midi !

[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
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
Cela vient-il du code envoyé précédemment ?
Merci pour votre aide et bon week-end,
ED

[el_debutanti]

Bonjour,
Mon code ressemble maintenant à ceci

Code :

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

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

<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