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

Version imprimable

28/01/2008, 13h27
bilou95

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

Bonjour,

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

Merci.
16/10/2008, 11h04
Dionyzos

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. :)
16/10/2008, 12h43
Kennel sébastien

Citation:

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.

Citation:

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... :?
16/10/2008, 12h47
E.Bzz

Citation:

Envoyé par Kennel sébastien

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

[avis totalement perso]
+ 1000

:king:
[/avis totalement perso]
16/10/2008, 14h00
Dionyzos

Citation:

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 !
16/10/2008, 14h08
E.Bzz

Citation:

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).

Citation:

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+
16/10/2008, 14h41
Kennel sébastien

C'est tout bon E.Bzz :king:.
Désoler Dionyzos, j'avais pas l'intention de te blesser...

allez sans vouloir faire du tort a personne :

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