Ci dessus ! - le lien "recherche" - Ca m'interesse de savoir

**bilou95** · 28/01/2008, 13h27

Bonjour,

Quelqu'un sait comment créer une animation comme celle du lien "recherche" ?

Merci.

**Dionyzos** · 16/10/2008, 11h04

Je te propose de regarder du côté des frameworks Javascript comme Mootools ou jQuery qui permettent, entre autres, ce genre d'effets.

Perso j'ai une petite préférence pour jQuery qui me parait plus complet, mais il en existe plein d'autres.

Tu trouveras ici un exemple de ce que tu veux faire avec jQuery et avec Mootools.

Une petite recherche sur Google te permettra de trouver qq tutoriels sur la façon d'utiliser ces frameworks.

**Kennel sébastien** · 16/10/2008, 12h43

Envoyé par bilou95

Bonjour,
Quelqu'un sait comment créer une animation comme celle du lien "recherche" ?
Merci.

C'est facile à réaliser tu utilises la propriété "clip" de CSS en le mettant à 0, puis du coter JavaScript tu fais une boucle pour le rendre à sa taille réel.

Je te propose de regarder du côté des frameworks Javascript comme Mootools ou jQuery qui permettent, entre autres, ce genre d'effets.

Perso j'ai une petite préférence pour jQuery qui me parait plus complet, mais il en existe plein d'autres.

Tu trouveras ici un exemple de ce que tu veux faire avec jQuery et avec Mootools.

Une petite recherche sur Google te permettra de trouver qq tutoriels sur la façon d'utiliser ces frameworks.

Comment voulez-vous apprendre à programmé, si vous déléguez tout le travail aux autres ? Et puis vive le code mort...

**E.Bzz** · 16/10/2008, 12h47

Envoyé par Kennel sébastien

Comment voulez-vous apprendre à programmé, si vous déléguez tout le travail aux autres ?

[avis totalement perso]
+ 1000

[/avis totalement perso]

**Dionyzos** · 16/10/2008, 14h00

Envoyé par Kennel sébastien

Comment voulez-vous apprendre à programmé, si vous déléguez tout le travail aux autres ? Et puis vive le code mort...

Super

Ca c'est le genre de commentaire qui donne vraiment envie d'aider les autres sur les forum

Il ne s'agit pas de laisser le travail aux autres, mais de ne pas réinventer la roue à chaque fois.

Et ce genre de framework demande une connaissance minimum en dev pour l'utiliser, donc ça n'empêchera pas son utilisateur à comprendre tout le mécanisme pour savoir l'utiliser correctement.

Maintenant je donne une solution parmi tant d'autres, si elle ne convient pas, car trop lourde pour seulement un effet ponctuel, on peut toujours faire sa propre fonction JS.

D'autre part, faire découvrir ce type de framework peut donner envie d'aller plus loin dans la création de site web.

A bon entendeur, salut !

**E.Bzz** · 16/10/2008, 14h08

Envoyé par Dionyzos

Super

Ca c'est le genre de commentaire qui donne vraiment envie d'aider les autres sur les forum

Il ne s'agit pas de laisser le travail aux autres, mais de ne pas réinventer la roue à chaque fois.

Je ne crois pas que c'était le sens de la remarque (en tous cas pas de la mienne).

car trop lourde pour seulement un effet ponctuel, on peut toujours faire sa propre fonction JS.

Là oui

"On" a un peu trop tendance à utiliser une librairie (quelle qu'elle soit) pour n'en utiliser qu'une ou deux fonctions qu'on a un peu de mal à écrire seul du 1° coup, alors qu'il suffirait de 3 ou 4 lignes de code.

C'est le cas ici ...

A+

**Kennel sébastien** · 16/10/2008, 14h41

C'est tout bon E.Bzz

.
Désoler Dionyzos, j'avais pas l'intention de te blesser...

**le_chomeur** · 16/10/2008, 16h51

allez sans vouloir faire du tort a personne :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        var foo = function(){
            var me = this;
            this.div = null;
            this.CurrentWidth = 0;
            this.CurrentHeight = 0;
            this.id =  null;
            this.MaxWidth = 0;
            this.MAxHeight = 0;
            this.timer1 = null;
        }
 
        foo.prototype.Init = function(MaDiv, MaxWidth , MAxHeight){
            this.div = MaDiv;
            this.CurrentWidth = parseInt(MaDiv.style.width);
            this.CurrentHeight = parseInt(MaDiv.style.height);
            this.id =  MaDiv.id;
            this.MaxWidth = MaxWidth;
            this.MAxHeight = MAxHeight;
			this.ratio = (MaxWidth > MAxHeight) ? parseInt(MaxWidth/MAxHeight):(parseInt(MAxHeight/MaxWidth));
        };
 
        foo.prototype.OpenBox = function(){
            var temp = this;
            var t1 = false;
            var t2 = false;
 
            if(this.MaxWidth > parseInt(this.div.style.width)){
                this.div.style.width = parseInt(this.div.style.width) + 10 + "px";
            }
            else{
                t1 = true;
            }
 
            if(this.MAxHeight > parseInt(this.div.style.height)){
                this.div.style.height = parseInt(this.div.style.height) + 10 / this.ratio + "px";
            }
            else{
                t2 = true;
            }
 
 
            if(!t1 || !t2){
                this.timer1 = setTimeout(function(){temp.OpenBox()},10);
            }
            else{
                clearTimeout(this.timer1);
            }
        };
 
        function ChangeAllChild(treeView)
          {
          var l = treeView.tableauEnfants.length;
          var AppelTemp = null;
          var tempElem = null;
          while(l){
                tempElem = document.all[treeView.Noeuds(treeView.tableauEnfants[l].index ).table];
                AppelTemp = new AssignClass(tempElem,"PosteChange");
                tempElem = document.all['name'+treeView.Noeuds(treeView.tableauEnfants[l].index ).table];
			    AppelTemp = new AssignClass(tempElem,"InputHidden")
			   l--; 
          }
		    if(treeView.tableauEnfants[l].HaveAChild){
		        ChangeAllChild(treeView.tableauEnfants[l]);
		    }
          }
        function AssignClass(element,NomClasse){
            element.className = NomClasse;
        }
     </script>
</head>
<body>
<div id="titi" style="width:0px;height:20px;border:1px solid red">
    test
</div>
<script type="text/javascript">
var momo = new foo();
momo.Init(document.getElementById('titi'),300,200);
momo.OpenBox();
</script>
</body>
</html>

exemple donné il y a qqs jours , c'est pour une base !
code simple à analyser

Ci dessus ! - le lien "recherche" - Ca m'interesse de savoir

JavaScript

Partager

Partager