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.


Basically just include the file.

<script src="//"></script>
<script src="/libs/jquery-proximity-glow/jquery.proximity-glow.min.js"></script>

<button id='eye' >Click me!</button>

    $('#eye').proximityGlow({color: 'blue'});


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)


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


Apache License 2.0