Mi 2º tutorial, pero ahora de Mootools

Hace mucho tiempo que queria hacer un tutorial de mootools, entonces me puse a buscar un buen tema y lo encontre, este tuto tiene como fin el siguiente efecto llamado Fx.Morph by wydblog: Cuando uno lo ve piensa que es muy dificil, pero en realidad es muy sencillo. Pasemos al paso a paso:


1º Bajamos el javascript necesario para que este efecto funcione de mootools o pueden bajarlo desde aquí.


2º Una vez que tenemos el archivo necesario, debemos crear nuestro html y nuestro css, primero establezcamos el html:

PLAIN TEXT
HTML:
  1. <a href="#" id="morph1" name="morph1">morph to morph1</a> - <a href="#" id="morph2" name="morph2">morph to
  2. morph2</a>
  3. <div id="morpher" class="morph1">
  4.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  5.     et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  6.     aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  7.     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
  8.     qui officia deserunt mollit anim id est laborum.</div>



3º ahora nos falta establecer el css, que lo llamaremos style.css:

PLAIN TEXT
CSS:
  1. .morph1 {
  2.     color:#CCCCCC;
  3.     background-color:#FF9900;
  4.     height: 200px;
  5.     width: 300px;
  6.     font-size: 15px;
  7.     font-family:Arial, Helvetica, sans-serif;
  8.     overflow: hidden;
  9.     opacity: 1;
  10.     border: 2px solid #aaa;
  11.     margin: 0;
  12.     padding: 5px;
  13. }
  14.  
  15. .morph2 {
  16.     color: #000;
  17.     background-color:#0066FF;
  18.     height: 100px;
  19.     width: 400px;
  20.     font-size: 12px;
  21.     opacity: 0.7;
  22.     margin: 60px;
  23.     padding: 35px;
  24.     border: 10px solid #000;
  25.     font-family:Arial, Helvetica, sans-serif;
  26. }



4º Y por último y no menos importante en el head, debemos insertar los siguientes codigos, primero adjuntemos nuestra hoja de estilo y el javascript de mootools:

PLAIN TEXT
HTML:
  1. <link href="style.css" rel="stylesheet" type="text/css">
  2. <script type="text/javascript" src="mootools.svn.js"></script>



y luego especificamos las caracteristicas de la transformación, tambien en el head:

PLAIN TEXT
HTML:
  1. <script type="text/javascript">  
  2. window.addEvent('domready', function(){
  3.             Fx.Morph = Fx.Styles.extend({
  4.            
  5.                 start: function(className){
  6.                    
  7.                     var to = {};
  8.                    
  9.                     $each(document.styleSheets, function(style){
  10.                         var rules = style.rules || style.cssRules;
  11.                         $each(rules, function(rule){
  12.                             if (!rule.selectorText.test('\.' + className + '$')) return;
  13.                             Fx.CSS.Styles.each(function(style){
  14.                                 if (!rule.style || !rule.style[style]) return;
  15.                                 var ruleStyle = rule.style[style];
  16.                                 to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
  17.                             });
  18.                         });
  19.                     });
  20.                     return this.parent(to);
  21.                 }
  22.                
  23.             });
  24.            
  25.             Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
  26.            
  27.             Fx.CSS.Styles.extend(Element.Styles.padding);
  28.             Fx.CSS.Styles.extend(Element.Styles.margin);
  29.            
  30.             Element.Styles.border.each(function(border){
  31.                 ['Width', 'Color'].each(function(property){
  32.                     Fx.CSS.Styles.push(border + property);
  33.                 });
  34.             });
  35.            
  36.             var myMorph = new Fx.Morph('morpher', {wait: false});
  37.            
  38.             $('morph1').addEvent('click', function(e){
  39.                 new Event(e).stop();
  40.                
  41.                 myMorph.start('morph1');
  42.                
  43.             });
  44.            
  45.             $('morph2').addEvent('click', function(e){
  46.                 new Event(e).stop();
  47.                
  48.                 myMorph.start('morph2');
  49.                
  50.             });
  51.         });
  52. </script>



Y listo, ya tenemos nuestro efecto Morph funcionando a la perfección, espero haber sido conciso y directo, me gustaria poder leer su opinion sobre el tutorial. Por cualquier duda o consulta ya saben como hacerlo, pueden dejarme un comentario, dirigirse a la sección de contacto o mandenme un mail y pregunten por lucas xD!

Bueno, me despido, saludos,

Lucas.

  • Juan

    September 7th, 2007 a las 3:06 am

    gravatar

    Me pregunto, ¿este ejemplo no es el mismo que esta aqui? ¿y el tutorial?

  • Lucas

    September 7th, 2007 a las 8:16 pm

    gravatar

    Justamente Juan, mi función en este tutorial no es complicada, lo unico que hice yo fue de alguna forma “traducir” el tutorial para aquellos que no saben manejar bien el sistema y de esta forma puedan entenderlo mejor.
    Espero haberte respondido la pregunta.

    Saludos.

Agrega tu comentario