Boite déroulante à clic

**Adri075** · 24/01/2013, 19h13

Bonjour,

J'ai remarqué sur les sites web, une petite animation que l'on retrouve de plus en plus fréquemment. C'est celle de la boite qui s'ouvre lorsque l'on clip dessus (pour afficher un texte par exemple). Malheureusement, j'aimerais reproduire le même effet, mais je ne comprend pas quels fichiers sont à créer, où insérer tel code etc...

Je cherche donc des informations qui me permettrait la réalisation de cette "boite déroulante". Pour ceux qui ne voient pas de quoi je parle, j'aimerais reproduire exactement le même effet que le centre d'aide du site Mega: https://mega.co.nz/#help

Cordialement

**SpaceFrog** · 24/01/2013, 19h39

un truc comme ça
http://jsfiddle.net/YA5k3/

le site indiqué met 3 plombes à charger ... pas vu ...

**Adri075** · 25/01/2013, 15h26

Merci beaucoup, c'est ce que j'attendais! En revanche, dois-je donner un nom spécifique au fichier Javascript ?
Et pour terminer, j'aimerais savoir comme ajouter une petite flèche (un petit triangle), qui tournerait sur lui même pour indiquer le bas quand le texte est affiché, et inversement quand le texte n'est plus la ? (Le même effet se trouve dans la colonne de gauche du site que vous m'avez indiqué).

Merci encore !

**SpaceFrog** · 25/01/2013, 15h48

http://jsfiddle.net/YA5k3/1/

**Adri075** · 25/01/2013, 18h25

Encore merci ! ^^

C'est exactement ce que cherchais depuis un bout de temps (merci les forums developpez !).

Si ce n'est vous demander trop, est ce que vous pouvez m'expliquer ce que a quoi correspond chaque partie du code javascript ? Parce que j'aimerais savoir l'appliquer pour animer d'autres fonctions (déplacement, taille...etc).

Merci encore

**SpaceFrog** · 26/01/2013, 08h44

Code commenté:
http://jsfiddle.net/YA5k3/3/

A noter que l'image a été prise au hasard sur le net elle fait 41px de large et n'est pas parfaitement symétrique d'où le décalage sur le premier script, rectifié en mettant -19px au lieu de -20 .

**Adri075** · 26/01/2013, 17h44

Vraiment génial tout ca !
Merci beaucoup de m'avoir aidé

Peut être une dernière question puis je clôture ce sujet:

Dans le code javascript, lors de la modification des valeurs prises par background-position, on trouve: "0 0":"-20px 0". Les deux dernières valeurs sont donc celles utilisées lorsque le texte est affiché. Mais les deux premières correspondent a quoi ?

Merci !

**SpaceFrog** · 26/01/2013, 18h11

à celle par défaut

en fait si tu regardes bien le span qui a l'image en background, il a une dimension de 20px x 20px
l'image elle fait 40px de large par 20 de haut
le span n'en laisse don apparaitre qu'un bout

au demarrage on positionne par defaut l'image d'arrière plane en 0 0
(top et left)
on ne voit donc que la partie gauche de l'image dans le span
une fois lanimation de deroulement terminée, on mest un background position left à -20px, elle se décale donc vers la gauche de 20px, laissant appaitre ainsi juste la partie de droite de l'image.

c'est le principe du sprite...
ici on n'alterne que deux positions pour modifier le sens d'eun flèche, mais on peut faire bien plus ...
http://www.developpez.net/forums/d90...-dessin-anime/

**Adri075** · 27/01/2013, 20h51

Bonjour,

J'ai créé tous les fichiers sources: style.css, index.html et slide.js
Mais malheureusement, meme apres avoir appelé dans le <head> du fichier html, le fichier javascript, ainsi que jquery, l'animation ne fonctionne pas...

Voici le résultat qui ne fonctionne pas: http://placeofsuccess.99k.org/

Merci.

Boite déroulante à clic

JavaScript

Discussions similaires

Partager

Partager