Ben's Hobbyhoekje -- Neon-letters maken

Neon-letters maken

Hieronder zie je een lichtreclame, die is gemaakt met neon-letters. Zoals dat wel vaker gebeurt bij lichtreclames, zijn er een paar letters uit of die zo nu en dan een beetje knipperen.
Op deze bladzijde wordt uit de doeken gedaan hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Licht reclame

Besproken worden:
1. De oorsprong van het script.
2. Een algemene beschrijving.
3. Inbouwen in je eigen site.
De oorsprong van het script
Ik heb dit script gevonden op Github. Dat is een site waar (web-)ontwikkelaars hun producten presenteren.
Het script is gemaakt door de ontwikkelaar Chuck Chang, die zich "ChuckyGlitch" noemt op Github.
Het script is te downloaden vanaf https://github.com/chuckyglitch/novacancy.js. (Klik op de knop Download ZIP).
De oorspronkelijke naam is novacancy. Dit betekent zoveel als "geen vacatures" of "geen kamers vrij". In de laatste betekenis vind je het vaak op motels en dergelijke logeer-gelegenheden in de VS.
De demo-site gebruikt ook de term 'No Vacancy'.
Algemene beschrijving
Dit script is een jQuery-plugin. Behalve het script heb je dus ook jQuery nodig, minimaal versie 1.9.1
Het script zelf bestaat uit drie delen:
- Een JavaScript-bestand met de naam jquery.novacancy.js. (De downloadfile bevat ook een geminimaliseerde versie, die heet
  jquery.novacancy.min.js. Deze site maakt er gebruik van.
- Een CSS-bestand met de naam demo.css. Voor de toepassing op deze site is dat hernoemd in neonletters.css.
- HTML-code die de lichtreclame op het scherm zet.
Het JavaScript staat in een subdirectory javascript. In lijn met de stijl van deze site is die hernoemd naar js.
De CSS-code staat in een subdirectory css.
In de downloadfile van Github zit een file demo.html. Daar zit de benodigde HTML-code in. Dit bestand is een goede basis om je eigen toepassing mee te bouwen.
Er wordt ook een CSS-reset meegeleverd. Het ligt aan je eigen toepassing of die nodig of niet. Op deze site is die niet gebruikt.
Er wordt ook code meegeleverd om het te laten werken met oudere versies van Internet Explorer. Omdat deze site geen oude browsers ondersteunt, wordt ook die code op deze site niet gebruikt.
Het lettertype van de lichtreclame is Monoton. Dit is een weblettertype van Google. Om het te gebruiken haal je een css-bestandje direct van de servers van Google. Als internet een beetje traag is kan het gebeuren dat je de neon-letters niet ziet als je deze pagina voor de eerste keer opent.
De HTML-code bestaat uit een class board, waar de lichtreclame in wordt gebouwd.
Binnen de class board definieer je de elementen die de tekst van de lichtreclame bevatten. Elk deel van de tekst staat in een element dat een id heeft. Via dat id wordt een object gemaakt waarin de kleur, de lettergrootte, en het gedrag (knipperen, letter is uit, enz.) wordt vastgelegd.
De animatie wordt gestart met een document.ready-function.
In de oorspronkelijke demo staat de tekst in <p>-tags. Op deze site is <span> gebruikt. Dat betekent wel dat je in het CSS-bestand een selector moet veranderen: .board p wordt .board span
Inbouwen in je eigen site
Code die je in je pagina moet opnemen om het werkend te krijgen staat hieronder genoemd.
De code van het voorbeeld op deze pagina kun je downloaden en zelf gebruiken.
Omdat dit script jQuery gebruikt, is er ook een $(document).ready()-function. Deze zet je het beste aan het eind van je code, net vóór de <body>-tag.
Zoals hiervoor al is genoemd, zit elk onderdeel van de lichtreclame in een element met een id. Die selecteer je binnen de document.ready()-function.

Aan elk van de selecties geef je een JSON-object mee, van het type novacancy(). Daarin bepaal je het gedrag van het geselecteerde deel van de lichtreclame. De mogelijke instellingen vind je in onderstaande tabel.

Naam		*Betekenis*
reblinkProbability		Kans op herhaling van het knipper-effect, getal in de range 0 t.m. 1, default: (1/3).
blinkMin		Tijdsduur(sec.) van kortste knipper-effect, getal, default: 0.01.
blinkMax		Tijdsduur(sec.) van langste knipper-effect, getal, default: 0.5.
loopMin		Tijdsduur(sec.) van kortste getriggerde knipper-effect, getal, default: 0.5
loopMax		Tijdsduur(sec.) van langste getriggerde knipper-effect, getal, default: 2
color		Kleur van de tekst, gebruik een geldige kleuraanduiding, default: 'ORANGE'. Geef null om de kleur uit te zetten.
glow		Schaduwkleuren, array, default: ['0 0 80px Orange', '0 0 30px Red', '0 0 6px Yellow']. Geef null om de kleur uit te schakelen.
off		Aantal karakters die "uit" staan, getal, default: 0.
blink		Antal knipperende karakters, getal, default: 0, (0 betekent: alle karakters knipperen).
classOn		Naam van de class van de letters die "aan" staan, string, default: 'aan'.
classOff		Naam van de class van de letters die "uit" staan, string, default: 'uit'.
autoOn		Knipperen staat aan bij starten, Boolean, default: true.

Alle parameters zijn optioneel. Als je een parameter weglaat wordt de default-waarde gebruikt.

Je kunt het knipperen van de letters aan- en uitzetten met behulp van de methode trigger, bijvoorbeeld:
$('#licht').trigger('blinkOn') zet het knipperen van de rode letters aan;
$('#r').trigger('blinkOff') zet het knipperen van de blauwe letter uit.
Tenslotte:
Als je voor je eigen site wilt uit gaan van het origineel van "ChuckyGlitch", is de beste aanpak om demo.html stap voor stap aan te passen voor je eigen doeleinden. Vaak moet je daarbij ook de class board in de CSS-file aanpassen.
De file demo.css bevat ook voorschriften voor de body. Die kan je eigen CSS verstoren. Wees daar op bedacht.
Lichtreclames zijn het mooist als het buiten donker is. Dat geldt ook voor deze lichtreclame. Kies voor een pagina waar je dit op gebruikt, bij voorkeur een donkere achtergrond.
Bij sommige browsers kan het even duren voordat het knipper-effect zichtbaar wordt.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="css/neonletters.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Monoton' rel='stylesheet'>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.novacancy.js"></script>

(Zet dit in de <BODY>, op de plaats waar de lichtreclame moet komen).

<div class="board">
<span id="licht">Licht</span>  
<span id="r">r</span>
<span id="eclame">eclame</span>
</div>

N.B.: De drie <span>-tags moeten op één regel staan.

(Zet dit helemaal aan het eind van de <BODY>).

<script>
$(document).ready(function() {
$('#licht').novacancy({
'reblinkProbability': 0.1,
'blinkMin': 0.2,
'blinkMax': 0.6,
'loopMin': 8,
'loopMax': 10,
'off': 1,
'color': '#f00',
'glow': ['0 0 80px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']
});

$('#r').novacancy({
'reblinkProbability': 0.9,
'blinkMin': 0.2,
'blinkMax': 0.6,
'loopMin': 8,
'loopMax': 10,
'color': '#0df',
'glow': ['0 0 80px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']
});

$('#eclame').novacancy({
'reblinkProbability': 0.1,
'blinkMin': 0.2,
'blinkMax': 0.6,
'loopMin': 2,
'loopMax': 19,
'off': 2,
'color': '#ff0',
'glow': ['0 0 80px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']
});
});
</script>

Downloaden:

Druk op de knop: File: voorb429.zip, 4641 bytes.