WmMead

Project 07

I took the type out of Project 07 and focused instead on bringing a random amount of opacity for each element added to the page. To achieve this, I updated the function that fades elements in to take an additional parameter for the target opacity.

The opacity is limited to between half way transparent to completely opaque, and I like the look that creates for this particular iteration of the project.

Code Snippets for 07

The unfade() function has been updated to include a second parameter to set a random amount of opacity for fading elements in.
Updated unfade() function...
// Updated function to take a target opacity...
function unfadeto(element, targetOpacity) {
    var op = 0.05;
    var timer = setInterval(function () {
        if (op >= targetOpacity){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.05;
    }, 50);
}
For this project, I have created a variable for a random target opacity, which you can see on line 9. This opacity will be between .5 and 1, so no very light items in this project. Then you can see on line 24 where the unfade() function runs and takes the target opacity as an input. The function for fading out elements has not changed in this version, so I have not shown it here.
Updated createBox() function...
function createBox()
{	
	setTimeout( function(){
		var box = document.createElement("div");
		var boxWidth = getRandomInt(10, windowWidth);
		var boxHeight = getRandomInt(10, windowHeight);
		
		// Set a target opacity for the element created...
		var targetOpacity = getRandomInt(50, 100)/100;
	
		box.style.width = boxWidth + "px";
		box.style.height = boxHeight + "px";
		
		box.style.webkitTransform = 'rotate('+getRandomInt(-360, 360)+'deg)'; 
		box.style.mozTransform = 'rotate('+getRandomInt(-360, 360)+'deg)';
		box.style.transform = 'rotate('+getRandomInt(-360, 360)+'deg)'; 
		
		box.style.top = getRandomInt(-boxHeight, windowHeight) + "px";
		box.style.left = getRandomInt(-boxWidth, windowWidth) + "px";
		
		box.style.backgroundColor = colors[getRandomInt(0, 4)];
		
		// fade elements to a random opacity...
		unfadeto(box, targetOpacity);
		document.getElementById("page").appendChild(box);
		
		var boxMax = getRandomInt(1, 75);
		
		if( container.children.length > boxMax )
		{
			var counter = (container.children.length - boxMax)-1;
			fade(container.children[(counter)], counter);
		}
		else
		{
			createBox();	
		}
	}, 1500 );
}