Grow your CSS skills. Land your dream job.

Full Page Background Transition

  • # October 11, 2012 at 6:42 am

    Hey guys

    I have created this website for a friend, and he seems happy enough with it, however is a bit unsure with the background transition effect.

    The thing he doesn’t like about it is the transition from one image to the next, the bit where the white space appears as the code is grabbing the next image.

    On the homepage, I have made a custom template as it is a static page and only needs the sidebar.php file.

    On this template I have added the line;

    slideshow

    And the jQuery looks like this;

    jQuery.noConflict();

    var aImages = new Array();
    var iPrev = -1;
    var iRnd = -1;

    aImages[0] = “wp-content/themes/SJPhotographyTheme/images/MSF-photo-home.jpg”;
    aImages[1] = “wp-content/themes/SJPhotographyTheme/images/queen-peekabo.jpg”;
    aImages[2] = “wp-content/themes/SJPhotographyTheme/images/sistine-chapel.jpg”;
    aImages[3] = “wp-content/themes/SJPhotographyTheme/images/titanic-photo-home.jpg”;
    aImages[4] = “wp-content/themes/SJPhotographyTheme/images/colosseum-rome.jpg”;
    aImages[5] = “wp-content/themes/SJPhotographyTheme/images/kitchen-photo-home.jpg”;

    jQuery(document).ready(function() {

    /* Define the function that triggers to fade in the background as soon as the image has loaded */
    jQuery(“img#bg”).load(function()
    {
    /* Fade in during 2 seconds */
    jQuery(“img#bg”).fadeTo(2500,1);

    /* Set the timeout to fade out the image after 10 seconds*/
    setTimeout(function()
    {
    jQuery(“img#bg”).fadeOut(2500);

    /* Load the next image after 4 seconds */
    setTimeout(LoadImages,3000);
    }
    ,12000);
    }
    )

    /* Start the slideshow one second after the page is ready */
    setTimeout(LoadImages,1000);

    });

    function LoadImage(iNr)
    {

    /* Assign the new image to the background */
    jQuery(“img#bg”).attr(“src”, aImages[iNr]);

    };

    function LoadImages()
    {

    /* Select a random image number and make sure this is not equal to the previous image */
    while(iPrev == iRnd)
    {
    iRnd = Math.floor(Math.random()*aImages.length);
    }

    /* Show the selected image */
    LoadImage(iRnd);

    iPrev = iRnd;

    };

    Is there ANY way possible to cross fade these images? I have tried looking for a plugin on WordPress for this type of thing but none seem to work :(

    Any help would be appreciated.

    Steven

    # October 11, 2012 at 1:20 pm

    The crossfade might be difficult to accomplish. Why don’t you just add another `` that starts at zero opacity that is sitting on top of the original, then start fading that one in as the other fades out.

    # October 12, 2012 at 3:57 am

    Hey @TheDoc

    I have managed to use different code now and it works quite well :)

    Thanks for your reply.

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

You must be logged in to reply to this topic.

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