Animated Shadow Effect with jQuery - Free Download Animated Interactive Shadow Effect With JavaScript

Free Download Animated Interactive Shadow Effect With JavaScript

By Posted on

This time I will share jQuery Plugin and tutorial about Animated Interactive Shadow Effect With JavaScript, hope it will help you in programming stack.

Animated Shadow Effect with jQuery - Free Download Animated Interactive Shadow Effect With JavaScript
File Size: 34.2 KB
Views Total: 2338
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 # Yarn
2 $ yarn add real-shadow
3  
4 # NPM
5 $ npm install real-shadow --save

2. Load the minified version of the Real Shadow library in the document.

view source
1 <!-- As A Vanilla JS Plugin -->
2 <script src="realshadow-min.js"></script>
3 <!-- As A jQuery Plugin -->
4 <script src="jquery.min.js"></script>
5 <script src="realshadow-min.js"></script>

3. Apply a default shadow effect to your element.

view source
1 // As A Vanilla JS Plugin
2 realshadow(elements, {
3   // options here
4 });
5  
6 // As A jQuery Plugin
7 $(selector).realshadow(, {
8   // options here
9 });

4. Config the shadow effect with the following settings.

view source
01 realshadow(elements, {
02   style: 'flat',
03   type: 'drop', // or 'text'
04   inset: false,
05   inverse: false,
06   angle: Math.PI / 4,
07   length: 7,
08   followMouse: true,
09   pageX: x, // x coordinate of the light source
10   pageY: y, // y coordinate of the light source
11   color: '0,127,255'
12 });

5. You can specify the shadow color using the data-shadow-color attribute.

view source
1 <span data-shadow-color="255,0,0">Red</span>

6. Reset all shadows.

view source
1 // As A Vanilla JS Plugin
2 realshadow.reset();
3  
4 // As A jQuery Plugin
5 $.fn.realshadow.reset();

Changelog:

2020-03-25

  • Refactor
  • Doc updated

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

Related posts: