Another project for a contract that I thought I would post, An animated pitch bar. Originally created for theamm.org it was used for give short bits of information on their service, but it can be used for anything. Instead of breaking it down and going through it section by section, I’m going to try this a different way, first I’ll post the code as it is used, then I’ll explain the reasoning behind it. Heres the scripting you’ll need.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
$(document).ready(function(){ pitcher(1,1); }); function pitcher(num,pdl){ var pitches=3; var shortdelay=500; var longdelay=5000; // edit these var n1=0; var n2=0; var n3=0; var out=''; var outdel=0; var indel=0; while(n1 li:nth-child("+num+")").html().length){ out=out+'<span style="opacity: 0;">'+$("#pitches > li:nth-child("+num+")").html().substr(n1,1)+'</span>'; n1++; } $('div.activepitch'+pdl+' > span').each(function(){ outdel+=15; $(this).delay(outdel).animate({ opacity: .0 },500,function(){ n2++; if(n2==$('div.activepitch'+pdl+' > span').size()){ $('div.activepitch'+pdl).html(out); $('div.activepitch'+pdl+' > span').each(function(){ indel+=15; $(this).delay(indel).animate({ opacity:1 },500,function(){ n3++; if(n3==$('div.activepitch'+pdl+' > span').size()){ if(pdl==pitches){ pdl=1; }else{ pdl++; } if(num==$('#pitches > li').size()){ num=1; }else{ num++; } if(pdl==1){ setTimeout(function(){pitcher(num,pdl)},longdelay); }else{ setTimeout(function(){pitcher(num,pdl)},shortdelay); } } }); }) } }); }); } |
Snipplr: http://snipplr.com/view/54562/animated-pitchbars/
First we use jquery to load this once the document is complete (since the script needs the appropriate HTML to be ready to work properly). The function starts with variables, the first line of them are ones for easy modification, pitches
in the number of pitches it will show at once, and the shortdelay
/longdelay
is the delay between animating individual and pitches and the delay between animating the last displayed pitch and starting from the top again respectively.
After that there is a while
statement, this takes the appropriate pitch and wraps each element around a span for animation purposes. Then it gets into the main scripting and animation section.
The each
function runs through each of the spans and starts the animation on it. First is fades the current value out, it inserts the new pitch, pre-set at 0 opacity, and fades it in span-by-span. Once the loops is complete (using the n3
variable to count and compare) it runs a couple checks, first if it’s on the last pitch being displayed or not, if it is the last one it reset the pitch display counter to 1, if not it adds one to it. Then it check to see if it’s on the last pitch in the list of all pitches, again, if it is it resets it to one, if not it adds one. Finally it checks to see what it’s going to be doing next. If it’s going to start from the first displayed pitch again it waits for the long-delay value and starts the script again, preserving the pitch number and the pitch display location, other wise it waits the shot delay time and again send the appropriate information out.
With this setup the script will run forever, looping when needed. It does not require a even number of pitches or a specific pitch/display ratio and the script doesn’t need to be changes if you add or subtract new pitches to you list. It does require some HTML formatting though, which should look like this.
- Pitch 1
- Pitch 2
- Pitch 3
- Pitch 4
- Pitch 5
Snipplr: http://snipplr.com/view/54562/animated-pitchbars/
The first section is the list of pitches, stored in an un-ordered list with the id “pitches”. Each pitch simply goes in a list item. Theres nothing more to creating the list of all your pitches. The display goes inside the divs. The class pitchbar
is my own simply for formatting (it’s not required if you don’t want it there) the other one, activepitch#
is the area where the the current pitches will be displayed. The “#” is for each pitch that you display at a time from 1 to your max, for example the code above was a pitches
of three, so I have 3 divs; activepitch1
, activepitch2
, activepitch3
. The example at the link blow has 5 divs and a pitches
value of 5 as well. This was set up this was as opposed to simply showing the individual list items because at the time of creation nobody working on the design was sure where they might go or what level of customization of those pitches we might want.
I’ve made an example using of this in action using the HTTP status code, you can see it on the Animated Pitches Example page. If you have any questions or use this in your own project let me know in the comments. I’ll try and help people out with implementation and modifications as I’m sure I’ll always find a new use for the code myself.