programacion

Cargas de página AJAX usando MooTools Fx.Explode - » HostIN

Índice Clase MooTools Fx.Explode de Kassens Mi uso / ejemplo Nota: Todo…

Publicado el 19 de mayo de 2024, 21:00 hs

Lectura 4 min de lectura

HostIN
Programación
Cargas de página AJAX usando MooTools Fx.Explode -

Cargas de página AJAX usando MooTools Fx.Explode -

Índice

Nota: Todo el crédito por Fx.Explode es para Jan Kassens.

Una de las increíbles piezas de código en el sandbox del desarrollador principal de MooTools, Jan Kassens, es su funcionalidadFx.Explode. Cuando haces clic en cualquiera de los elementos Fx.Explode designados, los elementos “explotan” fuera de la pantalla. Haz clic de nuevo y reaparecerá mágicamente. ¿No me crees? ¡Mira el ejemplo de Kassens!

Al hablar con Jan, su idea era utilizar este efecto para los cambios de página, pero nunca llegó a hacerlo. Completé este objetivo, aunque con un código feo, pero creo que vale la pena echarle un vistazo.

Índice de contenidos

Clase MooTools Fx.Explode de Kassens

/* creado por el legendario desarrollador de MooTools, Jan Kassens */Fx.Explode = new Class({Extends: Fx.CSS,options: {grow: 0.5,expand: 1,transition: "expo:out",duration: 750 }, inicializar: función(elementos, opciones){this.elements = this.subject = $$(elementos);this.parent(opciones);this.addEvent('completo', function(){this.clones.dispose( ); if (this.inverted) this.elements.setStyle('opacity', 1);}, true);},calcular: function(from, to, delta){var now = {};for (var i in from) {var iFrom = de[i], iTo = a[i], iNow = ahora[i] = {};for (var p en iFrom) iNow[p] = this.parent(iFrom[p], iTo [p ], delta);}volver ahora;},establecer: función(ahora){para (var i en ahora){var iNow = ahora[i];para (var p en iNow) this.render(this.clones [i ], p, iNow[p], this.options.unit);}devuelve esto;},start: function(fromX, fromY, inverted){this.inverted = !!inverted;var from = {}, to = { };this.clones = $$(this.elements.map(function(el, i){var clone = el.clone();var coords = el.getCoordinates();clone.setStyles(coords).setStyle (' posición', 'absoluta').inject(document.body);el.setStyle('visibilidad', 'oculto');var centro = {x: coords.left + coords.width / 2,y: coords. top + coords.height / 2};var self = this;(function(prop, end){var parsed = self.prepare(clone, prop, end);if (self.inverted) {(from[i] = from [yo] || {})[prop] = analizado.a;;(a[i] = a[i] || {})[prop] = analizado.desde;} else {(desde[i] = desde[i] || {})[prop] = parsed.from;;(to[i] = to[i] || {})[prop] = parsed.to;}return arguments.callee;})('top', coords. arriba + (center.y - fromY) * this.options.expand - coords.height * this.options.grow / 2)('left', coords.left + (center.x - fromX) * this.options.expand - coords.width * this.options.grow / 2)('ancho', coords.width * (1 + this.options.grow))('altura', coords.height * (1 + this.options.grow) )('opacidad', 0);return clone;}, this));return this.parent(de, a);}});

Mi uso / ejemplo

var init = función (req) {var mostrar = verdadero;var corriendo = falso;var explotar = nuevo Fx.Explode('#fx-contain *', {duración: 500,onComplete: función(){ corriendo = falso; } });var implode = new Fx.Explode('#fx-contain *', {onComplete: function(){ running = false; },transición: 'sine:in:out',duración: 500,grow: -1 , expandir: -.8});$$('#fx-contain a').each(function(el) {el.addEvent('click', function(e){e.stop();if (ejecutando ) return;si (se muestra) explode.start(e.client.x, e.client.y);de lo contrario implode.start(e.client.x, e.client.y, true);ejecutando = true ;mostrado = !shown;req.send({url: el.get('href')});});});};/* haciendo que las cosas sucedan */window.addEvent('domready', function () {var req = nueva Solicitud ({método: 'get', datos: {ajax: 1}, onSuccess: función (respuesta) {// desvanecer contenido $ ('fx-contain'). set ({html: respuesta) }); init (solicitud);}});init(solicitud);});

Como dije, mi código no es bonito pero funciona. ¡Disfruta!

Te podría interesar...

LogRhythm ha lanzado un nuevo programa para brindar un mejor soporte a sus usuarios Por qué preferir el correo electrónico profesional al correo electrónico de alojamiento compartido> Blog de eWebGuru Cómo proteger adecuadamente su tienda WooCommerce 4 formas de mejorar la experiencia digital de sus clientes Mejor herramienta SEO gratuita 2024 ¿Qué sigue en el desarrollo web moderno? El alojamiento web Linux hace que el sitio web sea excelente y avanzado Por qué necesita alojamiento administrado con un socio de soporte 24x7 5 oportunidades en ciberseguridad en 2024 y más allá y cómo capitalizarlas

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

← Volver al blog