News

JQUERY: How to create neon effects

Neon can lighten up boring spaces. Let’s see how to create your own with the help of NoVacancy.js

JQUERYNoVacancy

Neon can lighten up boring spaces. Let’s see how to create your own with the help of NoVacancy.js

JQUERYNoVacancy

Include the libraries

Being a jQuery plugin, NoVacancy requires its mother library along with a copy of the actual source code for the neon blinking. NoVacancy is currently hosted at GitHub, so copy it to your web server.

001 <script type="text/javascript" src="http://    ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
002 <script type="text/javascript" src="jquery.    novacancy.js"></script>

Insert element

NoVacancy animates one or more elements created from <span> tags located inside of a <h1> headline. You can set font styles and background colours in an accompanying CSS stylesheet, try Google’s Monoton.

001 </h1><h1>
002 <span id="lA">AAAAA</span>
003 <span id="lB">BBBBB</span>
004 </h1>

Invoke method

Starting NoVacancy can be done by invoking the novacancy() method on a reference returned from jQuery’s $() function. Blinking can be controlled via a trigger that lets you turn blinking on and off.

001 $('#no').novacancy();
002 $('#no').trigger('blinkOn');
003 $('#no').trigger('blinkOff');

Set parameters

Novacancy() can take a JSON object with settings, and thereby let you adjust the behaviour of the plugin. For example, the blinking frequency can be decreased to give the site a ‘calmer’ appearance.

001 $('#no').novacancy({
002 'reblinkProbability': 0.1,
003 'blinkMin': 0.2,
004 'blinkMax': 0.6,
005 'loopMin': 8,
006 'loopMax': 10,
007 'color': '#ffffff',
008 'glow': ['0 0 80px #ffffff', '0 0 30px     #008000', '0 0 6px #0000ff'],
009 'off': 1,
010 'blink': 1,
011 'classOn': 'on',
012 'classOff': 'off',
013 'autoOn': true
014 });
</span>
×