Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com

Recent Comments

Powered by Disqus

Back to articles

Javascript Spotlight visual cue

Spotlight class provides a way to create a spotlight like visual cue to concentrate visitors attention to specific webpage elements or actions

Package contains spotlight.js, spotlight.packed.js (packed javascript), and three example files: example.html, mouse_example.html and animation_example.html to demonstrate class functionality.

Contents

Download

Back to contents

Example codes

Back to contents

var sp = new spotlight({
	onAnimationStart: function(){alert("start");},
	onAnimationEnd: function(){alert("end");}
});
sp.show(200, 200);

Examples in action

Back to contents

Example scripts provided with package in action:

Method list

Back to contents

Constructor

Back to method list

Method namenew spotlight(id, config);
DescriptionCreate a spotlight instance
Input parameters

json config - Json structure with configuration properties

  • string bgColor - color of background (default: rgba(0,0,0,0.9))
  • float lightStart - start opacity of light (default: 0)
  • float lightEnd - end opacity of light (default: 0.2)
  • int size - radius of spotlight (default: 100)
  • int blurRadius - radius of blur around spotlight (default: 20)
  • int interval - time interval between animation steps (default: 10)
  • int zIndex - z index of canvas element (default: 100)
  • function onMouseOver - function to call, when element is hovered (default: none)
  • function onMouseOut - function to call, when element is un hovered (default: none)
  • function onSpotClick - function to call, when spotlight is clicked (default: none)
  • function onCanvasClick - function to call, when surrounding of spotlight is clicked (default: none)
  • function onAnimationStart - function to call, when animation starts (default: none)
  • function onAnimationEnd - function to call, when animation ends (default: none)
Example input
var sp = new spotlight({
	bgColor: "rgba(0,0,0,0.9)",
	lightStart: 0,
	lightEnd: 0.2,
	size: 100,
	blurRadius: 20,
	interval: 10,
	steps: 50,
	zIndex: 100,
	onAnimationStart: function(){alert("start");},
	onAnimationEnd: function(){alert("end");}
});

Show spotlight

Back to method list

Method nameshow(x,y)
DescriptionShow spotlight at specified position
Input parameters

int x - x coordinate in pixels

int y - y coordinate in pixels

Example

sp.show(100,100)

Hide spotlight

Back to method list

Method namehide()
DescriptionHide spotlight
Example

sp.hide()

Animate spotlight

Back to method list

Method nameanimate(x, y, r, blur, steps)
DescriptionAnimate spotlight with different parameters and animation steps
Input parameters

int x - new x coordinate in pixels

int y - new y coordinate in pixels

int r - new radius of spotlight in pixels

int blur - new radius of blur around spotlight in pixels

int steps - steps of animations to perform

Example

sp.animate(200, 200, 100, 50, 20)

Move spotlight

Back to method list

Method namemove(x,y)
DescriptionAnimates moving of spotlight (shorthand from animation)
Input parameters

int x - new x coordinate in pixels

int y - new y coordinate in pixels

Example

sp.move(200,200)

Resize spotlight

Back to method list

Method nameresize(radius)
DescriptionAnimates resizing of spotlight (shorthand from animation)
Input parameters

int radius - new radius of spotlight in pixels

Example

sp.resize(200)

Blur spotlight

Back to method list

Method nameblur(radius)
DescriptionAnimates resizing of blur around spotlight (shorthand from animation)
Input parameters

int radius - new radius of spotlight blur in pixels

Example

sp.blur(50)

Color of background

Back to method list

Method namechangeBgColor(color)
DescriptionChange color of bakground
Input parameters

string color - color of background

Example

sp.changeBgColor("rgba(255,255,0,0.5)")

Change spotlight

Back to method list

Method namechangeSpot(start,end)
DescriptionChange opacity of spotlight. Spotlight is created using radial gradient and you can setp start opacity and end opacity of this gradient
Input parameters

float start - start opacity of radial gradient

float end - end opacity of radial gradient

Example

sp.changeSpot(0,1)

Set animation speed

Back to method list

Method nameanimationSpeed(steps, interval)
DescriptionSet amount of animation steps and interval to be used in animations
Input parameters

int steps - in how many steps to finish animation

int interval - amount of time between animation steps

Example

sp.animationSpeed(20, 10)

Latest changes

Back to contents

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus