moving-shadow

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
<script src="https://unpkg.com/moving-shadow"></script>
then
movingShadow();

Configuration

Options with defaults

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);