animation avec jquery [Résolu]

[baka54]

Bonsoir
(je ne sais pas si je suis bien dans la bonne section n’hésite pas a me le dire.)

Je m'appel Jérôme et j'ai un petit souci avec une animation que j'ai créer en effet j'aimerai que mon animation s'adapte a l’écran de la personne.

C'est quelque chose de récurrents sur le forum ce genre de demande mon souci n'est pas vraiment l'adaptation c plus le faite que chaque explorateur internet montre l'animation a sa façon donc pour régler ce souci j'ai créer une règle pour adapter mon animation a la résolution.

Pour être plus clair:

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
 
$(document).ready(function() {
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
 
if(screen.width==1920||screen.height==1080){
	/* animation*/
	if ($.browser.msie) {
	$(".trianglegauche").animate({left:"510px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"510px"},{queue:false, duration:4000, easing:'easeOutBounce'});
		}
	else if($.browser.mozilla){
	$(".trianglegauche").animate({left:"500px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"500px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.chrome){
	$(".trianglegauche").animate({left:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.opera){
	$(".trianglegauche").animate({left:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	/* fin animation*/
 
}
});

Mon animation marche très bien pour la résolution 1920 par 1080 pour tout les explorateur.

Mais si je rajoute :

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
 
else if (screen.width==1440||screen.height==900){
	/* triangle arrivant de la droite*/
	if ($.browser.msie) {
	$(".trianglegauche").animate({left:"50px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"510px"},{queue:false, duration:4000, easing:'easeOutBounce'});
		}
	else if($.browser.mozilla){
	$(".trianglegauche").animate({left:"30px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"500px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.chrome){
	$(".trianglegauche").animate({left:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.opera){
	$(".trianglegauche").animate({left:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	/* fin triangle arrivant de la droite*/
 
}
 
});

donc code complet :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
$(document).ready(function() {
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
 
if(screen.width==1920||screen.height==1080){
	/* triangle arrivant de la droite*/
	if ($.browser.msie) {
	$(".trianglegauche").animate({left:"510px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"510px"},{queue:false, duration:4000, easing:'easeOutBounce'});
		}
	else if($.browser.mozilla){
	$(".trianglegauche").animate({left:"500px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"500px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.chrome){
	$(".trianglegauche").animate({left:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.opera){
	$(".trianglegauche").animate({left:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	/* fin triangle arrivant de la droite*/
 
}
 
else if (screen.width==1440||screen.height==900){
	/* triangle arrivant de la droite*/
	if ($.browser.msie) {
	$(".trianglegauche").animate({left:"50px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"510px"},{queue:false, duration:4000, easing:'easeOutBounce'});
		}
	else if($.browser.mozilla){
	$(".trianglegauche").animate({left:"30px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"500px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.chrome){
	$(".trianglegauche").animate({left:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"490px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	else if($.browser.opera){
	$(".trianglegauche").animate({left:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"498px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	}
	/* fin triangle arrivant de la droite*/
 
}
 
});

mes modification marche pour la resolution 1440 sauf (deviné pour qui) ie et opera, avec une résolution de 1440 il ne prend pas compte des valeur que je change pour :

Code :

1
2
3
4
	if ($.browser.msie) {
	$(".trianglegauche").animate({left:"50px"},{queue:false, duration:4000, easing:'easeOutBounce'});
	$(".triangledroite").animate({right:"510px"},{queue:false, duration:4000, easing:'easeOutBounce'});
		}

peux importe les valeurs que je mets pour le left sa change rien par contre si je remonte pour la résolution de 1920 et je change la valeur de if($.browser.msie) ...

il prend en compte pour la résolution 1440 la modification pour une résolution 1920 bref pour ie et opera une résolution 1440=1920 ... donc comment faire pour que ie et opera prenne vraiment en compte la veritable résolution c'est a dire 1440 et non 1920.
merci d'avance pour votre aide.

[danielhagnoul]

Bonjour

L'usage de jQuery.browser est déconseillé, c'est un "truc" ancien qui ne fonctionne pas correctement et qui va être supprimé de l'API jQuery. Le "sniffing" d'un navigateur est fortement déconseillé et donne des résultats aléatoires.

On utilise maintenant les "Media Queries" : http://www.w3.org/TR/css3-mediaqueries/

[baka54]

Merci pour votre réponse, en effet je viens de constaté les aléa du $.browser. et je cherchait une alternative, merci pour la doc je viens de jeter un rapide coup d’œil et je suis tombé sur :

Code :

@media screen and (device-aspect-ratio: 1280/720) { … }

je pense que ceci est ma solution a mon problème.

Ou sinon je vais faire d'une autre manière, imposer une taille du body a 768px en width et même si l'animation ne diminuerai pas lorsqu'on réduit la fenêtre au moins elle sera visible sur tout les explorateurs sans que chacun fait à sa sauce.

En tout cas merci pour la solution je vais la tester, où sinon sa pourra me servir pour plus tard.