javaScript motion framework - demo pages

Transition Demo

This simple demo shows how easy it is to set up some very effective morphing.
The transition function is a little over 20 lines long and has a lot of parameters to modify transition modes.
I'm showing here only a few randomly chosen kinds.
This continuous sequence skews 25 elements around and affects my (lousy) 3 year old computer only by 7 to 10 % CPU usage doing ~80-90 fps ;o). With jQuery this demo maxes the CPU-fan speed, starts stucking and ...
with jsMorph it works even fine and smooth in IE5.5

Click somewhere on the screen to toggle sequence play.

The following code is just a wild grown, quick and dirty demo for what's possible... (sorry if it's not understandable ;o)
You can make different transition effects by putting a layer with the new image (src) above the existing image (img), splitting it into slizes (peaces) and letting them move around defined by the ease function (ease), the spzified time (duration) and some more 'switches':

• delayExtension: how much longer the morphing sequence of a single slize lasts to the previous one
• mode: movement of slizes depending on horiz: 0 = right or down, 1 = left or up
• mSplit: splits delay effect in the middle (descending to the end like first one... arrow head effect)
• sSplit: splits mode for every slice (zig-zag effect)
• horiz: 1 = vertical slizes moving horizontal, 2= horizontal slizes moving horizontal, 3 = v - v, 4 = h - v

var scewSlide = function(myMorph, img, src, ease, peaces, duration,
                         delayExtension, mode, mSplit, sSplit, horiz) {
      var imgLayer = [], params, pos, delay, m = mode%2, delta, gapper, wrapper = img.parentNode;
      peaces = peaces || 10;
      delayExtension = typeof delayExtension != undefined ? delayExtension : 40;
      duration = (duration || 800) - ((peaces-1)*delayExtension);
      delta = (horiz ? img.offsetWidth : img.offsetHeight) / peaces;
      gapper = delta*peaces % peaces ? 1 : 0;
      
      myMorph.reset();
    
      for (var n=0; n < peaces; n++) {
        if (!scewSlide.slizes || scewSlide.slizes < n) { // make shure you recycle ;o)
          scewSlide.slizes = n;
          wrapper.appendChild(imgLayer[n] = document.createElement('div'));
        } else imgLayer[n] = wrapper.children[n+1];
        delay = (m ? peaces-n : n);
        if (mSplit) delay = (n<= peaces/2) ? 
          Math.round(peaces-delay-(!m ? peaces/2 : 0))-1 :
          Math.round(delay-(!m ? peaces/2 : 0));
        imgLayer[n].style.cssText = !(horiz%2) ?
          'position:absolute;left:0px;top:'+(delta*n)+'px;height:'+(delta+gapper)+
          'px;width:100%;background: url('+img.src+') no-repeat 0 -'+(delta*n)+'px;' :
          'position:absolute;top:0px;left:'+(delta*n)+'px;width:'+(delta+gapper)+
          'px;height:100%;background: url('+img.src+') no-repeat -'+(delta*n)+'px 0;';
        params = {duration :duration, delay : delay*delayExtension};
        pos = horiz && !(horiz<2) ?
          {top: mode%4 < 2 ? '100%' : '-100%'} : {left: mode%4 < 2 ? '100%' : '-100%'};
        if (sSplit) pos = horiz && !(horiz<2) ?
          {top: n%2 ? '100%' : '-100%'} : {left: n%2 ? '100%' : '-100%'};
        myMorph.concat(imgLayer[n], pos, params, ease);
      }
      img.src = null; img.src = src;
    },
    myMorhp = new jsMorph(),
    img = document.getElementById('slide').children[0],
    images = ['img_01.jpg', 'img_02.jpg', 'img_03.jpg', 'img_04.jpg'],
    cubicEaseIn = function(n) {return n*n*n};

scewSlide(myMorph, img, images[0], cubicEaseIn, 25, 600, 35, 0, 1, 1, 4);