Star Trek Transporter Beam jQuery Plugin

Version 0.9.1

by Erik Friend


A jQuery animation plugin that simulates the transporter beam effect from the original Star Trek movies. Requires jQuery

Download Plugin - Demo

To use

Unzip Place jquery.beam.js and beam.flare.png into your website document root.

Include jquery.beam.js by adding the following code to your page <head>. <script type="text/javascript" src="jquery.beam.js"></script>

Trigger the effect with the following code. $(document).ready(function() { $('#name-of-element').beamOut(); }); or $(document).ready(function() { $('#name-of-element').beamIn(); });

Beam speed can be adjusted by passing a numeric speed value in milliseconds. ex: $('#name-of-element').beamIn(500);

Version History


Added DD_belatedPNG for IE7 as well. IE7 clips alpha-gradients to black for non opaque opacity.


Added DD_belatedPNG detection. If present, uses it to auto fix IE6 transparent png bugs.
Beam no longer misaligned with payloads that have margins, padding, or borders.
Temporary fix (I hope...) for Google Chrome. To work-around Chrome alpha+opacity render nonsense, beam flares disappear instead of gradually fading out.


Initial Release

Known Issues

To Do