var path = window['baseUrl']+'/templates/tourette_2008/animatie/';
/*
*
*This is the file used to animate the header for the Gilles de la tourette website
*All animations are done using jQuery's jQuery.fn.animate()
*The whole script is wrapped in a function call for closure.
*
* copyright 2009 - LEFdesign - lefsite.nl
*/
(function($) {
/*
* We need an image onload attach handler which will not only work on dynamicly loaded images but also on
* static included HTML images
*So here it is
*/
$.fn.imageLoad = function(fn){
this.load(fn);
this.each( function() {
if ( $(this).get(0).complete && $(this).get(0).naturalWidth !== 0 ) {
$(this).trigger('load');
}
});
}
/*
* we need a method to build transparent PNG images
* that work both in decent browser and IE<7
*This should be fed an jQuery object containing an ![]()
element at the first index (0)
*So here it is:
*/
$.transparentPng = function(imgElem){
//We need to use an IE fix for transparent PNG
if($.browser.msie && parseInt($.browser.version, 10) < 7){
var url = imgElem.attr('src');
return $($('')
.get(0).cssText = 'display: inline-block;' +
'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="'+url+'");');
}
else{
return imgElem
}
}
/*
*First we need to initialize all the frames.
*The first frame (frame 0) does not have to be initialized because it is the default HTML
*of the animation. The initializing consists of preloading the images and
*storing all the animate css propertys.
*NOTE: unless specified otherwise all frame objects will be position:absolute by default
*/
//We preload the images
var images = {};
images.toLoad = {
length: 3,
'background': path+'background.png',
'dropped': path+'dropped_trans.png',
'brein': path+'brein_trans.png'
};
images.loaded = {length: 0};
for(x in images.toLoad){
$('![]()
')
.attr('src', images.toLoad[x])
.data('name', x)
.imageLoad( function() {
images.loaded[$(this).data('name')] = $(this);
images.loaded.length += 1;
});
}
images.ready = function() {
if(images.toLoad.length <= images.loaded.length){
return true;
}
return false;
}
//We start initializing the frames
var frames = {};
//This frame will insert the Tourette??
frames.frame0 = {
create: {
'#animatie_background': function() {
//HACK!
$('#animatie_background').attr('src', images.loaded['background'].attr('src') );
return $('').attr('id', 'animatie_dummy'); // more hack
}
},
before: {},
after: {},
cleanup: {
'#animatie_dummy': true
},
pause: 0
};
frames.frame1 = {
create:{
'#animatie_frame1_tourette': function() {
return $('')
.attr('id', 'animatie_frame1_tourette')
.html('Tourette? ')
}
},
before: {
'#animatie_frame1_tourette': {
left: '10px',
top: '95px',
fontSize: '0px',
color: '#fff',
textDecoration: 'underline'
}
},
after: {
'#animatie_frame1_tourette': {
duration: 800,
cssProps: {
fontSize: '30px'
}
}
},
cleanUp: {
'#animatie_frame1_tourette': true
},
pause: 1500
}
//The second frame
//This frame will animate the background image to the forhead position
frames.frame2 = {
create: {},
before:{
'#animatie_background': {
display: 'block'
}
},
after: {
'#animatie_background': {
duration: 'slow',
cssProps: {
left: '-1300px',
width: '2490px',
height: '760px'
}
}
},
cleanUp: {},
pause: 500
}
//This frame will insert the brein
frames.frame3 = {
create: {
'#animatie_frame3_brein': function(){
return $.transparentPng(images.loaded['brein']).attr('id', 'animatie_frame3_brein');
}
},
before: {
'#animatie_frame3_brein': {
opacity: 0,
top: '0px'
}
},
after: {
'#animatie_frame3_brein': {
duration: 1050,
cssProps: {
opacity: 0.6,
top: '0px',
left: '140px',
width: '550px',
height: '296px'
}
}
},
cleanUp: {},
pause: 200
}
//This frame will insert the 'Wat is het?'
frames.frame4 = {
create: {
'#animatie_frame4_watIshet': function(){
return $('')
.attr('id', 'animatie_frame4_watIshet')
.html('Wat is het? ');
}
},
before: {
'#animatie_frame4_watIshet': {
left: '10px',
top: '95px',
fontSize: '0px',
color: '#fff',
textDecoration: 'underline'
}
},
after: {
'#animatie_frame4_watIshet': {
duration: 800,
cssProps: {
fontSize: '30px'
}
}
},
cleanUp: {
'#animatie_frame4_watIshet': true,
'#animatie_frame3_brein': true
},
pause: 800
}
//this frame will get away from the head, and show more of the 'Wat is het?', it will also show the first 'wat is het'item
frames.frame5 = {
create: {
'#animatie_frame5_watIshet': function(){
return $('')
.attr('id', 'animatie_frame5_watIshet')
.html('Wat is het? ' +
' '+
' '+
' ');
},
'#animatie_frame5_psychischeStoornis': function() {
return $('')
.attr('id', 'animatie_frame5_psychischeStoornis')
.html('Neuro-psychiatrische aandoening');
}
},
before: {
'#animatie_background': {
left: '0px'
},
'#animatie_frame5_watIshet': {
left: '10px',
top: '95px',
fontSize: '30px',
color: '#fff',
textDecoration: 'underline'
},
'#animatie_frame5_psychischeStoornis': {
fontSize: '20px',
left: '230px',
top: '25px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame5_psychischeStoornis': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {},
pause: 100
}
//this frame will show the: Chronische ziekte
frames.frame6 = {
create: {
'#animatie_frame6_neuroTransmitters': function() {
return $('')
.attr('id', 'animatie_frame6_neuroTransmitters')
.html('Chronische ziekte');
}
},
before: {
'#animatie_frame6_neuroTransmitters': {
fontSize: '20px',
left: '230px',
top: '50px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame6_neuroTransmitters': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {},
pause: 100
}
//this frame will show the neurotransimtter
frames.frame7 = {
create: {
'#animatie_frame7_erfelijk': function() {
return $('')
.attr('id', 'animatie_frame7_erfelijk')
.html('neurotransmitters');
}
},
before: {
'#animatie_frame7_erfelijk': {
fontSize: '20px',
left: '230px',
top: '75px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame7_erfelijk': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {},
pause: 100
}
//This will insert the erfelijk
frames.frame8 = {
create: {
'#animatie_frame8_erfelijk': function() {
return $('')
.attr('id', 'animatie_frame8_erfelijk')
.html('erfelijk');
}
},
before: {
'#animatie_frame8_erfelijk': {
fontSize: '20px',
left: '230px',
top: '100px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame8_erfelijk': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {
'#animatie_frame8_erfelijk':true,
'#animatie_frame7_erfelijk': true,
'#animatie_frame6_neuroTransmitters': true,
'#animatie_frame5_psychischeStoornis': true,
'#animatie_frame5_watIshet': true
},
pause: 1000
}
//This frame will move to the eye position of the background ans show the symptonen message
frames.frame9 = {
create: {
'#animatie_frame8_symptonen': function(){
return $('')
.attr('id', 'animatie_frame8_symptonen')
.html('Symptomen ' +
' ');
}
},
before: {
'#animatie_background': {
left: '-395px',
top: '-200px',
width: '1500px',
height: '458px'
},
'#animatie_frame8_symptonen': {
left: '10px',
top: '95px',
fontSize: '0px',
color: '#fff',
textDecoration: 'underline'
}
},
after: {
'#animatie_frame8_symptonen': {
duration: 800,
cssProps: {
fontSize: '30px'
}
}
},
cleanUp: {'#animatie_frame8_symptonen': true},
pause: 800
}
//This frame will reposition the backgroudn to the blueish part and will insert bewegingstics
frames.frame10 = {
create: {
'#animatie_frame9_symptonen': function(){
return $('')
.attr('id', 'animatie_frame9_symptonen')
.html('Symptomen ' +
' '+
' '+
' ');
},
'#animatie_frame9_bewegingstics': function() {
return $('')
.attr('id', 'animatie_frame9_bewegingstics')
.html('bewegingstics');
}
},
before: {
'#animatie_background': {
left: '0px',
width: '2490px',
height: '760px'
},
'#animatie_frame9_symptonen': {
left: '10px',
top: '95px',
fontSize: '30px',
color: '#fff',
textDecoration: 'underline'
},
'#animatie_frame9_bewegingstics': {
fontSize: '17px',
left: '230px',
top: '22px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame9_bewegingstics': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {},
pause: 100
}
frames.frame11 = {
create: {
'#animatie_frame10_geluidstics': function() {
return $('')
.attr('id', 'animatie_frame10_geluidstics')
.html('geluidstics');
}
},
before: {
'#animatie_frame10_geluidstics': {
fontSize: '17px',
left: '230px',
top: '42px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame10_geluidstics': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {},
pause: 100
}
frames.frame12 = {
create: {
'#animatie_frame12_drang': function() {
return $('')
.attr('id', 'animatie_frame12_drang')
.html('dwang/drang');
}
},
before: {
'#animatie_frame12_drang': {
fontSize: '17px',
left: '230px',
top: '62px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame12_drang': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {},
pause: 100
}
frames.frame13 = {
create: {
'#animatie_frame13_hyper': function() {
return $('')
.attr('id', 'animatie_frame13_hyper')
.html('hyper');
}
},
before: {
'#animatie_frame13_hyper': {
fontSize: '17px',
left: '230px',
top: '82px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame13_hyper': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {},
pause: 100
}
frames.frame14 = {
create: {
'#animatie_frame14_sociaal': function() {
return $('')
.attr('id', 'animatie_frame14_sociaal')
.html('sociaal onhandig');
}
},
before: {
'#animatie_frame14_sociaal': {
fontSize: '17px',
left: '230px',
top: '102px',
color: 'black',
opacity: 0
}
},
after: {
'#animatie_frame14_sociaal': {
duration: 900,
cssProps: {
opacity: 1
}
}
},
cleanUp: {
'#animatie_frame14_sociaal':true,
'#animatie_frame13_hyper':true,
'#animatie_frame12_drang':true,
'#animatie_frame9_bewegingstics': true,
'#animatie_frame10_geluidstics': true,
'#animatie_frame9_symptonen': true
},
pause: 1000
}
//We insert the word lid! message
frames.frame15 = {
create: {
'#animatie_frame11_wordLid': function(){
return $('')
.attr('id', 'animatie_frame11_wordLid')
.html('Word donateur ' +
' '+
' '+
' ');
}
},
before: {
'#animatie_frame11_wordLid': {
left: '10px',
top: '95px',
fontSize: '30px',
color: '#fff',
textDecoration: 'underline'
},
'#animatie_frame11_wordLid_link': {
color: '#fff'
}
},
after: {},
cleanUp: {},
pause: 550
}
//This frame will make the word lid! black
frames.frame16 = {
create: {},
before: {
'#animatie_frame11_wordLid': {
left: '10px',
top: '95px',
fontSize: '30px',
color: '#fff',
textDecoration: 'underline'
}
},
after: {
'#animatie_frame11_wordLid': {
duration: 800,
cssProps: {
color: '#000'
}
},
'#animatie_frame11_wordLid_link': {
duration: 800,
cssProps: {
color: '#000'
}
}
},
cleanUp: {},
pause: 700
}
//This frame moves the word-Lid message down
frames.frame17 = {
create: {
'#animatie_frame13_wordLid_container': function(){
var x = $('').attr('id', 'animatie_frame13_wordLid_container');
x.append($('#animatie_frame11_wordLid'));
return x;
}
},
before: {
'#animatie_frame13_wordLid_container':{
width: '10000px'
}
},
after: {
'#animatie_frame11_wordLid': {
duration: 800,
cssProps: {
fontSize: '60px',
top: '145px',
left: '180px'
}
}
},
cleanUp: {},
pause: 400
}
//this frame will fade in the doe Mee! message
frames.frame18 = {
create: {
'#animatie_frame14_doeMee': function() {
return $('')
.attr('id', 'animatie_frame14_doeMee')
.html('doe mee!');
}
},
before:{
'#animatie_frame14_doeMee':{
left: '490px',
top: '135px',
fontSize: '20px',
color:'black',
fontWeight: 'normal',
opacity: 0
}
},
after:{
'#animatie_frame14_doeMee':{
duration: 560,
cssProps: {
opacity: 0.85
}
}
},
cleanUp:{},
pause: 500
}
//this frame will insert the dropped image
frames.frame19 = {
create:{
'#animatie_frame15_dropped': function(){
return $.transparentPng(images.loaded['dropped']).attr('id', 'animatie_frame15_dropped');
}
},
before: {
'#animatie_frame15_dropped':{
opacity: 0.76,
bottom: '0px',
right: '-300px'
}
},
after: {
'#animatie_frame15_dropped':{
duration: 900,
cssProps: {
right:'0px'
}
}
},
cleanUp: {},
pause: 100
}
//Thsi frame will puff away the dropped image
frames.frame20 = {
create: {},
before: {},
after: {
'#animatie_frame15_dropped':{
duration: 900,
cssProps: {
opacity:0,
width:'450px',
height:'264px'
}
}
},
cleanUp: { '#animatie_frame15_dropped':true },
pause:1
}
/*
*We now declare the animation function
*We store this in a function because we only do this when all the images used in the animation
*and the background image have loaded. If we would write in that check we would have to intend
*to much.
*This function is recursive and will stop when all frames have been animated.
*/
var animation = function(frameNum) {
if(typeof(frameNum) == 'undefined') frameNum = 0;
var x = frames['frame'+frameNum];
if(typeof(x) == 'undefined') return; //Stop when the next frame does not exist
//First we create the needed elements and append them to the sandbox
for(z in x.create){
var elem = x.create[z]();
elem.addClass('animatie');
$('#animatie_sandbox').append(elem);
}
//Then we append the styles they have before the start of this frame
for(elemSelector in x.before){
//We extend an postion:absolute object with the provided object to
//create a position:absolute declaration if it isn't already there.
cssProps = $.extend( {position: 'absolute'}, x.before[elemSelector]);
$(elemSelector).css(cssProps);
}
//Animation time!
var numOfAnimations = 0; //We only cleanup after
var numOfAnimationsComplete = 0; //all animations have been complete
for(elemSelector in x.after){
numOfAnimations += 1;
$(elemSelector).animate(x.after[elemSelector].cssProps, x.after[elemSelector].duration,
0, function(){ numOfAnimationsComplete +=1; });
}
//This function will cleanup the elements and recall this function when all animations have stopped.
function end(hadPause){
if(numOfAnimations == numOfAnimationsComplete){
if(hadPause == true){
//Cleanup the elements
for(elemSelector in x.cleanUp){
$(elemSelector).remove();
}
//recursive!
animation(frameNum + 1);
}
else{
setTimeout(function() { return end(true); }, x.pause);
}
}
else{
setTimeout(end, 10); //Short period of time!
}
}
end();
}
/*
*We do the animation once:
* -The DOM is ready to be manipulated
* -The background image has loaded
* -All the images have loaded (images.ready())
*If not all the images are loaded in 1 minute the animation will never be started to not stress the
*computer of the visitor to much
*/
$(document).ready( function (){
var didAnimation = false;
var backgroundLoaded = false;
var timeFromStart = 0;
$('#animatie_background').imageLoad( function() {
backgroundLoaded = true;
});
function doAnimation(){
if(images.ready() && backgroundLoaded == true){
animation();
}
else{
if(timeFromStart < 60000){
setTimeout(doAnimation, 100);
timeFromStart +=100;
}
}
};
doAnimation();
});
})(jQuery);