shine.js v0.0.3
shine.js
A library for pretty shadows, based on bigspaceship/shine.js
Usage
ES6
import Shinejs from 'shine.js';UMD
// download files
use shine.js/dist/shinejs.jsBrowser
// download files
<script src="shine.js/dist/shinejs.js"></script>const shine = new Shinejs.Shine(document.querySelector('#shine'));Change the light position and make sure to redraw:
shine.light.position.x = window.innerWidth * 0.5;
shine.light.position.y = window.innerHeight * 0.5;
shine.draw(); // make sure to re-drawConfiguration
Each shine instance has a property pointing to an instance of Shinejs.Config. One config can be shared amongst multiple shine instances.
When a config value changes, shine.draw() needs to be called to re-draw with the new settings.
Change the shadow of a shine instance:
shine.config.opacity = 0.1;
shine.config.blur = 0.2;
shine.draw(); // make sure to re-drawCreate a shared Shinejs.Config instance:
// all parameters are optional and can be changed later
var config = new Shinejs.Config({
numSteps: 4,
opacity: 0.2,
shadowRGB: new Shinejs.Color(255, 0, 0)
});
// pass the config in the constructor
var shineA = new Shine(document.getElementById('my-shine-object-a'), config);
var shineB = new Shine(document.getElementById('my-shine-object-b'), config);
// or assign it to an instance later
var shineC = new Shine(document.getElementById('my-shine-object-c'));
shineC.config = config;
shineC.draw(); // make sure to re-drawShine API
Note: Shine is also mapped to Shinejs.Shine. Use the long version if Shine is already defined.
Shine(domElement, optConfig, optClassPrefix, optShadowProperty)
The Shine constructor. Instantiate as new Shine(...) to create a new instance.
| Parameter | Type | Description |
|---|---|---|
| domElement | !HTMLElement | The DOM element to apply the shine effect to. |
| optConfig | ?Shinejs.Config= | Optional config instance. If no instance is passed it a new instance with default values will be stored in the config property. |
| optClassPrefix | ?string= | Optional class prefix that will be applied to all shine DOM elements. Defaults to shine-. |
| optShadowProperty | ?string= | Optional property name that the shadow will be applied to. Overrides the automatic detection for use of either textShadow or boxShadow. The value will be applied as element.style[shadowProperty] = '...' and automatically prefixed for legacy browsers (e.g. MozBoxShadow). |
Shine.prototype.draw()
Draws all shadows based on the current light position. Call this method whenever a shine parameter is changed.
Shine.prototype.destroy()
Releases all resources and removes event listeners. Destroyed instance can't be reused and must be discarded.
Shine.prototype.updateContent(optText)
Re-initializes all shadows. Use this when you want to change the text or the domElement's contents have changed.
| Parameter | Type | Description |
|---|---|---|
| optText | ?string= | If defined, will replace the DOM element's textContent. If omitted, the content will be read from the DOM element. |
Shine.prototype.enableAutoUpdates()
Adds DOM event listeners to automatically update all properties.
Shine.prototype.disableAutoUpdates()
Removes DOM event listeners to automatically update all properties.
Shine Properties
| Property | Type | Description |
|---|---|---|
| domElement | HTMLElement | The DOM element to apply the shine effect to. |
| config | Shinejs.Config | Stores all config parameters. |
| light | Shinejs.Light | Stores the light position and intensity. |
Shinejs.Config API
Shinejs.Config(optSettings)
The shine config constructor. Pass an optional settings object from which to read values.
| Parameter | Type | Description |
|---|---|---|
| optSettings | ?Object= | An optional object containing config parameters. |
Shinejs.Config Properties
| Property | Type | Default | Description |
|---|---|---|---|
| numSteps | number | 8 | The number of steps drawn in each shadow |
| opacity | number | 0.1 | The opacity of each shadow (range: 0...1) |
| opacityPow | number | 1.2 | The exponent applied to each step's opacity (1.0 = linear opacity). |
| offset | number | 0.15 | Larger offsets create longer shadows |
| offsetPow | number | 1.8 | The exponent applied to each step's offset (1.0 = linear offset). |
| blur | number | 40 | The strength of the shadow blur. |
| blurPow | number | 1.4 | The exponent applied to each step's blur (1.0 = linear blur). |
| shadowRGB | Shinejs.Color | new Shinejs.Color(0, 0, 0) | The shadow color in r, g, b (0...255) |
Shinejs.Light API
Shinejs.Light(optPosition)
The light constructor. Pass an optional position to apply by default.
| Parameter | Type | Description |
|---|---|---|
| optPosition | ?Shinejs.Point= | An position. Defaults to new Shinejs.Point(0, 0). |
Shinejs.Light Properties
| Property | Type | Default | Description |
|---|---|---|---|
| position | Shinejs.Point | new Shinejs.Point(0, 0) | The position of this light. |
| intensity | number | 1.0 | The intensity of this light. Gets multiplied with shadow opacity. |
Shinejs.Point API
Shinejs.Point(x, y)
A 2D point class.
| Parameter | Type | Description |
|---|---|---|
| x | number= | The x-coordinate. Defaults to 0. |
| y | number= | The y-coordinate. Defaults to 0. |
Shinejs.Point Properties
| Property | Type | Default | Description |
|---|---|---|---|
| x | number | 0 | The x-coordinate. |
| y | number | 0 | The y-coordinate. |
Shinejs.Point.prototype.delta(p)
Returns a new instance of Shinejs.Point with the x- and y-distance between this instance and the point p.
| Parameter | Type | Description |
|---|---|---|
| p | Shinejs.Point | The point to which to calculate the distance to. Distance will be expressed as this.x - p.x and this.y - p.y. |