https://github.com/tompave/js_animated_bars
A simple widget to animate bars as the data set changes. Based on JavaScript for manipulation and CSS3 for animations.
https://github.com/tompave/js_animated_bars
Last synced: 10 months ago
JSON representation
A simple widget to animate bars as the data set changes. Based on JavaScript for manipulation and CSS3 for animations.
- Host: GitHub
- URL: https://github.com/tompave/js_animated_bars
- Owner: tompave
- Created: 2013-04-04T06:03:49.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2013-04-04T11:58:16.000Z (about 13 years ago)
- Last Synced: 2025-02-01T08:41:47.073Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://staticfiles.wonderingmachine.com/portfolio/js_animated_bars/js_animated_bars.html
- Size: 184 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#JavaScript Animated Bars
A simple widget to animate bars as the data set changes.
Based on JavaScript for manipulation and CSS3 for animations. Uses JQuery to make things easier.
#Demo
A live demo can be found [here](http://staticfiles.wonderingmachine.com/portfolio/js_animated_bars/js_animated_bars.html).
##How to use it
The JavaScript logic takes care of updating the static data embedded in the HTML defining the bars. The actual animation is carried out through CSS3 tranitions.
The bars are based on an HTML template that _can_ be modified, although attention must be paid to not break CSS selector references.
The CSS defining the appearance of the bars can be modified at will.
The only CSS properties manipulated by the JS functions are the length of the bars (defaults to using `width`) and the `background-color` (`hsla()`).
* Changing (or getting rid of) the color behaviour should be straightfoward, as one only needs to come up with a way to modify the color in relation to the length of a bar.
* If vertical bars are preferred, the JS variable `dimension` should be changed from `"width"` to `"height"`. Then the CSS should be updated to support verical bars (e.g. the labels within the bars could be rotated).
##More info:
[wonderingmachine](http://www.wonderingmachine.com/who)