An Introduction to shine.js

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.

1
<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:

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

1
2
3
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.

1
2
3
4
5
6
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:

1
2
3
4
5
6
7
8
9
// 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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

Message Type : Question Comment ?
  • Question : Can include code, jsFiddle, codePen etc using Markdown Syntax.
  • Comment : Short comments and questions.