smooth transition while background switch

Question

im trying to make dynamic backgrounded page. im using the code below;



function loadBackground() {
    $.ajax({
        url: 'getimages.php',
        success : function(filename) {
        $('html').css('background', 'url('+filename+') no-repeat center center fixed');
        $('html').css('-webkit-background-size', 'cover');
        $('html').css('-moz-background-size', 'cover');
        $('html').css('-o-background-size', 'cover');
        $('html').css('background-size', 'cover');
        }
    });
}

with: body onLoad="setInterval(loadBackground, 10000);"

im using this because auto change in 10 seconds.

here is getimages.php file:



$files = glob('server/php/files/*.*');
    $file = array_rand($files);
    echo $files[$file];

but it change images directly without smooth transition. how to make smooth transition for background pictures?

best regards.

Luca Iaco · Answer 1 · 2014-01-14T15:42:21.790

1

on ajax success callback you should apply a css transition, then set background image. For example a fade out + set new image + fade in .

Here sample css code for apply a fade-out on an image tag.

img{-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
    width:50%; height:50%}


img:hover{opacity:0}

Alternatively, you could use jquery, for example:

$( "#book" ).fadeOut( "slow", function() {
    // Animation fade-out complete
    $( "#book" ).fadeIn( "slow", function() {
       // Animation complete


    });

});

// ===== So =====

function loadBackground() {
    $.ajax({
        url: 'getimages.php',
        success : function(filename) {

        $( 'html' ).fadeOut( "slow", function() {
           // Animation fade-out complete


           $('html').css('background', 'url('+filename+') no-repeat center center fixed');
           $('html').css('-webkit-background-size', 'cover');
           $('html').css('-moz-background-size', 'cover');
           $('html').css('-o-background-size', 'cover');
           $('html').css('background-size', 'cover');


           $( 'html' ).fadeIn( "slow", function() {
             // Animation complete, finish


           });

        });



        }
    });
}

I suggest to use a specific html element instead of 'html',

edited Jan 14 '14 at 15:42

answered Jan 14 '14 at 15:32

Luca Iaco

3,387
1
19
20

i've edited my post. For css, it is an example, you should apply it if you want but setting it programmatically as you have done for html tag in your success callback. Anyway, look also my edit for jquery solution, it could be easier to implement – Luca Iaco Jan 14 '14 at 15:37
Are you able to set new image from link retrieved from ajax response? – Luca Iaco Jan 14 '14 at 15:50
try this example: $('body').css({background : 'url('++') no-repeat fixed bottom left'}); – Luca Iaco Jan 14 '14 at 15:56
i am already doing it with $('html').css('background', 'url('+filename+') no-repeat center center fixed'); isn't it? – haybeye Jan 14 '14 at 16:03
1

see this example i've http://jsfiddle.net/B2XT8/2/ maybe what you need is a loading indicator like a ring, while image is loading into page, then fade in all – Luca Iaco Jan 14 '14 at 16:13

smooth transition while background switch

1 Answers1