Agrandissement au clic

Sujet résolu

19 juillet 2010 à 11:25:36

Bonjour,

Je cherche un moyen de créer un effet qui fait que lors d'un clic sur un lien, contenu dans une <div>, la div s'agrandit en temps réel, affichant un texte.

Un peu comme ça :

Merci.

miclebowski

19 juillet 2010 à 11:32:36

Salut,

Pour width tu as ca (ca marche pareil pour height ) : http://www.zonecss.fr/javascript_css/j [...] ss_width.html

Combine a un onclick ca devrait le faire.

Après si tu cherches a l'animer, c'est une autre histoire

(qui a parle de jQue** :p)

Pour inserer le texte dans la div, innerHTML is your friend.

louf404

19 juillet 2010 à 14:58:34

Si tu veux créer une animation c'est simple :
tu fais quelque chose de ce genre :

var struct = {
    elmt :,
    width:,
    height:,
    interval:,
    speed:,
    maxWidth:,
    maxHeight:
}; // à remplir
function updateStruct() {
    struct.elmt.style.width = struct.width + 'px';
    struct.elmt.style.height = struct.height + 'px';
}
setTimeout(function() {
    struct.width += struct.speed;
    struct.height += struct.speed;
    updateStruct();
    if(struct.width < struct.maxWidth && struct.height < struct.maxHeight) {
        setTimeout(arguments.callee, struct.interval);
    }
}, struct.interval);

ET SURTOUT PAS BESOIN DE LIBRAIRIE POUR UN TRUC AUSSI BASIQUE !

lonesnake

20 juillet 2010 à 9:20:33

louf404, quel genre de données tu met pour les attributs de <struct> ?

Width,height,maxWidth, et maxHeight, je suppose que c'est des valeurs en px ou %, mais pour elmt, interval et speed, je doute un peu (document.getelementById('truc'),12,15 par exemple ?)

louf404

20 juillet 2010 à 9:40:55

Width, height, maxWidth, maxHeight utilisent des entiers, (qui correspondent à des pixels)

elmt doit contenir l'élément html concerné, tu peux le récupérer avec document.getelementById('truc')

Et ensuite interval et speed demandent des entiers eux aussi.
interval correspond au temps entre chaque agrandissement (valeur en millisecondes)

Et speed correspond au facteur d'agrandissement.

Donc selon que tu souhaites une animation lente, fluide ou rapide, il te faudra toucher à ces 2 attributs.

lonesnake

22 juillet 2010 à 10:29:48

Est-ce-que width, height, maxWidth, maxHeight doivent êtres obligatoirement en px ? Ne peut-on pas les mettres en pourcentages ?

Sinon, speed correspond à une sorte d'échelle de vitesse, c'est ça ? (comme 1 pour premier niveau, et 2 pour second niveau)

Et on appelle ta fonction sur un onclick ?

<a href="#" onclick="setTimout(param1,param2)">CARRE ORANGE</a>

louf404

22 juillet 2010 à 11:49:46

J'ai modifier mon code pour qu'il soit très simple d'utilisation et qu'il utilise des proportions à la place de pixels :
Maintenant tu as juste à appeler la fonction scale avec comme paramètres :
1 - elmtId : L'id de l'élément à aggrandir
2 - widthFactor : le facteur d'agrandissement en largeur ( = multiplie la largeur par ce nombre)
3 - heightFactor : pareil pour la hauteur
4 - nbLoop : le nombre de fois que la taille sera actualisée pendant l'animation (plus ce chiffre est grand, moins ça sera saccadé)
5 - interval : le temps en millisecondes entre chaque "loop" (permet de régler la vitesse de l'animation, une trop grande valeur rendra l'animation saccadée)

PS : si tu veux faire un rétrécissement : il te suffit de mettre des facteur compris entre 0 et 1

<a href="#" onclick="scale('t', 5, 2, 10, 100)">CARRE ORANGE</a>
<script type="text/javascript">
	function scale(elmtId, widthFactor, heightFactor, nbLoop, interval) {
		speed = Math.min(Math.abs(speed), 1);
		widthFactor = Math.abs(widthFactor);
		heightFactor = Math.abs(heightFactor)
		var elmt = document.getElementById(elmtId),
			width = elmt.offsetWidth,
			height = elmt.offsetHeight,
			diffWidth = width * (widthFactor - 1),
			diffHeight = height * (heightFactor - 1),			
			updateStruct = function() {
				elmt.style.width = width + 'px';
				elmt.style.height = height + 'px';
			},
			count = 0,
			speed = 1 / nbLoop,
			updateAnimation = function() {
				width += Math.round(diffWidth * speed);
				height += Math.round(diffHeight * speed);
				++count;
				updateStruct();
				if(count < nbLoop) {
					setTimeout(updateAnimation, interval);
				}
			};
		setTimeout(updateAnimation, interval);
	}	
</script>

lonesnake

23 juillet 2010 à 16:37:15

C'est normal que ta fonction augmente la hauteur de la <div>, alors que j'ai mis comme paramètres:

scale('carre_orange',0.3,1,100,1);

Donc une valeur de 1 pour la hauteur.

louf404

23 juillet 2010 à 17:46:29

C'est bizarre chez moi avec ces paramètres il n'y aucun problèmes, la hauteur ne varie pas !
Tu peux me montrer le code html de ton "carre_orange"

SoRaN

23 juillet 2010 à 19:20:27

Sinon tu fais un div basique avec overflow :hidden;
et en CSS3 tu met une transition sur le width et la hauteur sur le onclick.
CSS = plus propre, plus performant, plus lisible et plus maintenable; bref mieux.

louf404

23 juillet 2010 à 20:24:23

Je connaissait pas du tout les transitions css !

lonesnake

26 juillet 2010 à 12:06:50

A mon avis le CSS3 n'est pas encore totalement appliqué.

En fait le problème provenait de la propriété CSS padding, je l'ai réglé.