A jQuery plugin to create long shadows on elements
See the DEMO : http://loongshadow.indacloud.fr
===========
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 :
$(document).ready(function(){ // create the shadows ! $('.shadowed').loongshadow({ lenght : 200, fadeIn : true, fadeTime : 2000 }); // the scrollbars sometime appear and mess it up. Just call the refresh method. $('.shadowed').loongshadow('refresh'); });
============
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 $(...).loongshadow('refresh'); 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 $(...).loongshadow('destroy'); |
==========
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;}