Comment puis-je faire un effet de fondu de transition avec les images d'arrière-plan

J'ai 5 boutons et quand je passe mon pointeur o certains de puis, je veux changer l'image de fond, mais avec un effet de fondu.

HTML:

<body>
  <div id="content" class="row">
    <div class="large-4 center columns ">
      <a id="column1" class="button expand" href="http://www.page1.com">WEB 1</a>
    </div>
    <div class="large-4 center columns">
      <a id="column2" class="button expand" href="http://www.page2.com">WEB 2</a>
    </div>
    <div class="large-4 center columns">
      <a id="columna3" class="button expand" href="http://www.page3.com">WEB 3</a>
    </div>
    <div class="large-4 large-offset-2 center columns">
      <a id="columna4" class="button expand" href="http://www.page4.com">WEB 4</a>
    </div>  
    <div class="large-4 center columns end">
      <a id="columna5" class="button expand" href="http://www.page5.com">WEB 5</a>
    </div>
  </div>
</body>

Jquery:

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();

  $("#column1").mouseover(function(){
      $("body").css('background-image', 'url("img/dib1.jpg")');  
  });

  $("#column2").mouseover(function(){
      $("body").css('background-image', 'url("img/dib2.jpg")');
  });

  $("#column3").mouseover(function(){
      $("body").css('background-image', 'url("img/dib3.jpg")');
  });

  $("#columna4").mouseover(function(){
      $("body").css('background-image', 'url("img/dib4.jpeg")');
  });

  $("#column5").mouseover(function(){
      $("body").css('background-image', 'url("img/dib5.jpg")');
  });

</script>

Le problème est lors de la modification de l'image, est donc rapidement, pour que je veux mettre un effet de fondu de transition, a essayé de mettre fadetoggle lent, mais disparaissent tout mon contenu, car l'utilisation de "corps" pour mon sélecteur.

InformationsquelleAutor Adh761 | 2014-04-11
  1. 1

    Voici une petite maquette que j'ai faite. C'est juste une base, mais il doit être facilement modifiable.

    http://jsfiddle.net/sB8hU/

    HTML:

    <div id="content" class="row">
        <div class="large-4 center columns ">
          <a id="column1" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page1.com">WEB 1</a>
        </div>
        <div class="large-4 center columns">
          <a id="column2" class="button expand" data-bg="http://www.psdgraphics.com/file/abstract-background.jpg" href="http://www.page2.com">WEB 2</a>
        </div>
        <div class="large-4 center columns">
          <a id="columna3" class="button expand" data-bg="http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.com">WEB 3</a>
        </div>
        <div class="large-4 large-offset-2 center columns">
          <a id="columna4" class="button expand" data-bg="http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.com">WEB 4</a>
        </div>  
        <div class="large-4 center columns end">
          <a id="columna5" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page5.com">WEB 5</a>
        </div>
      </div>

<div class="bg1"></div>
<div class="bg2"></div>

    jQuery:

    $('.bg1, .bg2').height( $(window).height() );
$('.button').hover(function(){
    var bgImage = $(this).data('bg');
    if( $('.bg1').is(':visible') ){
        $('.bg2').css('background-image', 'url(' + bgImage + ')');
        $('.bg1').fadeOut(200, function(){
            $('.bg2').fadeIn(200);
        });
    } else {
        $('.bg1').css('background-image', 'url(' + bgImage + ')');
        $('.bg2').fadeOut(200, function(){
            $('.bg1').fadeIn(200);
        });
    }
});
    • merci, ça fonctionne aussi. 🙂
    • Méfiez-vous que cette solution re-télécharge l'image à partir du serveur à chaque fois que l'arrière-plan est changé (peut causer de la bande passante de surcharge pour vos visiteurs ou plus de charge sur votre serveur)
    • Plusieurs façons de contourner cela. On serait à précharger toutes les images? Désolé c'était un JSFIDDLE où j'ai été emprunt d'images de google. N'a pas trop le choix. lol
    InformationsquelleAutor wrxsti
  2. 0

    Utiliser un absolu de l'élément et ajouter le fond. De faire comme ceci:

    <body>
<div id="bg"></div>

    Et de styles:

    #bg {
position: fixed;
background: url(xyz.com);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}

    Et suivez le même truc. 😀

    InformationsquelleAutor mehulmpt
  3. 0

    CSS3 est le moyen le plus facile. Vous avez juste à réaffecter l'image en JavaScript que vous avez déjà, mettre dans la balise body occupons du reste pour vous. Assurez-vous de jouer avec le temps pour répondre à vos besoins. Avertissement: cette transition ne fonctionne pas dans IE au plus tôt 10.

    body {
   transition: background .5s ease-in-out;
   -moz-transition: background .5s ease-in-out;
   -webkit-transition: background .5s ease-in-out;
}
    • Si je ne me trompe pas, vous ne pouvez animer gradient horizons avec une transition. css3.bradshawenterprises.com/transitions
    • merci pour votre aide, ça fonctionne! et je prends note pour mes projets
    InformationsquelleAutor MaKR
  4. 0

    Malheureusement, ce n'est pas possible actuellement avec les "simples" CSS.

    Cependant, vous pouvez utiliser un conteneur (votre page web) avec position: relative et de la place principale de votre div, avec position: absolute et top: 0; left: 0. puis d'ajouter, au même niveau que cette div:

    <img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" /> 
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />

    Dans votre CSS :

    img.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-out; /* could be another duration /transition effect */
  -webkit-transition: opacity 500ms ease-out;
  -moz-transition: opacity 500ms ease-out;
  -ms-transition: opacity 500ms ease-out;
  -o-transition: opacity 500ms ease-out;
}

img.bg-img.active {
  opacity: 1;
}

    Puis dans votre code, au lieu de changer la propriété background-image du "corps", changer la classe de l'image et ajouter /supprimer des active.

    • merci Samuel, il travaille trop votre réponse
    InformationsquelleAutor Samuel Bolduc
  5. 0

    Vous pouvez utiliser les CSS 3 transition de la propriété. La notion de classe dans votre feuille de style par exemple comme suit:

    .backgroundChanged
{
    background-image: your image;
    transition-property:background-image;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}

    Et ensuite appliquer cette classe par programmation en javascript quand vous en avez besoin.
    Espérons que cette aide.

    InformationsquelleAutor experimenter