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/Scriptaculous 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);
});
// [...]Update: Nomuso is down – links removed
One may find a similar effect on the Nomuso (nomuso.com) website which I recently made (webdev.zalewa.info/portfolio/nomuso-presentation-website-with-private-space/) using the Prototype/Scriptaculous 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.
Comments
Thanks for sharing. I'll be checking this out. mayweather vs ortiz pacquiao vs marquez
Very useful information! Customers are the king in any market and hence their concerns should be tackled at the earliest. Social Media has provided a very convenient way of listening to the customers’ grievances and also addressing them quickly.buy used cars
I guess I will have to continue studying yours and pray that someday I will write on a subject with as a lot wisdom as you have! Bravo!!
Found your weblog by accident for the second time these days so I considered I would have a nearer appear. I've just started producing my own blog site and modeling it right after what you have done. I hope mine is going to be as profitable as yours.
I love photography and making different kinf of images. Thank you for sharing the codes.
http://www.howtogetyourexbackmym3.com
this is just perfect on my blog site i will really gonna giv this a try Long Distance Movers
Your doing a great job, just keep providing us such resources often.
http://www.fingershoes4sale.net/…hoes_2_1.htm
http://www.fingershoes4sale.net/…hoes_6_1.htm
you have hit the nail on the head.Your idea is outstanding; the problem is something that not sufficient men and women are speaking intelligently about.I’m very pleased that I stumbled across this in my search for something relating to thi
I loved how you have written your blog and the perspectives on it were dead on about it as well.
If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.
I have to say, I dont know if its the clashing colours or the bad grammar, but this blog is hideous! I mean,
I dont want to sound like a know-it-all or anything, but could you have possibly put a little bit more effort into this subject. Its really interesting, but you dont represent it well at all, man. http://www.rbkshoes4u.com/…Fit_16_1.htm
Actually your artistic writing skills has influenced me a lot.
tilapia farms
shrimp farming
It's always amazing to know and see how things are working. Actual tutorials always make us learn better.
The matter in query is positively a issue for many. Greatful I determined some honest information on the same.
I love seeing how images are being played in whatever way we want through this technology advancements. Thanks for the pointers.
It is always good to learn new things even without attending a regular program. Thanks for the benefits in posting this.
I thought people will nhuoi do it your way.Thank for your blog. It is wonderful.venapro
Thanks for sharing code. I used this code for my blog images.
Scriptaculous or jQuery), create a site wide loaded Javascript file (in example g
I will try on my image and set it as wallpaper for my computer. I think people will nhuoi do it your way.Thank for your blog. It's wonderful.
You made such an interesting piece to read, giving every subject an enlightenment for us to gain knowledge and information without any arguments to deal with
this was an amazing post. really the result of the code was beautiful. thanks for sharing this wonderful post. – fat burning furnace system
Thanks for your post. I will visit it often. Hope there will be many more interesting articles
I love seeing websites that understand the value of providing a quality resource for free. It’s the old what goes around comes around routine
Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it.
thailand flower | flower delivery turkey
You made such an interesting piece to read, giving every subject an enlightenment for us to gain knowledge and information without any arguments to deal with. Thank you very much and more power! Home Security Systems
Thanks for providing such handy information.agree with you
Pretty sure people would love to go to that place for shopping. Specially to those who are semi naughty or semi conservative people. I guess there are a lot of things their that can be bought. ADT Home Security
Nice post! I will try to remember this for one reason: the way you wrote! Fantastic!
You made such an interesting piece to read, giving every subject an enlightenment for us to gain knowledge and information without any arguments to deal with. Thank you very much and more power!
I find myself strongly about this and loving update reading much more about this topic.
I like your article.Thank you for share it with us.
If I don't came in for a couple of days, there are so many posts that it'll make me a couple of hr just to go all over whatever I missed!
I love seeing websites that understand the value of providing a quality resource for free
Do you have a video tutorials for this?
I do appreciate that youve added relevant and intelligent commentary here though.This is a very great method.
Hi Ashley, different web browsers have a different way of downloading wallpaper. But as for common web browsers, such as Safari and Firefox, you simply need to Control-Click on the wallpaper (the image file) and Set It As Desktop Background. Hope this can help you.
would you mind updating your blog with more information.
All the TVs in our sections were incredibly blurry or on another random stationwomen nfl jersey
Very informative article. Pretty sure people would love to go to that place for shopping. Specially to those who are semi naughty or semi conservative people. I guess there are a lot of things their that can be bought.
You made such an interesting piece to read, giving every subject an enlightenment for us to gain knowledge and information without any arguments to deal with.
If you're searching to get a stylish two of sun shades that could preserve you, consider your Ray Ban Wayfarer sun glasses. If you build your pay for along with obtain your own sun shades, get distinctive treatment of them.
We are a group of volunteers and opening a brand new scheme in our community. Your web site offered us with valuable info to paintings on. You have performed an impressive process and our entire community shall be thankful to you.
Thank you for sharing with us.
well written post. I wanted to read like this for so long. Thank you!
well written post. I wanted to read like this for so long. Thank you!
Thanks quickly becoming the flooring of choice for many residents and businesses around the nation..
be very touchy for most people, my opinion is that there has to be a middle or common ground that we all can find. I do appreciate that youve added relevant and intelligent commentary here though