Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

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

About

A jQuery plugin to create long shadows on elements

Resources

License

Releases

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