Add animated thumbnails into your website.

This code was initially built for the iPhone and employs css3 technologies, but I believe it will work in Safari or Firefox. I’m not sure about IE (IE-8 will probably be ok).

The main class.
Save the code below in a file and name it AnimateThumbs.js

var AnimateThumbs = function () {

var _container;
var _totalThumbs;
var x_counter = 0;
var y_counter = 0;
var xArr_counter = 0;
var yArr_counter = 0;
var spacer = 10;
var columns = 4;
var _interval = 100;
var _randomize = false;
//var x = [0,1,2,0,1,2,0,1,2,0,1,2]; // these are how the arrays should look if there are 12 child nodes and 3 columns
//var y = [0,0,0,1,1,1,2,2,2,3,3,3]; // these are how the arrays should look if there are 12 child nodes and 3 columns
var x = new Array();
var y = new Array();

function setup() {
//_container = container;
_totalThumbs = _container.childNodes.length;
hideThumbs();

// populate x and y arrays with the proper row and column positions
// based on the children of the containing div
for (var i=0; i< _totalThumbs; i++) {

if (xArr_counter + 1 < columns) {
xArr_counter++;
x.push(xArr_counter);
y.push(yArr_counter);

} else {
xArr_counter = 0;
x.push(xArr_counter);
y.push(yArr_counter);
yArr_counter++;
}
}

}

// position the thumbs based on
function animateThumbs() {
if (_randomize) {
for (var i=0; i< _totalThumbs; i++) {
setTimeout(randomThumb, _interval * i, i);
}

} else {
for (var i=0; i< _totalThumbs; i++) {
setTimeout(fadeThumb, _interval * i, i);
}
}

}

// remove thumbs one at a time in the same order they were placed
function reverseThumbs() {
for (var i=0; i< _totalThumbs; i++) {
setTimeout(removeThumbs, _interval * i, i);
}
}

// place thumbs on stage in random order
function randomThumb(number) {

var i = number;
var rand = Math.floor(Math.random() * x.length);

_container.childNodes[i].style.top = (103 + spacer) * (y[rand]);
_container.childNodes[i].style.left = (75 + spacer) * (x[rand]);

x.splice(rand,1);
y.splice(rand,1);

}

// place thumbs on stage from top left to bottom right
function fadeThumb(num) {
var i = num;

//alert(num);
_container.childNodes[i].style.top = (103 + spacer) * y_counter;
_container.childNodes[i].style.left = (75 + spacer) * x_counter;

if (x_counter + 1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}

}

// moves thumbs off the viewable area one at a time
function removeThumbs(num) {
var i = num;
var thumbWidth = _container.childNodes[0].offsetWidth;

//alert(num);
_container.childNodes[i].style.top = 0;
_container.childNodes[i].style.left = (-thumbWidth);

}

// moves thumbs off the viewable area all at once
function hideThumbs() {
var thumbWidth = _container.childNodes[0].offsetWidth;

for (var i=0; i< _totalThumbs; i++) {
_container.childNodes[i].style.left = (-thumbWidth);
}
}

/* UTILS */
function changeClass (element, newClass) {
element.setAttribute("class", newClass); //For Most Browsers
}

function cleanWhitespace(node)
{
for (var i=0; i<node.childNodes.length; i++)
{
var child = node.childNodes[i];
if(child.nodeType == 3 && !/\S/.test(child.nodeValue))
{
node.removeChild(child);
i--;
}
if(child.nodeType == 1)
{
cleanWhitespace(child);
}
}
return node;
}

/* PUBLICLY AVAILABLE METHODS */
return {
/* Public methods */
start:function () {
animateThumbs();
},

init:function () {
setup();
},

reverseAnimation:function () {
reverseThumbs();
},

/* Public Properties */
getContainer:function () {
return _container;
},

setContainer:function (obj) {
// remove whitespace so we
// get accurate node counts
cleanWhitespace(obj);
_container = obj;
},

getRandomize:function () {
return _randomize;
},

setRandomize:function (value) {
_randomize = value;
},

setColumns:function (value) {
columns = value;
},

getTotalThumbs:function () {
return _totalThumbs;
}

}

};

Now include the code in your html file.

<script type="text/javascript" src="js/AnimateThumbs.js" charset="utf-8"></script>

And you will need a div setup as a container for your thumbs. I gave my div an id of intro

<div id="intro">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Now you need to activate the javascript code.

var animatethumbs = new AnimateThumbs();
//set the div that contain the thumbs you wanna animate
animatethumbs.setContainer(document.getElementById('intro'));
//do you want them to animate in randomly?
animatethumbs.setRandomize(false);
//initialize
animatethumbs.init();

setTimeout(animateThumbs, 1500);
setTimeout(killThumbs, 5000);

function animateThumbs() {
//start animation
animatethumbs.start();
}

function killThumbs() {
//remove thumbs
animatethumbs.reverseAnimation();
}

Don’t forget the css so you can actually see the thumbs!!!

#intro { position: relative; }
#intro > div { width: 75px; height: 103px; background-color: #000; -webkit-border-radius: 3px; position: absolute; }