Flashing "casino" style lights implemented in Angular.
See it in action http://thatguynamedandy.github.com/angular-casino-lights
Installation via Bower
bower install angular-casino-lights
Load the script into the page
Load google Raleway font, to use your own font read the Font setup section.
<link href='http://fonts.googleapis.com/css?family=Raleway:900' rel='stylesheet' type='text/css'>
If using SASS include the provided scss file into your workflow, overriding any neccessary properties
$header-font-size:110px !default; @import '../bower_components/angular-casino-lights/scss/_casino-lights.scss';
If using CSS load the provided, css directly into your page. You will need to manually override any styles to control font/light size etc. The css in this module is mainly for guidance.
Add the directive to the element which you would like to give a bit of casino action.
Additional config can be altered via an attribute, check the usage examples and API docs.
<h1 casino-lights config="config">CASINO</h1>
The following config options are available
Default: true. Turns the lights on and off, meaning the lights can be controlled outside of the directive
Default: 80. This is the time in milliseconds between animation frames, a shorter speed means a quicker frame rate.
Default: random. The current filter cycle for the lights. Current options are
The biggest caveat with using this directive is that it is currently restricted to the Raleway font.
I don't think it's currently possible to programmatically determine the light positions. So if you want to use another font you will have to manually map your own light positions. This is a bit time consuming, but not the end of the world if you only need to map a couple of words.
If you need help, or have any success mapping other fonts let me know. Pull requests would also be welcomed.
- Increase test coverage
- Provide a list of available filters
- Map alternative fonts