pehrlich/sparkle.js.coffee

## sparkle.js.coffee
$.fn.sparkle = (arg_options) ->
  options = {
    width: 3
    gap: 3
    comets: 2
  }

  $.extend(options, arg_options) if arg_options

  span = options.width + options.gap
  line = 0
  $button = $(this)
  max_x = $button.width()
  max_y = $button.height()

  $dots = []

  # start at top right corner
  $button.add_dot = (style) ->
    dot = $("<div class='dot' style='#{style} width:#{options.width}px; height:#{options.width}px;'></div>")
    $dots.push dot
    this.append dot

  line = options.width
#  for side in [max_x]
  while line < max_x # -->
    $button.add_dot "left:#{line}px;top: 0px;"
    line += span
  line -= max_x
  line += max_x % span || options.width

  while line < max_y # down
    $button.add_dot "right:0px;top: #{line}px;"
    line += span

  line -= max_y
  line += (max_y % span || options.width)

  while line < max_x # <--
    $button.add_dot "right:#{line}px;bottom: 0px;"
    line += span

  line -= max_x
  line += (max_x % span || options.width)

  while line < max_y # up
    $button.add_dot "left:0px;bottom: #{line}px;"
    line += span

  origin_opacity = 0
  opacity_step = 1 / ($dots.length / options.comets) # max_opacity / dots per comet

  (set_dot_opacities = () ->
    # technically, there's a bug here.  b/c opacity step may not be evenly divisible by 1, the opacity range of the first
    # pixel will be offset by the remaidner-- b/c it comes off the top in the forward loop and the bottom in the reverse
    opacity = origin_opacity
    for $dot in $dots
      $dot.css({opacity: opacity})
      opacity += opacity_step
      opacity = 0 if opacity > 1

    origin_opacity -= opacity_step
    origin_opacity = 1 if origin_opacity < 0
    setTimeout(set_dot_opacities, 100))()

## test.html
<html>
<head>
    <style type="text/css">
        #button {
            position: absolute;
            top: 100px;
            left: 100px;
            background-color: #555;
            width: 60px;
            height: 20px;
            overflow: hidden;
        }

        .dot {
            position: absolute;
            background-color: yellow;
            z-index: 1;
            -webkit-transition: opacity 100ms linear;
        }
    </style>
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/jquery.extensions.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#button').sparkle();
        });
    </script>
</head>
<body>

<div id="button">

</div>

</body>
</html>
	$.fn.sparkle = (arg_options) ->
	options = {
	width: 3
	gap: 3
	comets: 2
	}

	$.extend(options, arg_options) if arg_options

	span = options.width + options.gap
	line = 0
	$button = $(this)
	max_x = $button.width()
	max_y = $button.height()

	$dots = []

	# start at top right corner
	$button.add_dot = (style) ->
	dot = $("<div class='dot' style='#{style} width:#{options.width}px; height:#{options.width}px;'></div>")
	$dots.push dot
	this.append dot

	line = options.width
	# for side in [max_x]
	while line < max_x # -->
	$button.add_dot "left:#{line}px;top: 0px;"
	line += span
	line -= max_x
	line += max_x % span \|\| options.width

	while line < max_y # down
	$button.add_dot "right:0px;top: #{line}px;"
	line += span

	line -= max_y
	line += (max_y % span \|\| options.width)

	while line < max_x # <--
	$button.add_dot "right:#{line}px;bottom: 0px;"
	line += span

	line -= max_x
	line += (max_x % span \|\| options.width)

	while line < max_y # up
	$button.add_dot "left:0px;bottom: #{line}px;"
	line += span

	origin_opacity = 0
	opacity_step = 1 / ($dots.length / options.comets) # max_opacity / dots per comet

	(set_dot_opacities = () ->
	# technically, there's a bug here. b/c opacity step may not be evenly divisible by 1, the opacity range of the first
	# pixel will be offset by the remaidner-- b/c it comes off the top in the forward loop and the bottom in the reverse
	opacity = origin_opacity
	for $dot in $dots
	$dot.css({opacity: opacity})
	opacity += opacity_step
	opacity = 0 if opacity > 1

	origin_opacity -= opacity_step
	origin_opacity = 1 if origin_opacity < 0
	setTimeout(set_dot_opacities, 100))()
	<html>
	<head>
	<style type="text/css">
	#button {
	position: absolute;
	top: 100px;
	left: 100px;
	background-color: #555;
	width: 60px;
	height: 20px;
	overflow: hidden;
	}

	.dot {
	position: absolute;
	background-color: yellow;
	z-index: 1;
	-webkit-transition: opacity 100ms linear;
	}
	</style>
	<script type="text/javascript" src="assets/jquery.js"></script>
	<script type="text/javascript" src="assets/jquery.extensions.js"></script>
	<script type="text/javascript">
	$(function () {
	$('#button').sparkle();
	});
	</script>
	</head>
	<body>

	<div id="button">

	</div>

	</body>
	</html>