Discussion :

[boutmos]

Bonjour,

Je dois développer un effet de volets pour un futur projet web. J'adopterais un framework pour çà. Mais avant, je voulais réaliser cet animation moi même a partir de mes connaissances uniquement.

J'ai donc pondu ceci : http://ia62.ac-lille.fr/sliders/

A/ Problème, comment pourrais-je rendre l'animation plus fluide ?
De plus, j'ai remarqué sous IE6 que le sablier clignotait pendant que la fenêtre s'expand...
J'ai fait le test avec des images plus light et aussi sans image. Pareil çà saccade toujours.

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
 
function expandFenetre(valeur,pas) {
	// A FAIRE = desactiver le click sur voletx tant que l'animation n'est pas fini
	// sinon on ne garde plus la hauteur initiale definie dans le CSS
 
	incrementation = pas;
	fenetre = $("fenetre"+valeur);
 
	// Recupere le height
	if (fenetre.currentStyle){ // pour IE
		hauteur = fenetre.currentStyle['height'];
	} else if (window.getComputedStyle){ // pour FF et autre
		hauteur = window.getComputedStyle(fenetre,null).height;
	}
 
	hauteur = parseInt(hauteur);	// conversion en number
 
	// 1er appel ? -> Sauvegarde Height initiale et reset a 0px
	if (appelFade == 0) {
		hauteurInitiale = hauteur;
		appelFade = 1;
		fenetre.style.height = "0px";
		hauteur = 0;
	}
 
	fenetre.style.display = "block";
 
	if (hauteur < hauteurInitiale) {
		hauteur = hauteur + pas;
		fenetre.style.height = hauteur+"px";
		timer = setTimeout("expandFenetre(indice,incrementation)",1);
	}
 
	// sauvegarde cette fenetre comme etant la fenetre active
	fenetreVisible = indice;
}

B/ Quel framework(s) me conseillez vous pour ce type d'effets ? Prototype ? jQuery ? Scriptaculous ?
Je n'arrive pas a me decider car je ne les ai jamais essayé.

[boutmos]

De plus, j'ai remarqué sous IE6 que le sablier clignotait pendant que la fenêtre s'expand...

Je viens de m'apercevoir que si je ne mets pas mon image en background dans le CSS, le curseur avec le sablier ne clignote plus sous IE6

Est ce qu'il recharge l'image a chaque itération ???

[Oscar Hiboux]

Fonctionellement parlant prototype.js est la base de script.aculo.us donc ils ne sont pas en concurrence dans ton choix.

Autrement jQuery comme prototype.js+script.aculo.us fonctionnent tous les deux très bien pour ce genre d'effets. Entre ces deux là je pense que ça sera plutôt une question de préférence philosophique...

Tu devrais jeter un oeil à MooTools et Dojo aussi. Là, passé l'aspect philosophique tu signes pour tout un framework... ^^'

Sinon, pour finir, ton truc a l'air de bien fonctionner.

[boutmos]

Sinon, pour finir, ton truc a l'air de bien fonctionner.

C'est peut être moi qui suis trop pointilleux, je hais les saccade !
En même temps le javascript n'a pas était fait pour faire des animations a la base.

Sinon en ce qui concerne le choix d'un framework, le problème c'est plus l'embarras du choix car tout ceux cité sont reconnu.

Hélas tous les tester me demanderas beaucoup trop de temps, que je n'ai pas forcément.

Le but c'est de développer un extranet pour la gestion de documents. Je vais partir sur la base d'un CMS qui m'est connu (SPIP) auquel j'associerais le framework choisi et du CSS pour rendre plus "vivant" le tout.

J'ai vu que la dernière version de SPIP intégrait JQuery pour son interface d'administration...

[Oscar Hiboux]

[...]Est ce qu'il recharge l'image a chaque itération ???

Je ne détiens pas la réponse mais récemment encore j'ai observé un problème similaire avec des images dont l'attribut "src" changeait (si mes souvenirs sont bons) et dans le journal du serveur il y avait autant de requêtes aux images. Enfin, qqpart c'est assez logique qu'il adresse une requête au serveur à chaque fois car il ne peut pas affirmer que la ressource est inchangée (sauf s'il considère correctement les entêtes de caching...), mais c'est vraiment pas transparent : ça ralentit sans cesse et on voit en bas à gauche, dans la barre de statut : "Téléchargement des données blablabla..." qui scintille.

Bref, si tu veux de la fluidité, oublie IE. Ça marchera comme ça marchera...

[Oscar Hiboux]

Hélas tous les tester me demanderas beaucoup trop de temps, que je n'ai pas forcément.

Je te comprends tout à fait. Je n'ai jamais eu le temps de tous les essayer non plus... C'est un peu frustrant !

J'ai vu que la dernière version de SPIP intégrait JQuery pour son interface d'administration...

Bah voilà, pars sur cette base, ça devrait être instructif ! Quand on a matière à faire c'est plus entraînant qu'essayer pour essayer.

Bonne chance !

[boutmos]

oué oué moi je sens qu'on va demander la re diffusion de l'émission Mystères pour résoudre tout çà !

Merci pour tes réponses Oscar Hiboux

Je ne tag pas résolu pour laisser le temps aux anciens du fofo de lire le topic , en esperant qu'ils aient des routines magiques sous le coude

[boutmos]

Bon je n'aurais pas a faire le choix parmis ces nombreux Framework...

Mon boss est tombé "amoureux" de extJS , je vais donc me decortiquer çà. SI jamais vous avez des tutoriels ou une experience sur ce framework, je suis preneur de tous conseils

Cordialement

[le_chomeur]

et ça ?

http://mbox.tuxfamily.org/accordeon/#

sans aucune librairie

[boutmos]

AH oué c'est bien sympa aussi. Je n'ai pas utilisé de librairies non plus mais c'est moins bien fait que ton exemple

Par contre, nous n'utiliserons pas extJS rien que pour ce genre d'effets , apparement notre extranet sera considéré comme une application plutot qu'un site web classique et donc avec la possibilité de gérer dynamiquement coté client des tableaux , des espaces documentaires etc etc , je sais pas encore très bien ou le boss veux en venir, une réunion se fera cette après midi pour mieux définir le projet mais en gros , il veut une usine qui se repose sur un framework en JS sachant générer des applications de gestions.

merci