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:
JS
  • 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.
JS
  • 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.
JS
  • 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:
JS
  • 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

PropertyTypeDescription
domElementHTMLElementThe DOM element to apply the shine effect to.
configshinejs.ConfigStores all config parameters.
lightshinejs.LightStores the light position and intensity.

shinejs.Config Properties

PropertyTypeDefault ValueDescription
numStepsnumber8The number of steps drawn in each shadow
opacitynumber0.1The opacity of each shadow (range: 0...1)
opacityPownumber1.2The exponent applied to each step's opacity (1.0 = linear opacity).
offsetnumber0.15Larger offsets create longer shadows
offsetPownumber1.8The exponent applied to each step's offset (1.0 = linear offset).
blurnumber40The strength of the shadow blur.
blurPownumber1.4The exponent applied to each step's blur (1.0 = linear blur).
shadowRGBshinejs.Colornew shinejs.Color(0, 0, 0)The shadow color in r, g, b (0...255)

shinejs.Light Properties

PropertyTypeDefaultValueDescription
positionshinejs.Pointnew shinejs.Point(0, 0)The position of this light.
intensitynumber1.0The 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
  • 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
  • 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+.
New question is currently disabled!