Cross fade background-image avec jQuery
j'ai donc quelques images et je voudrais leur montrer comme un diaporama en arrière-plan. Cependant, je veux que l'image de cross-fade entre l'image actuelle et l'image suivante. Jusqu'à présent, j'ai seulement été en mesure de basculer entre les images:
$(document).ready(function () {
var images = ["landing_background_1.jpg", "landing_background_2.jpg", "landing_background_3.jpg", "landing_background_4.jpg"];
var currentImage = 0;
function changeBackgroundImage() {
$("html").fadeIn().css({
"background-image": "url('img/backgrounds/" + images[++currentImage] + "')",
});
if (currentImage >= images.length - 1) {
//set it back to the begining
currentImage -= images.length;
}
}
setInterval(changeBackgroundImage, 1500);
});
Toute aide serait grandement appréciée! 🙂
Un fondu enchaîné fait en JS, deux séparément des images visibles avec l'un disparaît, l'autre à la décoloration. Vous ne pouvez pas il suffit de passer une seule image avec la plaine javascript comme vous essayez de faire et d'obtenir un fondu enchaîné. Vous pouvez apparemment de le faire avec le CSS3.
jqueryfordesigners.com/image-cross-fade-transition
jqueryfordesigners.com/image-cross-fade-transition
OriginalL'auteur Elmer | 2013-08-20
Vous devez vous connecter pour publier un commentaire.
Ce que vous avez à faire est de la couche de deux éléments l'un sur l'autre. Alors un fadeout et les autres fadein.
Ici est de savoir comment j'allais faire ...
css ...
Le html ...
Le script ...
Vous aurez besoin de jouer avec le timing pour l'obtenir il à l'air bien. Assurez-vous de définir vos url pour les images dans l'image de tableau ou lors de la piqûre dans le css est construit.
Vérifier la mise à jour de réponse
OriginalL'auteur Andrew Kasper
Plus facile:
html:
css:
OriginalL'auteur Paweł