Hinzufügen von Fade zu meinem Körper Hintergrund Slider

Question

Ich habe einen Hintergrund Body Slider erstellt, der Körper Hintergründe mit "nächsten" und "zurück" Schaltflächen wechseln wird. Live-Beispiel hier:

https://ts564737-container.zoeysite.com/lookbook

Diese Funktion perfekt (ignorieren die großen Bilder so dass es langsam laden), aber ich kann nicht einen Übergangseffekt wie auf dieser Website hinzuzufügen scheinen:

http://northamerica.triangl.com/pages/lookbook-swimwear

Ich habe dies mit CSS transition: all 0.5s ease-out versucht, aber der Übergang ist schlecht und schrecklich geladen.

Könnte jemand bitte beraten, wo ich eine Überblendung hinzufügen kann, so dass es wie die obige Website ist? Danke für deine Hilfe und Zeit.

HTML & jQuery usw.

<!-- Remove header from lookbook page only and add background1 --> 

<script> 
jQuery(document).ready(function() { 
    if (top.location.pathname === '/lookbook') 
{ 
    jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader"); 
    jQuery("body").addClass("background1"); 
} 
}); 
</script> 

<!-- Change background --> 

<script> 
jQuery(document).ready(function() { 
    var current = 1; // current background index 
    var max_backgrounds = 3; // number of backgrounds it will work with any number 
    jQuery(".next").click(function() { 
     jQuery("body").removeClass("background" + current); 
     // next background index or first one if it's the last one 
     current++; 
     if (current > max_backgrounds) { 
      current = 1; 
     } 
     // change background to background1, background2 ... 
     jQuery("body").addClass("background" + current); 
    }); 
    jQuery(".back").click(function() { 
     jQuery("body").removeClass("background" + current); 
     // previous background index or last one if current is the first one 
     current--; 
     if (current < 1) { 
      current = max_backgrounds 
     } 
     // change background to background1, background2 ... 
     jQuery("body").addClass("background" + current); 
    }); 
}); 
</script> 

<!-- Container plus images --> 

<div id="toggle" width="100%"> 
<img src="/media/import/icons/back.png" class="back"> 
<img src="/media/import/icons/next.png" class="next"> 
</div> 

CSS

/* Body background options */ 

.background1 { 
    background: url('/media/import/backgrounds/background1.jpg') no-repeat center center fixed; 
    background-size: cover; 
    overflow: hidden; 
} 

.background2 { 
    background: url('/media/import/backgrounds/background2.jpg') no-repeat center center fixed; 
    background-size: cover; 
    overflow: hidden; 
} 

.background3 { 
    background: url('/media/import/backgrounds/background3.jpg') no-repeat center center fixed; 
    background-size: cover; 
    overflow: hidden; 
} 

/* Toggle Buttons */ 

#toggle .next { 
    float: right; 
    margin-right: 20px !important; 
} 

#toggle .back { 
    margin-left: 20px !important; 
} 

#toggle img { 
    margin-top: 400px; 
    display: inline; 
} 

#toggle img:hover { 
    cursor: pointer; 
    opacity: 0.8; 
} 

Answer 1

Der Trick besteht darin, mehrere Elemente zu verwenden, die alle genau an derselben Stelle positioniert sind. Alle Elemente müssen einen opacity: 0 haben, außer dem aktiven (opacity: 1).

Wenn Sie zum nächsten/vorherigen Element navigieren, müssen Sie auf sie eine aktive Klasse wechseln, die/Sets opacity: 1

Vereinfachtes Beispiel mit divs entfernt:

(function() { 
 

 
     var prevButton = $('.previous'), 
 
      nextButton = $('.next'), 
 
      allImages = $('.background-images li'); 
 

 
     nextButton.click(function(e) { 
 

 
      // Find the active element 
 
      activeElement = $('li.bg-active'); 
 
      // remove the 'bg-active'-class from this element 
 
      activeElement.removeClass('bg-active'); 
 

 
      // if current element is the last one, make sure to add 'bg-active'-class to the very first element. 
 
      if (activeElement[0] === allImages.last()[0]){ 
 
       allImages.first().addClass('bg-active'); 
 
      } else { 
 
       // Add 'bg-active'-class to the next element 
 
       activeElement.next().addClass('bg-active'); 
 
      } 
 

 
     }); 
 

 
     prevButton.click(function(e) { 
 

 
      activeElement = $('li.bg-active'); 
 
      activeElement.removeClass('bg-active'); 
 

 
      // if current element is the first one, make sure to add 'bg-active'-class to the very lst element. 
 
      if (activeElement[0] === allImages.first()[0]){ 
 
       allImages.last().addClass('bg-active'); 
 
      } else { 
 
       // add 'bg-active'-class to the previous element 
 
       activeElement.prev().addClass('bg-active'); 
 
      } 
 
     }); 
 

 

 

 
    })();

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Slider</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <style> 
 
     ul { 
 
      overflow: auto; 
 
     } 
 
     li { 
 
      width: 100px; 
 
      height: 100px; 
 
      position: absolute; 
 
      left: 0; 
 
     } 
 
     .bg { 
 
      opacity: 0; 
 
      transition: all 0.5s ease-out; 
 
     } 
 
     .bg-active { 
 
      opacity: 1; 
 
     } 
 
     .bg1 { 
 
      background-color: red; 
 
     } 
 

 
     .bg2 { 
 
      background-color: green; 
 
     } 
 

 
     .bg3 { 
 
      background-color: blue; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<a href="#" class="previous">previous</a> 
 
<a href="#" class="next">next</a> 
 

 
<ul class="background-images"> 
 
    <li class="bg bg1 bg-active"></li> 
 
    <li class="bg bg2"></li> 
 
    <li class="bg bg3"></li> 
 
</ul> 
 
</body> 
 
</html>

Answer 2

Versuchen Sie es mit

#Crossfade img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }

Dies sollte Ihnen die gewünschte Überblendung geben.

Answer 3

Statt Makeln Klassen könnten Sie einfach das Bild tauschen, ist hier ein schneller Proof of Concept Sie in der Konsole ausführen können:

jQuery("body").css({'background-image':'url(/media/import/backgrounds/background3.jpg)', 'transition':'all 0.5s ease-out'}); 

diese Anpassung für Ihren Code würde wie etwas aussehen:

jQuery

jQuery(".next").click(function() { 
    current++; 
    if (current > max_backgrounds) { 
     current = 1; 
    } 
    jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg'); 
}); 
jQuery(".back").click(function() { 
    current--; 
    if (current < 1) { 
     current = max_backgrounds 
    } 
    jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg'); 
}); 

CSS

body { 
    transition: all 0.5s ease-out; 
} 

Answer 4

Es gibt viele Möglichkeiten, wie Sie darüber kann und this gentleman has showcase many of them

Einige Hinweise:

Die Seite, die Sie als ein Beispiel gegeben haben lädt jedes Bild, wenn die Seite geladen wird. Leistung, Sie wollen das nicht. Wenn Sie einen solchen Effekt erzielen möchten, stellen Sie sicher, dass Sie die Bilder nur dann laden, wenn sie tatsächlich benötigt werden.

Sie erreichen den Effekt, indem alle Bilder übereinander liegen und die Deckkraft beim Klicken auf die Pfeile animiert wird. Da sie alle position:absolute haben, erhalten Sie den gewünschten Crossfade-Effekt.