I am currently working on creating a slider with fading blocks animation similar to the one shown here. The challenge I am facing is making it fullscreen, where the height and width will be variable. This makes using the background-position trick ineffective as it will not resize the background image to fit the screen but rather display it 'as is'. A better understanding can be gained from viewing it here (note that #slides would have both height and width set to 100%, as well as .slide>img). I have exhausted my ideas on how to resolve this issue, any assistance would be greatly appreciated. I would prefer not to utilize jQuery, but I am open to it if necessary.
Thank you in advance.
This is what my script looks like so far:
function animateBlocks(x,y,speed) {
var width = document.getElementById('slides').offsetWidth;
var height = document.getElementById('slides').offsetHeight;
var newWidth = width/x;
var newHeight = height/y;
for (var i = 0; i<(x*y); i++) {
var newDiv = document.createElement("div");
document.getElementsByClassName('active-slide')[0].appendChild(newDiv);
newDiv.className = "slide-block";
newDiv.style.width = newWidth + 'px';
newDiv.style.height = newHeight + 'px';
newDiv.style.backgroundImage = 'url("' + document.getElementsByClassName('active-slide')[0].firstElementChild.src + '")';
newDiv.style.backgroundPosition = ('-' + newDiv.offsetLeft + 'px ' + '-' + newDiv.offsetTop + 'px');
if (i == x*y-1) {
document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none';
}
}
}