CODEWITHSUNDEEP
javascripthtmlcssanimation
minimino
minimino

Reputation: 105

Fading blocks animation fullscreen

I'm trying to make a slider with fading blocks animation, just like here. Trouble is that in my case I'm trying to do it fullscreen, meaning that height and width will be variable. This means that the background-position trick won't work, as it won't resize the background to fit the screen but rather take it 'as is'. It's easier to see here (keep in mind that #slides would be height 100% and width 100% aswell as .slide>img). I've ran out of ideas to fix it, any help would be appreciated. I'd prefer not using jQuery, but if it is necessary, it'll be okay.

Thank you beforehand.

My script so far is:

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';
    }
}

}

Upvotes: 0

Views: 162

Answers (1)

fuyushimoya
fuyushimoya

Reputation: 9813

After the feedback of the comments, the issue may happen when there's float on window's width. So use document.documentElement.getBoundingClientRect(); to get a precise size, and round down, which may sacrifice some pixels, to ensure that blocks won't overflow to next row. jsfiddle

function animateBlocks(x,y,speed) {
    var img = document.querySelector('#slides img');
    var viewPortSize = document.documentElement.getBoundingClientRect();
    // Round down if there's floating points on width.
    var windowWidth = Math.floor(viewPortSize.width);
    var windowHeight = window.innerHeight;
	var newWidth = windowWidth / x;
	var newHeight = windowHeight / y;
    
    var newDiv;
    var domFrag = document.createDocumentFragment();
    var i, j;
    for (i = 0; i < y; i +=1) {
        for (j = 0; j < x; j += 1) {
            newDiv = document.createElement("div");
            domFrag.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.backgroundSize = windowWidth + 'px ' + windowHeight + 'px';

            newDiv.style.backgroundPosition = ('-' + newWidth*j + 'px ' + '-' + newHeight*i + 'px');
        }
    }
    
    for (var i = 0; i<(x*y); i++) {

	}
    document.getElementsByClassName('active-slide')[0].appendChild(domFrag);
    document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none';
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;  /* makes the scroll bar disappear. */
}	

#slides {
		position: relative;
		height: 100px;
        margin: 0px;
        padding: 0px;
	}
	
	.slide {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		display: none;
	}
	
	.slide>img {
		position: absolute;
		left: 0;
		top: 0;
		height: 100px;
	}
	
	.active-slide {
		display: block;
	}

.slide-block {
	float: left;
}
<button onclick="animateBlocks(5,5,0)">Click here to see how it looks</button>
<ul id="slides">
	<li class="slide active-slide">
		<img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">
	</li>
</ul>
   <br><br><br><br><br><br>
    <p>How it should look</p>
    <img style="height: 100px;" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">

Upvotes: 1

Related Questions