плавный переход в фоновом режиме

Question

im пытается сделать страницу с динамическим фоном. im используя код ниже;

 

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'); 
     } 
    }); 
} 
 

с: тела OnLoad = "setInterval (loadBackground, 10000);"

im использование этого, потому что автоматическое изменение через 10 секунд.

здесь getimages.php файл:

 

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

но менять изображения непосредственно без плавного перехода. как сделать плавный переход для фоновых изображений?

С уважением.

Answer 1

При обратном вызове ajax-эффекта вы должны применить переход css, а затем установить фоновое изображение. Например, угасать + установить новое изображение + затухать.

Здесь пример кода css для применения затухания на теге изображения.

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} 

В качестве альтернативы, вы можете использовать JQuery, например:

$("#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 


      }); 

     }); 



     } 
    }); 
} 

Я предлагаю использовать определенный html вместо 'html',