The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Optical Flare : Animate an optical flare across web elements without the use of images.

Plugin rate :

The Flare jQuery Plugin

Description

This is a plugin for jQuery which animates a colored optical flare to slide across elements.
The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element's top-left corner to the top-right corner.

Features

  • Cool movie-style effect also used in games such as Sleeping Dogs.
  • Works in Chrome, Firefox, and Safari, and IE 10 including mobile.
  • Uses modern CSS techniques.
  • Customizable glow color, speed, glow radius, and trigger event.
  • First Optical flare effect without use of images.

Basic usage

You need to include the jQuery library and the plugin file:

1
2
3
4
5
  
<!-- Adjust depending on where you have located the files -->
 
  <script src="/js/jquery.js"></script>
 <script src="/js/flare.jquery.js"></script>

Then add an html element with a class or id for selection.
At the minimum you need a div tag with as a block display and a margin or padding because the flare will slide along the top edge.

1
2
3
4
5
6
7
8
9
10
 
<style>
  .box {
    display: block;
    margin: 40px;
  }
</style>
<body>
  <div class="blox">Slide across this box.</div>
</body>

Finally initialise the plugin selecting the element or elements where you want the flare.
The default trigger event is 'click' and the target is the selector itself so the flare will activate when you click the target element.
You'll probably want to change the glow color, so add a parameter to the flare function as in the 2nd line.

1
2
3
4
 
$('.box').flare();
 // change color to green
 $('.box').flare({backgroundColor: '#0f0'})

Advanced usage

Here are the advanced settings you can change. Note that the speed unit is without quotes and the lower the number the faster it is.
For the event action choose one of the many jQuery trigger events available. Background color is in the standard CSS format.
The glow radius is actually the density, the lower the number the less glow.

1
$('.box').flare( {target: '#myDiv', action: 'click', backgroundColor: '#0f0', speed: 1000, glowRadius: '15'} );

For a demonstration of usage and examples visit the demo page

Change Log

1.1.0

1
2
3
4
5
  
-Made animation smoother by fading out flare before it stops
  -Changed default trigger event to mouse click
  -Added option to separate the triggering event from the target area for the flare
  -Renamed radius to density as it's more accurate

1.0.1

1
  Added CSS styles for other browser support
Implementation: 

See this page for usage documenation https://github.com/rutkat/flare

Options: 
target
String
Default : div#id - Optional parameter for the target location of the flare
Screenshots
  • Screenshot

Comments

Wow!
Great post!!
Amimation Institute in Delhi

Please keep posting post like this!! :)

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.9
Current version
1.1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [1]