Effet de slide avec mootools
février 23, 2009 par Julien
Catégorie Frameworks
Mootools est un excellent framework JS léger et modulaire qui saura vous rendre bien des services. Dans ce petit tutorial nous allons voir comment avec quelques lignes de code mettre en place un effet de slide simple et efficace. Pour commencer vous pouvez directement télécharger ici le code js.
L’archive comprend le code du framework et un fichier d’exemple avec différents effets de slide verticaux et horizontaux. Nous allons nous intéresser au toggle vertical, mais la démarche reste la même quel que soit l’effet choisi. Voici le code :
<script language="JavaScript" type="text/javascript">
<!--
window.addEvent('domready', function() {
var myVerticalSlide = new Fx.Slide('slide');
myVerticalSlide.toggle();
$('v_toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});
});
// -->
</script>
Evidemment il faudra veiller à ce que le framework soit bien appelé et conformément à l’exemple ci-dessus on mettra notre contenu dans une div avec un id égal à “slide”. Pour expliquer rapidement le code on met en place un gestionnaire d’événement au chargement du DOM. Lorsque un élément identifié par “v_toggle” sera cliqué cela lancera l’effet de slide.
Bonjour Julien,
Tout d’abord merci cette présentation de l’effet slide de Mootools.
Après installation tout fonctionne au poil. Une petite question cependant : Dans ton article la div affichée/masquée par l’option est par défaut masquée. Comment faire ? J’ai essayé de mettre ‘display:none’ dans le style de ma div, mais cela ne marche pas !
Merci d’avance pour la réponse.
il faut juste rajouter une déclaration comme quoi tu caches l’objet :
juste après l’instanciation :
var myVerticalSlide = new Fx.Slide(’vertical_slide’);
myVerticalSlide.hide();
et après le addevent
Salut,
Peut être pourras tu m’aider. Je veux utiliser le slide mais dans le sens inverse que proposé (tout de suite compliqué le mec).
En clair pour un slide horizontal je veux qu’il s’ouvre de la droite de l’écran vers la gauche et qu’il se ferme de la gauche vers la droite. Un peu comme si ton lien voici le code faisait apparaitre le code au dessus du lien.
Une sorte de prop à -100 ou je ne sais quoi ? J’ai cherché mais j’ai pas trouvé;
merci
@+
KasP