A jQuery plugin to create long shadows on elements
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
loongshadow.1.0.0.js
loongshadow.1.0.0.min.js

README.md

LoongShadow

A jQuery plugin to create long shadows on elements

See the DEMO : http://loongshadow.indacloud.fr

===========

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 :

$(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');
});

============

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

============

Methods

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');

==========

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;}