En este post aprenderemos a hacer un efecto de Slide gracias a MooTools, aquí podeís ver el resultado de lo que vamos a realizar en este tutorial. Cabe mencionar que no le he dado ningún estilo con CSS pero con él, podríamos obtener un mejor resultado, como por ejemplo el que nos muestran en la demo de la página de Mootools.

Para el que no lo sepa, Mootools es una librería JavaScript que facilita la tarea al diseñador, pudiendo usar efectos y aplicaciones que sean funcionales para el usuario insertando unos simples scripts en nuestra web, ahorrándose así el tener que programar todos los efectos.

Empecemos

JavaScript

Primero que nada deberemos de llamar a la librería javascript, para ello antes de </header> lo siguiente:

[COPIAR]
Código JavaScript (Copiar):
  1. <script type="text/javascript"
  2. src="mootools.js"></script>

El siguiente script que debemos añadir es el siguiente:

[COPIAR]
Código JavaScript (Copiar):
  1. <script type="text/javascript">
  2. window.addEvent('domready', function(){
  3.             var mySlide = new Fx.Slide('contenido-slide');
  4.             $('toggle').addEvent('click', function(e){
  5.                 e = new Event(e);
  6.                 mySlide.toggle();
  7.                 e.stop();
  8.             });
  9.         });
  10. </script>

En la 3ª linea donde pone 'contenido-slide' es el id del div que contendrá todo el contenido que aparecerá y desaparecerá.

El Html

El código Html lo deberemos de crear nosotro con el contenido que queramos por ejemplo:

[COPIAR]
Código HTML (Copiar):
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim sapien, facilisis placerat, ornare eget, pretium eget, libero. Phasellus dui. Integer ut massa vel orci mollis ornare. Praesent tellus. Vestibulum ipsum eros, facilisis ac, consequat eget, bibendum vitae, quam. Fusce placerat elit sed purus. Curabitur auctor nonummy leo. Sed lectus felis, sollicitudin ac, placerat a, pretium a, quam. Aenean enim. Proin vestibulum mi nec metus. Sed mauris nisi, elementum nec, fringilla sed, adipiscing cursus, est.
  3. </div>
  5. <a id="toggle" href="#" name="toggle">toggle</a>
  6. </div>
  7. <div id="contenido-slide">
  8. <h2>Yo aparezco, y desaparezcooo!!</h2>
  9. Vestibulum in mauris. Aenean eget purus. Sed turpis mi, tempor non, tristique vitae, convallis vitae, velit. Praesent mattis nulla et tellus rutrum lacinia. Curabitur facilisis rutrum mauris. Sed ac nulla. Sed aliquet accumsan tortor. Aenean dictum lectus et leo. Phasellus tortor ligula, aliquam in, fringilla et, tempor sed, ligula. Aenean tincidunt, tortor eu vehicula tincidunt, ligula orci pretium massa, quis ultricies turpis quam eu diam.
  10. </div>

En el código HTML solo hay que destacar dos cosas, la primera es el <div id="contenido-slide> que sera el div que aparecerá y desaparecerá, y la segunda y última <a id="toggle" href="#" name="toggle">toggle</a> que será el link que probocara el efecto. Tiene la "id" y el "name" com toggle por que en la 4ª linea del segundo JavaScript lo definimos así.

El CSS

Por último podríamos definir el estilo de los divs con CSS pero que no es totalmente necesario y como no esta directamente relacionado con el tutorial en si no lo vamos a incluir, por lo menos por ahora.

Código completo

Por último este sería el codigo de un archivo PHP con todo lo que hemos dicho antes y funcionando a la perfección con el efecto Slide de Mootols. Aqui teneis el ejemplo del archivo funcionando.

[COPIAR]
Código PHP (Copiar):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Tutorial: Slide con Mootools [DEMO] - GuiaBreve</title>
  6. <script type="text/javascript"
  7. src="mootools.js"></script>
  8. <script type="text/javascript">
  9. window.addEvent('domready', function(){
  10.             var mySlide = new Fx.Slide('contenido-slide');
  11.             $('toggle').addEvent('click', function(e){
  12.                 e = new Event(e);
  13.                 mySlide.toggle();
  14.                 e.stop();
  15.             });
  16.         });
  17. </script>
  18. </head>
  19.  
  20. <body>
  21. <div>
  22. <h1><a href="http://www.GuiaBreve.com">www.GuiaBreve.com</a></h1>
  23. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim sapien, facilisis placerat, ornare eget, pretium eget, libero. Phasellus dui. Integer ut massa vel orci mollis ornare. Praesent tellus. Vestibulum ipsum eros, facilisis ac, consequat eget, bibendum vitae, quam. Fusce placerat elit sed purus. Curabitur auctor nonummy leo. Sed lectus felis, sollicitudin ac, placerat a, pretium a, quam. Aenean enim. Proin vestibulum mi nec metus. Sed mauris nisi, elementum nec, fringilla sed, adipiscing cursus, est.
  24. </div>
  25. <div>
  26. <a id="toggle" href="#" name="toggle">toggle</a>
  27. </div>
  28. <div id="contenido-slide">
  29. <h2>Yo aparezco, y desaparezcooo!!</h2>
  30. Vestibulum in mauris. Aenean eget purus. Sed turpis mi, tempor non, tristique vitae, convallis vitae, velit. Praesent mattis nulla et tellus rutrum lacinia. Curabitur facilisis rutrum mauris. Sed ac nulla. Sed aliquet accumsan tortor. Aenean dictum lectus et leo. Phasellus tortor ligula, aliquam in, fringilla et, tempor sed, ligula. Aenean tincidunt, tortor eu vehicula tincidunt, ligula orci pretium massa, quis ultricies turpis quam eu diam.
  31. </div>
  32. </body>
  33. </html>

Y si aún tenéis dudas

Si no os a quedado claro y tenéis alguna duda o problema podéis dejar un comentario he intentaré solucionar lo antes posible o si lo prefieren pueden contactarme vía correo electrónico en la sección de contacto.