Take a look at the armchair or foot stool gallery at Talyer & Baines interiors and notice how the images slide in. That’s what I set out to emulate with Mootools in the next of my “Flash without Flash” series.

This effect really isn’t that difficult to pull off. I won’t be including any CSS or HTML this time because it can be used with images, paragraphs, whatever you want. So straight to the JavaScript:

var SlideIn = {
  start: function () {
    var delay = 200;
    $$('img').each(function (el) { 
      el.setStyles({
        'position': 'relative',
        'top': 20,
        'opacity': 0
      });
      var fx = el.effects({transition:Fx.Transitions.Back.easeOut});
      fx.start.delay(delay, fx, {
        'opacity': 1,
        'top': 0
      });
      delay += 200;
    });
  }
};
 
window.addEvent('load', SlideIn.start);

All I’m doing here is offsetting each image’s location and animating it back, in addition to opacity. A delay counter makes sure each image effect is started later than the previous. Finally, I add a load event that starts it all. Pretty darn simple. Have a look at the demo.

Modifications

If you have your images or other elements that you want animated in a container, just get them by changing $$('img').each(...) to $$('#idOfContainer tag') or if you want a class instead do $$('#idOfContainer .className').

Also, if you don’t want the images to appear before the script sets their opacity to 0, you can use CSS to set visibility to hidden, and in the JavaScript, set it to visible again. The only problem with this is that people without JavaScript won’t be able to see whatever is hidden.

This entry was posted on Saturday, August 18th, 2007 at 10:29 am and is filed under flash without flash and tagged with demo, flash, mootools, slide-in, v1.11. You can follow any responses to this entry through the RSS 2.0 feed.