July 11

Flare jQuery Plugin

Optical flare plugin

Description

This is a plugin for jQuery I developed, which renders a colored optical flare to slide across elements such as boxes, images, and containers. 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.  It is the first of it’s kind on the web!

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.

Demo


(Don’t forget to include your opinion in the comments)

Download

Available for download at GitHub or learn how to create your own with this tutorial.

Basic Usage

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

[code]<script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/flare.jquery.js"></script>
[/code]

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.

[code]</pre>
<style><!–
.box { display: block; margin: 40px; }
–></style>
<pre></pre>
<div class="blox">Slide across this box.</div>
<pre>[/code]

Finally initialise the plugin selecting the element or elements where you want the flare. The default trigger event is ‘mouseenter’ so the flare will activate when you mouse over 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.

[code]$(‘.block’).flare();
// change color to green
$(‘.block’).flare({backgroundColor: ‘#0f0’})[/code]

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.

[code]$(‘.box’).flare( {target: ‘#myDiv’, action: ‘click’, backgroundColor: ‘#0f0′, speed: 1000, glowRadius: ’15’} );[/code]


Tags: , , ,

Posted July 11, 2013 by Tom in category "Code", "Creative", "Design

8 COMMENTS :

  1. Pingback: FLARE - компонент с эффектом подсвечивания грани блока - web технологии

  2. Pingback: Flare, creare un effetto bagliore con jQuery - sastgroup.com

  3. Pingback: Flare, creare un effetto bagliore con jquery

  4. By Emmanuel on

    looks a bit boring, you should try to make it change size in addition to the change of opacity. Bring it from a tiny 1px/1px to the full size in the center, then back to tiny. I guess that would help.

  5. Pingback: Learn jQuery and bring your UX to life - UXbyDesign.org

  6. Pingback: Ten Must-Have JS Plugins for Busy Developers

  7. Pingback: Creare bagliori con jQuery! | sastgroup.com

Leave a Reply