Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A jQuery plugin to create long shadows on elements

See the DEMO :


Installation :

You only need a recent version of jQuery and the plugiin file.

<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="js/loongshadow.0.0.2.js"></script>

To create the shadows, add a class to the target elements like

<div class="shadowed">

And call the plugin in the jQuery(document).ready function like this :

	// create the shadows !
	  lenght : 200,
	  fadeIn : true,
	  fadeTime : 2000

	// the scrollbars sometime appear and mess it up. Just call the refresh method.


Options :

Option Description Default
rotation (int) The angle of the shadow. 0 is to the right. (between 0 and 360) 45
lenght (int) The lenght of the shadow 200
baseOpacity (float) The shadow opacity at the start (between 0.0 and 1.0) 0.3
darken (int) How much should the plugin darken the start color ? (between 0 and 100) 50
fadeIn (boolean) Should the shadow fade in when displayed the first time ? (true or false) false
fadeTime (int) Duration of the fadeIn en millisecons when fadeIn is set to true. 300



Function Use
refresh used to re-calculate the shadows
It is usefull for regenerating the shadows when the window is resized.
option Get or set an option value
Getter : $(...).loongshadow('option', 'optionName');
Setter : $(...).loongshadow('option', 'optionName', 'value');

The refresh method is automaticaly called when an option is set.
destroy Destroys all the shadows and remove them from the DOM


Tip :

It can be usefull to set the overflow-x property of the body in your CSS to prevent the shadows to make a horizontal scrollbar appear.

body {overflow-x:hidden;}


A jQuery plugin to create long shadows on elements




No releases published
You can’t perform that action at this time.