jQuery Plugin For Animated Text Shadows with Mouse Interaction - shadowtext

File Size: 7.07 KB
Views Total: 1614
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Animated Text Shadows with Mouse Interaction - shadowtext

shadowtext is a jQuery plugin for adding animated, interactive shadow effects to your text that move in response to the mouse position.

See also:

Basic usage:

1. Load the necessary jQuery and jQuery UI libraries in the document.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Download and include the jQuer shadowtext plugin after jQuery library.

<script src="jquery.shadowtext.js"></script>

3. Call the plugin to your text's parent container to apply a default text shadow effect.

$('.container').shadowtext();

4. You can pass an object with the following options.

// Restrict the axis of movement. 
// Either 'x' or 'y' are allowed. 
// Leave empty if you don't want to restrict the axis.
axis:     '', 

// The amount of blur when closest to the text.
blurClose:    0,

// The amount of blur when farthest to the text. 
blurFar:    10,

// Set the color of the shadow.
// Allowed types are 3 and 6 digit hex codes, rgb(), rgba() and color names. 
// Alpha values are ignored.
color:      "#000000",

// Maximum distance of the shadow from the text.
distance:     10,

// If specified, an easing method will be used to determine the distance of the shadow (also influences blur and opacity) based on the mouse distance. 
easing:     '',

// Framerate measured in frames-per-second. 
// Don't change unless you want a specific effect. 
// By default this is set at the same framerate as jQuery effects. 
framerate:    25,

// Enable this option to hide the text and only show the shadow. 
hideText:   false,

// When the mousepointer is at or beyond the specified mouseRange from the text, the shadow will be at it's farthest.
mouseRange:   500,

// The amount of opacity when closest to the text. 
// Range 0 to 1. 
opacityClose: 1,

// The amount of opacity when closest to the text. 
// Range 0 to 1. 
opacityFar:   1

This awesome jQuery plugin is developed by vanderlee. For more Advanced Usages, please check the demo page or visit the official website.