By
Neon can lighten up boring spaces. Let’s see how to create your own with the help of NoVacancy.js
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>
