crossfade effect not working properly

Question

i copied this code from codepen.io to add a crossfade effect to my site's background images.

var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
 window.clearTimeout();
 var k = 0;
 for (i = 0; i < bgImageArray.length; i++) {
  setTimeout(function(){ 
   document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
   document.documentElement.style.backgroundSize ="cover";
  if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }   
  }, (secs * 1000) * i) 
 }
}
backgroundSequence();

* { 
  box-sizing: border-box; 
}
html {
  margin: 0;
  background-size: cover;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
  background-blend-mode: darken;
  // blend mode optional at this stage; will be used more in the next demo.
  transition: 3s;
}
body { margin: 0; }
div#texttop { 
 color: #fff;
 width: 30%;
 margin-top: 5%;
 margin-left: 5%;
 padding: 2rem;
 border: 4px double rgba(255,255,255,0.3);
 background: rgba(0,0,0,0.3);
 font-family: Oxygen, sans-serif;
h1 { 
  margin-top: 0; 
  text-align: center;
  font-weight: 100;
}
p { 
   line-height: 1.6; 
  }
}
@media all and (max-width: 770px) {
 div#texttop { display: none; }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="texttop">
  <h1>True Cross-Fade Background Images</h1>
  <p>A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera).</p>
 </div>

the images are cycling fine, but they aren't doing the cross fading transition, they're just changing without the crossfade effect. and occasionally there are white flashes between the image cycle.

i've inserted a snippet of the code here, and it still isn't working. perhaps there's something missing that i can't find?

Which browser have you tried this with ... if I recall, not all browsers support transitions in `background-image` — Jaromanda X, Feb 25 '18 at 00:43
@JaromandaX i've only tested it in chrome. the original codepen doesn't seem to work in microsoft edge, but it works in chrome. — unilogue, Feb 25 '18 at 00:46
yep, chrome was the only one that supported background image transitions last time I looked — Jaromanda X, Feb 25 '18 at 00:47
Since you code will not work in FF, IE and Edge... Here's a suggestion: https://stackoverflow.com/a/25800332/383904 with a nice graphical explanation — Roko C. Buljan, Feb 25 '18 at 00:47
@JaromandaX i see, thanks for pointing that out. could you recommend a crossfade plugin that works in all browsers? squarespace seems to have one but their code isn't open source, this site has an example https://foxiebombs.com/ — unilogue, Feb 25 '18 at 00:50
@unilogue you're welcome, just, the answer is a bit old, instead of jQuery's `fade` you could instead use `.addClass`, `removeClass`, and let CSS3 `transition` do the fade work instead. Happy coding — Roko C. Buljan, Feb 25 '18 at 12:02
@RokoC.Buljan i ended up using your code instead of the one from codepen, it works beautifully across all browsers! https://thepeoplesday.org/ — unilogue, Feb 25 '18 at 23:58

Okan Kocyigit · Accepted Answer · 2018-02-25T00:48:28.960

codepen.io is using scss you should copy the compiled css,

var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
 window.clearTimeout();
 var k = 0;
 for (i = 0; i < bgImageArray.length; i++) {
  setTimeout(function(){ 
   document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
   document.documentElement.style.backgroundSize ="cover";
  if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }   
  }, (secs * 1000) * i) 
 }
}
backgroundSequence();

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  margin: 0;
  background-size: cover;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
  background-blend-mode: darken;
  -webkit-transition: 3s;
  transition: 3s;
}

body {
  margin: 0;
}

div#texttop {
  color: #fff;
  width: 30%;
  margin-top: 5%;
  margin-left: 5%;
  padding: 2rem;
  border: 4px double rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
  font-family: Oxygen, sans-serif;
}
div#texttop h1 {
  margin-top: 0;
  text-align: center;
  font-weight: 100;
}
div#texttop p {
  line-height: 1.6;
}

@media all and (max-width: 770px) {
  div#texttop {
    display: none;
  }
}

<div id="texttop">
  <h1>True Cross-Fade Background Images</h1>
  <p>A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera).</p>
 </div>

OP doesn't ask a way to transition method which is cross browser. — Okan Kocyigit, Feb 25 '18 at 00:50
Once again, you're right!! damn my old feeble eyes :p - I'll remove my comments to avoid my embarrassment :p — Jaromanda X, Feb 25 '18 at 01:00
@ocanal i think that your code might have worked! the html css was the only part that was missing, it wasn't visible even when i disabled the css preprocessor option on codepen. i am new to sass so i'll have to figure that out. — unilogue, Feb 25 '18 at 01:02
@WillHoskings come on, can't you see that nested styling, https://imgur.com/al5Sbq4 ? — Okan Kocyigit, Feb 25 '18 at 08:44

crossfade effect not working properly

1 Answers1