Many articles on the same topic has already been written , but most of them are very short and didn’t provide enough information of the topic. This article will focus on all the possible aspects of the topic.
Getting Started with Shine.js
The very first step for using this script is to download it and include it in your page where you want to use it. There are two options to download Shine.js. The first is to download it from its GitHub repository and the second is to use Bower(the dependency manager for the web). To install using Bower just run the following command:
bower install shine
Once downloaded, you need to include the script in your page.
Now you need to create a Shine.js instance for each of the DOM element you’d like to shine:
Light Source Placement
Individual light sources for each shadow can be defined as below per their x,y coordinates.
In order to change the light position dynamically, create function as given below and add one Eventlistener that fires this function on mousemove.
With Shine.js we have some additional configurations parameters also using which we can design the look of the shadows. For that we have to create the shinejs.Config instance:
|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.|
|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)|
|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.|
Creating a Shine.js Demo
Let’s create simple HTML with shine js and some css styling.
Browser Support & License
Shine.js runs well on all browsers with support for “text-shadow” and “shadow” and there is no risk in using the library. Shine.js is offered under the MIT license which means you can use it free of charge for any commercial and private projects.
- – No conflicts with other js
- – MIT License
- – Compatibility with almost all the modern browsers
- – Easy to use & Implement