Flash Without Flash: Grid Slide In

October 16th, 2007 in flash without flash  |  5 Comments

The effect I’m reproducing this time can be found at Got Character. Notice how the images slide in. Clicking on Gallery will allow you to see the effect more fully. Here is my version. You’ll notice that it is very similar to the original slide in effect, and that’s because it is. I only changed a few lines.

JavaScript

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

To make every image animate from the same start point, I got the parent’s top and left CSS value and subtracted the image’s top and left value. That works because I set the image’s position to relative. Then I just create an effect that will animate the image’s location back to 0, where it would normally appear in the layout.

Modifications

This is the same modification as in the original slide in, but solves an additional problem. If you don’t want the images to appear before the effect occurs (and who wouldn’t?) but still allow people without JavaScript to view the images, you can create an extra CSS file that adds a visibility: hidden rule to images and load that with Mootools using the Assets class. This line should be placed outside of any load or domready functions and will add the css file to the head:

new Asset.css('style_js.css');

That way, you know the images aren’t hidden if the user doesn’t have JavaScript, plus it will hide the images without a flicker because the rule is applied even before the images are loaded.

This entry was posted on Tuesday, October 16th, 2007 at 8:42 pm and is filed under flash without flash and tagged with , , , , . You can follow any responses to this entry through the RSS 2.0 feed.

5 Responses to “Flash Without Flash: Grid Slide In”

  1. Ryan

    October 19th, 2007 at 11:40 am | reply

    I like this one better. You’re turning into the Mootools god.

  2. Chris

    October 19th, 2007 at 11:43 am | reply

    Hehe, not quite. I’m sure I’m not using Mootools to its full potential.

  3. Patty

    May 3rd, 2008 at 11:23 am | reply

    Very nice! I am using this on a site I am building, and the thumbnails will be links to a larger image which opens in a lightbox. Everything works fine except in IE.

    Once I turn the images into links the “throwing effect” disappears and they just fade in one at a time. It doesn’t look horrible it just loses a little of the WOW effect I was going for.

    Any suggestions?

  4. Chris

    May 3rd, 2008 at 2:12 pm | reply

    Patty, you’ll have to iterate over the links that contain the images instead of the images themselves. To do that, change this $$('img') to this: $$('.className') where className is a class that all your links you want the effect applied to have. I think that should do it.

  5. Patty

    May 3rd, 2008 at 7:08 pm | reply

    I had the images/links within a div and was using $$(”#idName img’)… which was giving me the odd response from IE.

    I added a class to the links and am now using $$(’.className’) … works beautifully in FF IE7 IE6 Opera and Safari!

    Thanks for the quick response and the wonderful script! I’ll post a link to the site when done.

Leave a Reply