Background-image changer (loop)

[tataurov]

Couldn’t find such a effect in google, so I made up my own.
Hope someone will find it helpful.

Code:

//Creating an array of images you want to change between each other
var bg = new Array(‘url(img.jpg)’, ‘url(img1.jpg)’, ‘url(img2.jpg)’);
var imgIndex=0;
//Starting function
function changeBg()
{
$(document).ready(function(){
$(“div.bg”)
.fadeTo( 100, 1) //can use any other effect to animate the transition
.fadeTo( 100, 1)
.css(“background-image”, bg[imgIndex]);//changing the style
});
imgIndex = (imgIndex + 1) % bg.length; //looping
}
setInterval(“changeBg()”, 1116);//interval between each transition

Don’t forget to use a preloader.

Here the code I used:

Code:

jQuery.preloadImages = function()
{
for(var i = 0; i“).attr(“src”, arguments[i]);
}
}
$.preloadImages (“img.jpg”, “img1.jpg”, “img2.jpg”)

Example of use: http://www.arsenynasonov.com

[falkencreative]

I took a look at your page… have you tested it in Firefox3? It isn’t working for me, which makes the site entirely unusable (since it shows black text on a black background.) Seemed to work in Safari, though it game me a headache after looking at it for about a minute. Trying to read the text while the background is flashing at you is almost impossible.

[tataurov]

Working well with Firefox 3 on mac, never tested on windows machine.

Thanks for saying about the "headache effect", seems doesn’t work on me =)
By the way the site should go along with background sound, didn’t had time yet to put a flash player.
Here’s the song, it should go with, if interested — http://www.arsenynasonov.com/files/sound.mp3

[ikthius]

"tataurov" wrote:

Working well with Firefox 3 on mac, never tested on windows machine.

Thanks for saying about the "headache effect", seems doesn’t work on me =)
By the way the site should go along with background sound, didn’t had time yet to put a flash player.
Here’s the song, it should go with, if interested — http://www.arsenynasonov.com/files/sound.mp3

don’t ever assume that because you don’t get a headache no one else will, if you always think this way, then stop developing for the web please.

the web page is a portal of information, it should be easy to find the info, easy to read for 99% of your audience.

you might have a funky wee page/effect but it could be put to better use, not as dramatic and no sound either, I hate sounds on pages, its so naff.

in fact I would love to put on Soundgarden’s Bad Motor Finger – "Rusty Cage" for some sites, but i would kill off the audience and I would be comitting an offence punishable by death ;)

[tataurov]

"ikthius" wrote:

don’t ever assume that because you don’t get a headache no one else will, if you always think this way, then stop developing for the web please.

the web page is a portal of information, it should be easy to find the info, easy to read for 99% of your audience.

you might have a funky wee page/effect but it could be put to better use, not as dramatic and no sound either, I hate sounds on pages, its so naff.

in fact I would love to put on Soundgarden’s Bad Motor Finger – "Rusty Cage" for some sites, but i would kill off the audience and I would be comitting an offence punishable by death ;)

I never assumed that no one else will get a headache. You never know who will get a headache who won’t. That’s why I always ask people what they think, so I can make changes. And so I will in account that some people might get a headache.

So thanks for the review of the web-page i did. Helped a lot to increase usability ;)

[soap]

i don’t understand why you’d use jquery for this? it’s just as easy (in my case easier because i refuse to learn jquery) in javascript, no?

[Author]

Posts