I’m updating my online cv this week and I was thinking about putting in some of those skill measure bars… like those you find on fancy websites. I don’t understand how they are measured or what truly useful information they convey… but they look cool. I guess.
So I found an example online, tore it down and rebuilt it from the ground up. It was originally an unordered list, which I have an example of the rebuilt version. I eventually transformed it into a data list because that made better semantic sense to me.
Warning, this is my own hand-coded example file, heavily commented. There is no Freeway file to download… although the source code can certainly be extracted using your browser and reverse-engineer into Freeway. If you can benefit from it, then cool. I’m sharing this because Karma told me to.
The tricky thing for now would be figuring out which classes are required and which not (from your original script). Furthermore which of the remaining styles could be transported into the FW-file natively.
As I said elsewhere:
“Classes are the new Actions”
If I find some time, I’ll try to simplify this (I’m under the impression that the data and animation styles, respectively the keyframe animation is even enough)
Cheers
Thomas
offtopic mailing list
email@hidden
Update your subscriptions at:
Thomas, here is a quick jQuery script to do this-- it watches the viewport for the .bar class, then adds another class to the html for the animation. It only works on the first appearance of the target class then ignores all subsequent appearances, basically only allowing animating one chart.
I tried a second bar going a slightly different way:
One of my “I have it anyway included” is mynameismatthieu.com - contact with domain owner | Epik.com. This is because of the animate.css library. WOW is obviously as well watching at the animation (yeah - it is made for). Applying the class of wow to the indicator was enough. Unfortunately delay (or others) won’t work.
Another downside (if it is one):
Only one animation each page load, while your attempt re-starts the animation whenever you scroll to.
Whatsoever - very nice journey, thanks for this.
Cheers
Thomas
offtopic mailing list
email@hidden
Update your subscriptions at: