#scriptaculous.js

[mrkodama]

Ever wanted to know how to get that nice, smooth scale effect on dialog boxes & other elements. Well, look no further. Bubble is my second prototype.js based effect.

What’s in the ‘zip’ file:

bubble.js

bubble.htm [example usage]

Please feel free, to download the class & use it in your own code.

bubble.js

Bubble = Class.create(Abstract, { initialize: function (id,x,y,options) { this.id = id; this.x = x; this.y = y; this.options = Object.extend({ auto: true, frequency: 5, duration: 0.4, scaleFrom: 0, scaleFromCenter: true, delay: 0.2, bduration: 1.1 }, options || {}); if (this.options.auto) { this.start(); } }, start: function () { var opt = Object.clone(this.options); var id = this.id; $(this.id).setStyle({left:this.x + 'px',top:this.y + 'px'}); new Effect.Scale(this.id,100, Object.extend({ beforeStart:function(effect){ $(effect.element).style.display = 'block'; $(effect.element).setOpacity(0); $$('#' + id + ' p').each(function(p){p.hide()}); }, afterUpdate:function(effect){ $(effect.element).setOpacity(effect.position); }, scaleFrom:opt.scaleFrom, scaleFromCenter:opt.scaleFromCenter, afterFinish:function(effect){ $$('#' + id + ' p').each(function(p){ new Effect.Appear(p,{duration:opt.duration}); }); } },{delay:opt.delay,duration:opt.bduration})); } });

[mrkodama]

Having used carousel.js for prototype & scriptaculous, for many years, I decided to give the ‘fade’ effect a try. The slide effect works well, but the fade effect is disappointing. Each image fades to white before revealing the next image.

I decided to build a new effect that fades successive images on top of a stack, to reveal the one underneath. This feels a little more intuitive. Each image appears to morph smoothly into the next.

What’s in the ‘zip’ file:

onionSkin.js

onionSkin.htm [example usage]

Please feel free, to download the class & use it in your own code.

onionSkin.js

OnionSkin = Class.create(Abstract, { initialize: function (slides,options) { this.slides = slides; this.options = Object.extend({ circular: true, auto: true, frequency: 5, duration: 3, from: 0, to: 1 }, options || {}); this.initial = 0; if (this.options.auto) { this.start(); } }, next: function () { Effect.Fade(this.slides[this.initial],{from:this.options.to,to:this.options.from,duration:this.options.duration}); this.initial++; if(!this.options.circular){ if (this.initial == this.slides.length) this.stop(); } if (this.initial == this.slides.length) this.initial = 0; Effect.Appear(this.slides[this.initial],{from:this.options.from,to:this.options.to,duration:this.options.duration}); }, stop: function () { if (this.timer) { clearTimeout(this.timer); } }, start: function () { this.periodicallyUpdate(); }, periodicallyUpdate: function () { if (this.timer != null) { clearTimeout(this.timer); this.next(); } this.timer = setTimeout(this.periodicallyUpdate.bind(this),this.options.frequency*1000); } });