Piotr Zalewa

It's a very easy to achieve, but beautiful effect. All images and objects with class .appear_randomly will appear in slightly random order.

Enough to do is to load appropriate library (Prototype/Scrip­taculous or jQuery), create a site wide loaded Javascript file (in example generic.js) and put this simple code inside:

For Prototype:

// just after the DOM is loaded ...
document.observe("dom:loaded", function( event ) {

  // ... for each object from given class on the page ...
  $$('.appear_randomly').each( function ( el ) {
    // ... set opacity to 0 ...
    el.setOpacity(0.0);
    // ... and let it Appear in random time
    new Effect.Appear( el, { duration: Math.random() } );
  });

  // ... for each image on the page ...
  $$('img).each( function ( el ) {
    // ... set opacity to 0 ...
    el.setOpacity(0.0);
    // ... and let it Appear in random time
    new Effect.Appear( el, { duration: Math.random() } );
  });

}

For jQuery:

// just after the DOM is loaded ...
$(document).ready(function(){

  // ... for each .appear_randomly on the page ...
  $('.appear_randomly')
    // ... set opacity to 0 ...
    .fadeTo(1,0)
    // ... and fade to 1 in random time
    .fadeTo(1000*Math.random(),1);

  // ... for each image on the page ...
  $('img')
    // ... set opacity to 0 ...
    .fadeTo(1,0)
    // ... and fade to 1 in random time
    .fadeTo(1000*Math.random(),1);

});

There is a little inconvenience. Images may fade in before file is downloaded to the browser. To fix it one has to wrap the effect into the image's onLoad event.

For Prototype:

// [...]

  // ... for each image on the page ...
  $$('img').each( function ( el ) {
    // ... when image is loaded ...
    Event.observe(el, 'load', function( event ) {
      element =  Event.element(event);
      // ... set opacity to 0 ...
      element.setOpacity(0.0);
      // ... and let it Appear in random time
      new Effect.Appear( element, { duration: Math.random() } );
    });
  });

// [...]

For jQuery:

// [...]

  // ... for each image on the page ...
  $('img')
    // ... when it's loaded ...
    .load( function (e) {
      var element = $(e.target);
      element
        // ... set opacity to 0 ...
        .fadeTo(1,0)
        // ... and fade to 1 in random time
        .fadeTo(1000*Math.random(),1);
    });

// [...]

One may find a similar effect on the Nomuso website which I recently made using the Prototype/Scrip­taculous approach. The code works best with a lot of thumbnails.

Unfortunately it will not always work for Safari (only on the first time loading the page), as cached images do not send the onLoad event. But well – nothing is perfect.

Do you found this post useful? Click on the social bookmarking links to spread the news, send me a note about your website using the effect, and I'll put a link to it.