Grow your CSS skills. Land your dream job.

Background-image changer (loop)

  • # April 13, 2009 at 7:16 pm

    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 {
    jQuery("“).attr(“src”, arguments[i]);
    }
    }
    $.preloadImages (“img.jpg”, “img1.jpg”, “img2.jpg”)

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

    # April 13, 2009 at 7:53 pm

    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.

    # April 13, 2009 at 8:09 pm

    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

    # April 15, 2009 at 2:54 am
    "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 ;)

    # April 16, 2009 at 1:09 am
    "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 ;)

    # August 18, 2009 at 4:36 am

    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?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".