The comments for this are broken down into 2 parts, first the script is talked about, then theres a little about the HTML code that the script relies on. You can find more information at the URL, as well as an example of it in action. You can leave comments here or at the link if you have any questions or comments, or if you found a nice use for it.
First the script.
Use jquery to load this once the document is complete. 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 it runs a couple checks; is it the last pitch being displayed, is it the last pitch in the list of all pitches, and what it’s going to be doing next. In the first two cases it resets the appropriate counter, the last check determines if it will run the short delay (between pitches being displayed) or the long delay (between displaying the last pitch and starting the animation cycle again).
With this setup the script will run forever, looping when needed. It does require some HTML formatting though, is in the second section.
Second, the HTML
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 <code>pitchbar</code> is my own simply for formattingand is not required the other one, <code>activepitch#</code> 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 below has a <code>pitches</code> of three, so I have 3 divs; <code>activepitch1</code>, <code>activepitch2</code>, <code>activepitch3</code>. The example at the url has 5 divs and a <code>pitches</code> value of 5 as well.
First the script.
Use jquery to load this once the document is complete. 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 it runs a couple checks; is it the last pitch being displayed, is it the last pitch in the list of all pitches, and what it’s going to be doing next. In the first two cases it resets the appropriate counter, the last check determines if it will run the short delay (between pitches being displayed) or the long delay (between displaying the last pitch and starting the animation cycle again).
With this setup the script will run forever, looping when needed. It does require some HTML formatting though, is in the second section.
Second, the HTML
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 <code>pitchbar</code> is my own simply for formattingand is not required the other one, <code>activepitch#</code> 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 below has a <code>pitches</code> of three, so I have 3 divs; <code>activepitch1</code>, <code>activepitch2</code>, <code>activepitch3</code>. The example at the url has 5 divs and a <code>pitches</code> value of 5 as well.
URL: http://fatfolderdesign.com/255/css/animated-pitchbars
Comments
Subscribe to comments