shiny

Shiny, Simulating Reflections for Mobile Websites

Add shiny reflections to text, backgrounds, and borders on devices that support the DeviceMotion event. ⚠️ It looks like iOS 12.2 will disable use of device sensors on Safari, so development of Shiny.js is on hold for now

Demo

Use a mobile device, preferably iPhone in portrait mode at the moment

Todo

• Fix landscape orientation rendering
• Test on Android (waiting for test device to arrive)
• Add option to pass custom handler

Installation

Install from npm:

npm install @rikschennink/shiny --save

Or download dist/shiny.umd.js and include the script on your page like shown below.

API

There's currently only one API call to make and it's shiny(). You can either pass a selector or an element (or array of elements), the second argument can be a configuration object telling Shiny how to render the special effects.

If the second argument is not supplied Shiny will render a radial background gradient with a white center and a transparent outer ring.

// No config supplied, select element by class
shiny('.my-shiny-element');

// Select multiple elements
shiny('.my-shiny-element, #my-other-shiny-element');

// Configuration object, see below for details
shiny('.my-shiny-element', { /* config here */ });

// Pass element object
const myElement = document.querySelector('my-shiny-element');
shiny(myElement, { /* config here */ });

// Pass array of elements
shiny([myElement, myOtherElement], { /* config here */ });

Usage

…