https://github.com/rikschennink/shiny

🌟 Shiny reflections for mobile websites
https://github.com/rikschennink/shiny

css devicemotion javascript light mobile motion

Last synced: 2 months ago
JSON representation

🌟 Shiny reflections for mobile websites

• Host: GitHub
• URL: https://github.com/rikschennink/shiny
• Owner: rikschennink
• License: mit
• Created: 2019-01-14T10:01:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-02T20:45:19.000Z (over 1 year ago)
• Last Synced: 2024-03-23T21:03:41.169Z (3 months ago)
• Topics: css, devicemotion, javascript, light, mobile, motion
• Language: JavaScript
• Homepage: https://pqina.nl/shiny/
• Size: 4.17 MB
• Stars: 2,801
• Watchers: 26
• Forks: 74
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-systools - shiny
• awesome-mobile-web-development - Shiny - Shiny reflections for mobile websites. (Other Useful Tools and Libraries)
• awesome-stars - shiny
• awesome-bookmarks - **shiny**
• awesome-quirks - shiny
• awesome-stars - shiny
• awesome-stars - shiny
• -awesome-mobile-web-development - Shiny - Shiny reflections for mobile websites (Other Useful Tools and Libraries)
• awesome-stars - rikschennink/shiny - 🌟 Shiny reflections for mobile websites (JavaScript)
• awesome-stars - rikschennink/shiny - `★2801` 🌟 Shiny reflections for mobile websites (JavaScript)

README

        
# Shiny, Simulating Reflections for Mobile Websites

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

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/rikschennink/shiny/blob/gh-pages/LICENSE)

[![Still in beta](https://badge.fury.io/js/%40rikschennink%2Fshiny.svg)](https://badge.fury.io/js/%40rikschennink%2Fshiny)

[![Less than 1kB](https://badgen.net/bundlephobia/minzip/shiny)](https://bundlephobia.com/result?p=shiny)

**⚠️ It looks like iOS 12.2 will [disable use of device sensors](https://twitter.com/rikschennink/status/1090912464403861504) on Safari, so development of Shiny.js is on hold for now**



[Demo](https://pqina.nl/shiny/) 

*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.

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

Hello World


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

    }

});

```