## mark a section (Learn more)

/* Efectos de transicion con Mootools Codigo de los ejemplos de http://uninstallme.com/efectos-de-transicion-con-mootools */ window.addEvent('domready', iniciarEventos); function iniciarEventos(){ var instanciaClaseEfecto = new Efecto(); } var Efecto = new Class(); Efecto.prototype = { linkEfecto: { 'selector': 'a.efecto', 'tipoEfecto': { 'efecto1': 'efecto-1', // 'tipo de efecto': 'clase css' 'efecto2': 'efecto-2', 'efecto3': 'efecto-3', 'efecto4': 'efecto-4', 'efecto5': 'efecto-5' } }, initialize: function(){ this.linkEfectos = $$(this.linkEfecto.selector); this.efecto1(); // Efecto de transicion de una propiedad CSS: Fx.Tween el.tween('propiedad', 'valor al que cambiara'); this.efecto2(); // Efecto de destacado con hihglight() this.efecto3(); // Fx.Morph permite cambiar el valor de varias propiedades CSS a la vez this.efecto4(); // Efecto de desvanecimiento con fade() this.efecto5(); // Otro efecto con Fx.Tween }, efecto1: function(){ this.linkEfectos.each(function(el){ if(el.hasClass(this.linkEfecto.tipoEfecto.efecto1)){ el.set('tween', {duration: 200}); el.addEvent('mouseover', function(){ el.tween('background-position', '0 -35px'); }) el.addEvent('mouseout', function(){ el.tween('background-position', '0 0'); }) } }.bind(this)) }, efecto2: function(){ this.linkEfectos.each(function(el){ if(el.hasClass(this.linkEfecto.tipoEfecto.efecto2)){ el.addEvent('click', function(e){ //el.highlight('#ddf'); // se especifica el color de fondo al que cambiara //el.highlight('#ddf', '#ccc'); // de x color a x color el.highlight(); // cambia por defecto a un background amarillo ('#ff8') Event.stop(e); }) } }.bind(this)) }, efecto3: function(){ this.linkEfectos.each(function(el){ if(el.hasClass(this.linkEfecto.tipoEfecto.efecto3)){ el.addEvent('click', function(e){ var transicion = new Fx.Morph(el,{ duration: 800, transition: Fx.Transitions.Elastic.easeOut, link: 'ignore', onComplete: function(){ el.set('text', 'Mootools mooola!'); el.addClass('activado'); } }) if(!el.hasClass('activado')){ transicion.start({ 'width': [300, 350], 'background-color': '#fce30d', 'border-color': '#fff', 'text-align': 'center', 'line-height': 50, 'left': '-100px' }) el.removeClass('activado'); } else{ el.fade(); } Event.stop(e); }) } }.bind(this)) }, efecto4: function(){ this.linkEfectos.each(function(el){ if(el.hasClass(this.linkEfecto.tipoEfecto.efecto4)){ el.addEvent('click', function(e){ el.fade('out'); Event.stop(e); }) } }.bind(this)) }, efecto5: function(){ this.linkEfectos.each(function(el){ if(el.hasClass(this.linkEfecto.tipoEfecto.efecto5)){ el.set('tween',{duration: 300}); el.addEvent('mouseover', function(){ el.tween('background-color', '#9fd805'); }) el.addEvent('mouseout', function(){ el.tween('background-color', '#0eb2fe'); }) } }.bind(this)) } }

This paste will be private.