Tutorial: Slide con Mootools – ¿Que miras?

En este “pequeño” tutorial os enseñare como usar Mootools para hacer un efecto de desplazamiento como el de este header, desde que puse el nuevo theme me han llegado algunos emails preguntándome como hacerlo, primero que nada, yo no soy ningún profesional de la materia, simplemente me defiendo como puedo, así que si yo he conseguido utilizarlo en el blog, tú también puedes.

Antes de empezar ¿Qué es Mootools?

Es una librería desarrollada en JavaScript que nos facilita la tarea a los webmasters, pudiendo así usar efectos y aplicaciones que sean funcionales para el usuario insertando unos simples scripts en nuestra web, ahorrándonos así el tener que programar todos los efectos, aun que si lo podremos personalizar fácilmente con una serie de parámetros.

Empecemos

JavaScript

Primero que nada deberemos de llamar a la librería javascript, para ello antes de

lo siguiente:

PLAIN TEXTJavaScript:

  1. <script type=”text/javascript”
  2. src=”http://demos.mootools.net/demos/mootools.svn.js”></script>

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

PLAIN TEXTJavaScript:

  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:

PLAIN TEXTHTML:

  1. <div>
  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>
  4. <div>
  5. <aid=”toggle”href=”#”name=”toggle”>toggle</a>
  6. </div>
  7. <divid=”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

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

PLAIN TEXTPHP:

  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>Mootols Slide – ¿Que miras?</title>
  6. <script type=”text/javascript”
  7. src=”http://demos.mootools.net/demos/mootools.svn.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>
  20. <body>
  21. <div>
  22. <h1><a href=”http://www.Quemiras.es”>www.Quemiras.es</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 aun así con este tutorial no te ha quedado del todo claro como utilizar Mootools, puedes consultar otros tutoriales que circulan por la red, como uno del omnipresente Infected-FX o este de Edenahp.net.

O también podéis dejarme las dudas en los comentarios e intentare responderlas lo antes posible o contactar con migo atravez del formulario de contacto si es una duda mas extensa. Prometo responder lo antes posible.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *