This time I will share jQuery Plugin and tutorial about Animated Interactive Shadow Effect With JavaScript, hope it will help you in programming stack.
Real Shadow is a jQuery & Vanilla JavaScript plugin for creating interactive, photorealistic, eye-catching shadows on any DOM elements.
Features:
- Supports both box-shadow and text-shadow.
- Responds to mouse move or not.
- Supports any shadow shape.
How to use it:
1. Install and download.
5 |
$ npm install real-shadow --save |
2. Load the minified version of the Real Shadow library in the document.
2 |
< script src = "realshadow-min.js" ></ script > |
4 |
< script src = "jquery.min.js" ></ script > |
5 |
< script src = "realshadow-min.js" ></ script > |
3. Apply a default shadow effect to your element.
7 |
$(selector).realshadow(, { |
4. Config the shadow effect with the following settings.
01 |
realshadow(elements, { |
5. You can specify the shadow color using the data-shadow-color attribute.
1 |
< span data-shadow-color = "255,0,0" >Red</ span > |
6. Reset all shadows.
5 |
$.fn.realshadow.reset(); |
Changelog:
2020-03-25
This awesome jQuery plugin is developed by Indamix. For more Advanced Usages, please check the demo page or visit the official website.