So, here's a strange issue I'm facing.
On my website, the background image changes with a smooth fadeIn/Out transition.
Video:
Website in action:
Here is the HTML markup:
<div class="fondo" onclick="descargar(2,500);descargar(1,500);"></div>
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<!-- Header Start -->
CSS Styles:
.headerimg {
background-position: center top; background-repeat: no-repeat; width:100%;position:absolute;height:100%;cursor:pointer;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.headerimg img{
min-width:100%; width:100%; height:100%;
}
.fondo{
position:absolute;
z-index:1;
width:100%;
height:100%;
cursor:pointer;
}
Javascript Code:
/*Background Image Transition Management*/
$(document).ready(function() {
/*Control animation speed*/
var slideshowSpeed = 3000;
var transitionSpeed = 2000;
var timeoutSpeed = 500;
/*Do not touch*/
var interval;
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// If already animating, do nothing!
if(animating) {
return;
}
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
cargarImagen(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -1;
var cargarImagen = function(photoObject, currentContainer, activeContainer) {
animating = true;
currentZindex--;
$("#headerimg" + activeContainer).css({
"background-image" : "url(" + photoObject + ")",
"display" : "block",
"z-index" : currentZindex
});
$("#headerimg" + currentContainer).fadeOut(transitionSpeed,function() {
setTimeout(function() {
$("#headertxt").css({"display" : "block"});
animating = false;
}, timeoutSpeed);
});
};
navigate("next");
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
In addition to this, there is an overlay div (class fondo) that covers the entire screen to detect when the background is clicked. The issue arises with white text during the transition effect.
Can anyone suggest what might be causing this strange behavior?