Saddacrackers

Archive for the ‘web design’ Category

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

Comp for Agathos

Happy Holiday Email

Telus Assessment Tools redesign. Second round

Divine Movement Class Schedule Tool

Coffee Website

This is the site I’m designering for Zippy’s Java lounge in Everett.
www.zippysjava.com

Playground Depot subpage comp

Playground Depot logo designs

I created these logos as part of re-designing the Playground Depot
website. I created the illustration in Adobe Illustrator and imported
it into Photoshop for some chazzle dazzle.

Playground Depot Comps

Annika revisions