moving-shadow.js


A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile).

Examples

* Flat text with moving shadow - (source)
* Fixed raised text with moving shadow - (source)
* Moving perspective text and box - (source)
* Moving perspective text with moving shadow - (source)
* Moving perspective box with moving shadow - (source)
* Drop shadow - (source)

Quick Start

npm i moving-shadow
then
import movingShadow from 'moving-shadow';
or

then
movingShadow();

Configuration

Options with defaults
``javascript
const settings = {
shadowType: "shadow", // "shadow", "perspective","perspective-shadow", "dropShadow"
selector: "h1, h2", // tag, class, or id to apply shadow to
angle: 20, // height of view source. Should be between 10 - 100
relativeAngle:false, // false. desktop only, allows for each element to move relative to the mouse
diffusion: 0, // blur-radius
color: "#333333CC", // shadow-color or perspective color
altColor: "#333333CC", // shadow-color (perspective-shadow only)
shineColor: "#fff3", // reflected light (perspective-shadow only)
fixedShadow: null, // "5px 5px #555" to include an optional fixed shadow
xOffset: 0, // X offset value, set to max fixedShadow x offset
yOffset: 0 // Y offset value, set to max fixedShadow y offset
}

movingShadow(settings);
``