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

shadowtext is a jQuery plugin for adding animated, interactive shadow effects to your text that move in response to the mouse position.
See also:
- jQuery Plugin For Colorful 3D Text Shadow - funText
- jQuery Plugin For Animated 3D Text Shadow Effect
- Animated Shadow Effect with jQuery
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.