An Introduction to shine.js

Written by Ketan Patel on February 24, 2015

We all know that javascript is an amazing playground using which many cool things can be developed. Each and everyday new things(libraries , scripts ,plugins) are being developed which makes the continuous improvement in the web experience and performance. In this article, I'm going to introduce you to one of the same amazing javascript library famous as "Shine.js - A Library for pretty shadows".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.

Why Shine?

Shine.js comes without any further dependencies. No other javaScripts, even no jQuery, nothing required. This independence makes its integration into any project very easy. Once you embedded it to the head of your page document, you are ready to invoke shadows on your pages. One another advantage of shine is dynamic generation of shadows and the position is simply triggered by the mouse location.

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.


<script src="path/to/shine.min.js"></script>

Now you need to create a Shine.js instance for each of the DOM element you'd like to shine:


var shine = new Shine(document.getElementById('your-shine-object'));

Light Source Placement

Individual light sources for each shadow can be defined as below per their x,y coordinates.

shine.light.position.x = window.innerWidth * 0.5;
shine.light.position.y = window.innerHeight * 0.5;
shine.draw(); // make sure to re-draw

In order to change the light position dynamically, create function as given below and add one Eventlistener that fires this function on mousemove.

function handleMouseMove(event) {
      shine.light.position.x = event.clientX;
      shine.light.position.y = event.clientY;
      shine.draw();
}
window.addEventListener('mousemove', handleMouseMove, false);

Configurations

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:

// all parameters are optional and can be changed later
 var config = new shinejs.Config({
      numSteps: 8,
      opacity: 1,
      shadowRGB: new shinejs.Color(0, 0, 0)
    });

// pass the config in the constructor
 var shine = new shinejs.Shine(document.getElementById('your-shine-object'), config);

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 Properties

Property	Type	Default Value	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 Properties

Property	Type	DefaultValue	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.

Creating a Shine.js Demo

Let's create simple HTML with shine js and some css styling.

HTML

<html>
  <head>
    <title>Shine Demo</title>
    <style>
      body {
        background-color: #cfcfcf;
      }
      h1 {
        margin: auto;
        color:#222;
        font-family:'Arial';
        font-size:10rem;
        width:100%;
        text-align:center;
        margin-top:10%;
        letter-spacing:-1rem;
      }
    </style>
    <script src="shine.js"></script>
  </head>
<body>
  <h1 id="demo">Shine.js</h1>
  <script type="text/javascript">
    var config = new shinejs.Config({
      numSteps: 8,
      opacity: 1,
      shadowRGB: new shinejs.Color(0, 0, 0)
    });

    var shine = new shinejs.Shine(document.getElementById('demo'), config);

    function handleMouseMove(event) {
      shine.light.position.x = event.clientX;
      shine.light.position.y = event.clientY;
      shine.draw();
    }

    window.addEventListener('mousemove', handleMouseMove, false);
  </script>
</body>
</html>

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.

Advantages

- No dependencies (its Standalone Javascript)
- No conflicts with other js
- MIT License
- Compatibility with almost all the modern browsers
- Easy to use & Implement

Demo and Download

Ketan Patel
Article written by Ketan Patel. Ketan Patel is a Blogger based in India. Currently he is working as a PHP Developer in a leading web development company. He is the founder of PHP Dev Zone. Apart from his blogging life, he loves to read novels and net surfing. You can get in touch with Ketan on Twitter, Facebook or Google+.