moving-shadow
v1.1.3
Published
A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile)
Downloads
43
Maintainers
Readme
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
thenimport movingShadow from 'moving-shadow';
or<script src="https://unpkg.com/moving-shadow"></script>
thenmovingShadow();
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);