Shiny, Simulating Reflections for Mobile Websites

Add shiny reflections to text, backgrounds, and borders on devices that support the DeviceMotion event.

Please note this library is still in development


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 transparant outer ring.

`js
// 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

`html





``