🌟 Shiny reflections for mobile websites
Branch: master
Clone or download
Latest commit c9eaa23 Jan 31, 2019

README.md

Shiny, Simulating Reflections for Mobile Websites

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

License: MIT Still in beta Less than 1kB Support this project on Patreon

⚠️ 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

<!-- The element you want to make shiny -->
<div class="my-shiny-element">Hello World</div>

<!-- Include the library -->
<script src="shiny.umd.js"></script>

<!-- Initialize the SHINYNESS -->
<script>
shiny('.my-shiny-element', {
    // type of shiny to render, 
    // 'background', 'border', or 'text'
    type: 'background',
    gradient: {

        // type of gradient
        // 'linear' or 'radial'
        type: 'radial',

        // angle of gradient when type is linear
        angle: '110deg',

        // flip axis movement
        flip: {
            x: true,
            y: false
        },

        // colors to use
        colors: [
            // offset, color, opacity
            // ! don't pass rgba or hsla colors, supply the opacity seperately
            [0, '#fff', 1], // white at 0%
            [1, '#fff', 0], // to fully transparent white at 100%
        ]

    },

    // optional pattern fill
    pattern: {
        type: 'noise', // only 'noise' for now
        opacity: .5
    }
});
</script>