The Basics
This jQuery plugin provides a basic +1/-1 animation to a number styled similar to how scores were updated in old video games.
Installation
Basically just include the file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-proximity-glow/jquery.proximity-glow.min.js"></script>
<button id='eye' >Click me!</button>
<script>
$('#eye').proximityGlow({color: 'blue'});
</script>
Usage
| Name | Type | Default | Description |
|---|---|---|---|
| color | css string | #fff |
Color for the glow. |
| inverse | boolean | true |
If true, it grows larger as you get closer, false is the opposite. |
| shadowType | string | 'box-shadow' |
Whether to use 'box-shadow' or 'text-shadow'. |
| maxBlurSize | integer | 180 |
Pixels for maximum glow size (spread := size/2) |
Demos
I will put a few demos here.
Controlling the glow color
You can control the color. You only get one :P
$('#glowButton_1').proximityGlow({color: 'blue'});
Controlling whether it grows inversely to distance
...
$('#glowButton_2').proximityGlow({color: 'red', inverse: false});
Using on text
It doesn't look as great, but text-shadow is an option.
$('#glowButton_3').proximityGlow({color: 'purple', shadowType: 'text-shadow', inverse: false});
span text