JAVASCRIPT
/**
* Uses jquery.animate-shadow.js
* http://www.bitstorm.org/jquery/shadow-animation/
**/
$(document).ready(function() {
var $text = $('#text');
var $box = $('#box');
var $shadow = $('#shadow');
var $one = $('#one');
var $two = $('#two');
var $three = $('#three');
var $four = $('#four');
var $color = $('#color');
var $inset = $('#inset');
var $shadow2 = $('#shadow2');
var $comma = $('#comma');
var step;
var handle = null;
var colors = [
'#33CCFF',
'#CC66FF',
'#FF5050',
'#FFFF00',
'#66FF33',
'#333'
]
$text.hide();
$box.hide();
$shadow.hide();
$inset.hide();
$comma.hide();
$shadow2.hide();
setTimeout(function() {
$text.fadeIn(200);
}, 200);
setTimeout(function() {
$box.fadeIn(200);
}, 400);
setTimeout(function() {
$shadow.fadeIn(200);
}, 400);
setTimeout(function() {
$one.addClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('The first value sets the <span class="bold">horizontal offset</span>.');
}, 200);
$text.fadeTo(200, '1');
}, 3000);
setTimeout(function() {
var x = parseInt($one.text());
function callOnTimeOut(){
setTimeout(function() {
if (x < 5) {
x++;
$one.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '5px 0 0 0 #333'
}, 1000)
}, 5000);
setTimeout(function() {
var x = parseInt($one.text());
function callOnTimeOut(){
setTimeout(function() {
if (x > -5) {
x--;
$one.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '-5px 0 0 0 #333'
}, 2000);
}, 7000);
setTimeout(function() {
$one.removeClass('selected');
$two.addClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('The second value sets the <span class="bold">vertical offset</span>.');
}, 200);
$text.fadeTo(200, '1');
}, 11000);
setTimeout(function() {
var x = parseInt($two.text());
function callOnTimeOut(){
setTimeout(function() {
if (x < 5) {
x++;
$two.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '-5px 5px 0 0 #333'
}, 1000)
}, 13000);
setTimeout(function() {
var x = parseInt($two.text());
function callOnTimeOut(){
setTimeout(function() {
if (x > -5) {
x--;
$two.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '-5px -5px 0 0 #333'
}, 2000);
}, 15000);
setTimeout(function() {
$two.removeClass('selected');
$three.addClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('The third value sets the <span class="bold">blur radius</span>. The higher the number, the <span class="bold">blurrier</span> it gets.');
}, 200);
$text.fadeTo(200, '1');
}, 19000);
setTimeout(function() {
var x = parseInt($three.text());
function callOnTimeOut(){
setTimeout(function() {
if (x < 10) {
x++;
$three.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '-5px -5px 10px 0 #333'
}, 2000);
}, 22000);
setTimeout(function() {
$three.removeClass('selected');
$four.addClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('The fourth value sets the <span class="bold">spread radius</span>. The higher the number, the <span class="bold">larger</span> the shadow. Negative values are useful for 1-sided shadows.');
}, 200);
$text.fadeTo(200, '1');
}, 27000);
setTimeout(function() {
var x = parseInt($four.text());
function callOnTimeOut(){
setTimeout(function() {
if (x < 5) {
x++;
$four.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '-5px -5px 10px 5px #333'
}, 1000)
}, 31000);
setTimeout(function() {
var x = parseInt($four.text());
function callOnTimeOut(){
setTimeout(function() {
if (x > -5) {
x--;
$four.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '-5px -5px 10px -5px #333'
}, 2000)
}, 33000);
setTimeout(function() {
var x = parseInt($four.text());
function callOnTimeOut(){
setTimeout(function() {
if (x < 0) {
x++;
$four.html(x + 'px');
callOnTimeOut();
}
}, 200);
}
callOnTimeOut();
$box.animate({
boxShadow: '-5px -5px 10px 0px #333'
}, 1000)
}, 36000);
setTimeout(function() {
$four.removeClass('selected');
$color.addClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('The last value sets the <span class="bold">shadow color</span>.');
}, 200);
$text.fadeTo(200, '1');
}, 39000);
setTimeout(function() {
var x = 0;
handle = setInterval(function() {
$color.html(colors[x]);
$box.animate({
boxShadow: '-5px -5px 10px 0px ' + colors[x]
}, 200);
x++;
if (x === colors.length) {
clearInterval(handle);
handle = null;
}
}, 1500);
}, 41000);
setTimeout(function() {
$color.removeClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('You can add multiple shadows at once (just add a comma).');
}, 200);
$text.fadeTo(200, '1');
}, 52000);
setTimeout(function() {
$comma.fadeIn(200);
$shadow2.fadeIn(200);
$shadow2.find('span').addClass('selected');
$comma.addClass('selected');
$box.css({
boxShadow: '-5px -5px 10px 0px #333, 10px 10px 5px 0px #33CCFF'
})
}, 56000);
setTimeout(function() {
$shadow2.find('span').removeClass('selected');
$comma.removeClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('You can also make inner shadows using <span class="bold">inset</span>.');
}, 200);
$text.fadeTo(200, '1');
}, 61000);
setTimeout(function() {
$inset.fadeIn(200);
$box.css({
boxShadow: 'inset -5px -5px 10px 0px #333, 10px 10px 5px 0px #33CCFF'
})
}, 65000);
setTimeout(function() {
$inset.removeClass('selected');
$text.fadeTo(200, '0');
setTimeout(function() {
$text.html('Thanks for watching!');
}, 200);
$text.fadeTo(200, '1');
}, 68000);
})
