web-dev-qa-db-fra.com

Changer l'image de fond du corps avec un effet de fondu dans jQuery

Hey je veux fondre dans une nouvelle image de fond disons toutes les 60 secondes. J'ai défini l'image de fond comme ceci:

body {background-image: url(background.jpg);}

Maintenant, je veux le changer, donc après 60 secondes, il passe à background2.jpg, puis après 60 secondes à background3.jpg et ainsi de suite ..

J'ai trouvé beaucoup de choses sans les changer dans le corps, mais juste comme une image ... Des solutions rapides?

Je vous remercie!

jquerycssbackground-image
15
Marc Ster

Re-mise à jour de la mise à jour:

Même plus récent Fiddle (sans arguments.callee)

Changements:

GRANDE MISE À JOUR

Pris la viande de ce code de cette réponse précédente et ajouté un peu de bling (en utilisant mon site stash lol)

_ {violon original :)

NOUVEAU Super Fiddle

Javascript:

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS:

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}
21
Deryck

Vous pouvez utiliser la méthode setInterval et basculer entre les classes définies dans votre CSS qui ont différentes images de fond:

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 1000);

Fiddle

Cet exemple utilise un intervalle de 1000 qui correspond à une seconde. Vous pouvez modifier cette valeur pour la période de temps que vous recherchez. 

METTRE À JOUR

Ayant remarqué que votre question demandait un fondu, j'ai ajouté une propriété CSS3 au corps:

body
{
    transition: background 0.5s linear;
}

Le violon a été mis à jour.

11
Dan-Nolan

En vous basant sur la réponse de Dan-Nolan (anciennement user506980), vous pouvez également affecter les arrière-plans à un tableau, puis appeler chaque arrière-plan du tableau avec un compteur.

jsFiddle Demo

En outre, vous pouvez affecter la fonction setInterval à une variable, puis utiliser cette variable ultérieurement pour arrêter les répétitions.

$(document).ready(function() {
    var cnt=0, bg;
    var $body = $('body');
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];

    var bgrotater = setInterval(function() {
        if (cnt==5) cnt=0;
        bg = 'url("' + arr[cnt] + '")';
        cnt++;
        $body.css('background-image', bg);
    }, 1000);

    //To stop the backgrounds from rotating. Note the critical step above
    //of assigning the setInterval function to a variable, in order to
    //use it again (below) to stop the repeating function
    $('#some_button_id').click(function() {
        clearInterval(bgrotater);
    });

}); //END document.ready

Etant donné que je me suis appuyé sur la réponse de Dan-Nolan, veuillez inverser sa réponse si vous passez à celle-ci. Et je vois que Deryck a ajouté la sienne, et c'est aussi correct. Upvote.

7
gibberish

https://github.com/srobbin/jquery-backstretch Backstretch est un simple plugin jQuery qui vous permet d’ajouter une image d’arrière-plan redimensionnée dynamiquement et capable de présenter un diaporama à une page ou à un élément. L'image s'agrandira pour s'adapter à la page/à l'élément et sera automatiquement redimensionnée à mesure que la taille de la fenêtre/de l'élément change. 

2
Kenrick

Toutes les 12 secondes, une image est modifiée dans le conteneur de présentation; ça peut être une balise body

HTML

<div class="presentacion">
  <div class="mask"></div>
</div>

JS

delay (11000) + setTimeout (1000) = 12 s .__ durée de transition = 300 + 300 = 600 ms

var imgArray = ['image-1', 'image-2', 'image-3'], index = 0;

(function changeBG(){
  // mask element only for transition
  $('.mask').delay(11000).animate({opacity:1}, 300, function(){
    index = (index + 1) % img_array.length;
    // in presentacion element change bg images
    $('.presentacion').css("background-image", "url('images/bg-"+imgArray[index]+".jpg')");
  }).animate({opacity: 0}, 300);
  setTimeout(changeBG, 1000);
})();

CSS

.presentacion {
  background-attachment: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("images/image-1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  position: relative;
  width: 100%;
  z-index: 0;
  opacity: 1;
}
.mask {
  background-color: rgba(0,0,0,0);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 10;
}
0
Juan Pablo Vaca Pliego
jQuery(document).ready(function() {
var cnt=0, bg;
var $body = jQuery('body');
var arr = ['secondbg.jpg','sartulebis-archeva2.png'];

animate = function(){

}
var bgrotater = setInterval(function() {
    if (cnt==2) cnt=0;
    bg = 'url("http://yalcingroup.ge/test/wp-content/uploads/2015/08/' + arr[cnt] + '")';
    cnt++;
    jQuery('#background_cycler').animate({opacity:1}, 2000, function(){
        $body.css('background-image', bg);
    });


    jQuery('#background_cycler').animate({opacity:0}, 2000);
},10000);

}); 

0
George

S'appuyant sur la réponse de Deryck ...

Si jQuery Color ne fonctionne pas correctement (ce qui est parfois le cas), vous pouvez utiliser fadeIn() et fadeOut() à la place:

 $(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').fadeOut(1000, function () {
                setTimeout(function () {
                    $('#fullPage').fadeIn(1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});
0
Crimbo