Opvallende koppen V:

Brandende letters

De ondertitel van deze pagina ziet er een beetje aangebrand uit… Op deze bladzijde wordt besproken hoe je dat voor elkaar krijgt.
De code van het voorbeeld kun je downloaden om zelf te gebruiken.

• Besproken wordt:
  1. De oorsprong van het script.
  2. De werking van het script, in globale termen.
  3. Inbouwen in je eigen site.
   
• De oorsprong van het script
• Het script is gemaakt door Kevin Attfield. Het is origineel is te vinden op GitHub.
  Daar staat ook een beknopte handleiding om het te gebruiken.
• Een werkende demo is te vinden op sinetheta.github.io/burn
• De code kun je het beste downloaden van de GitHub repository, want die is duidelijker. De beschrijving bij de demo is echter veel beter dan die bij de repository.
   
• Op het moment dat dit geschreven wordt (mei 2015), is het script meer drie jaar oud. Er wordt niet actief aan ontwikkeld en het lijkt ook niet meer te worden onderhouden.
• Het voorbeeld op deze pagina is een bewerking van het script van Kevin Attfield.
   
• Algemene beschrijving
• Dit is een bewerking van het originele script van Kevin Attfield. Een paar onduidelijkheden in de demo zijn verwijderd.
• Het script is een jQuery-plug-in, die staat in de file jquery.burn.js. Aanpassing daarvan is niet nodig om het te laten werken. Er is ook een geminimaliseerde versie beschikbaar, die laadt wat sneller.
• Om een of andere, door mij niet begrepen, reden is het niet mogelijk om de default-instellingen te wijzigen met de geminimaliseerde versie van de plug-in (file: jquery.burn.min.js). Als je voor je eigen site de instellingen wilt veranderen moet je dus de "gewone" versie van de plug-in gebruiken (file: jquery.burn.js).
  Dit verschijnsel treedt op, onafhankelijk van welke browser wordt gebruikt. Het probleem ligt dus aan het script.
• Het script heeft ook nog wat CSS nodig. Daarmee kun je de opmaak van de brandende tekst helemaal naar je hand zetten.
  De CSS staat in de file burn.css.
• Natuurlijk is er ook een $(document).ready()-function om het effect te starten.
   
• Deze plug-in is toepasbaar met elk blok-type element (<h1>, <h2>, …, <p>, …), maar het kan ook met een deel van een blok-type element via een <span>.
  Op deze pagina werkt het op een <p>.
• Het effect werkt op tekst met de class burning. De tekst zelf maak je op door .burning aan te passen.
   
• De text-shadow (lees: de vlammen en de rook) wordt gemaakt door het jQuery-script. Je kunt daar het een en ander aan instellen, zie verderop in dit verhaal.
   
• Effect uit- of aanzetten Je kunt het effect uit- en weer aanzetten met de knop hiernaast. De benodigde code vind je onderaan deze pagina en in de downloadfile.
   
• Inbouwen in je eigen site
• Omdat dit een jQuery-plugin is, moet je jQuery laden. Op deze pagina is versie 1.7.1 gebruikt. Het beste betrek je die van een CDN.
• Zoals hierboven al is genoemd kun je de opmaak van de tekst veranderen via het CSS-bestand burn.css. De opmaak van de vlammen wordt geregeld de plug-in. Je stelt ze in via een aanroep van de function burn(). Dit moet in de (document).ready(function() gebeuren, vóór dat het effect wordt gestart. Onderstaande tabel geeft een overzicht.
   
  

  Parameterlijst		Betekenis
  ('wind', 0)		Scheefstand van de vlammen. Een negatieve waarde laat de vlam naar links overhellen. De vlam staat perfect verticaal als wind = 0. Als wind positief is, helt de vlam naar rechts. Hoe groter het getal, hoe meer de vlam overhelt. De eerste parameter moet tussen aanhalingstekens staan. Met deze aanroep wordt wind ingesteld op 0. Default is 1. Als je de tweede parameter weglaat, wordt de huidige waarde van wind teruggegeven.
  ('diffusion', 2)		Schaalfactor voor zowel horizontale en verticale ver­schuiving, als voor vervaging (blur). Een groter getal geeft een groter lijkende vlam, maar die is wel minder intens. De eerste parameter moet tussen aanhalingstekens staan. Met deze aanroep wordt diffusion ingesteld op 2. Default is 1. Als je de tweede parameter weglaat, wordt de huidige waarde van diffusion teruggegeven.
  ('strength', 2)		Deze parameter staat niet in de documentatie. Hij doet het zelfde als diffusion. Het lijkt er op dat het script op dit punt niet "af" is. Dat maakt het eigenlijke doel van deze parameter nogal vaag. Met deze aanroep wordt strength ingesteld op 2. Default is 1. Als je de tweede parameter weglaat, wordt de huidige waarde van strength teruggegeven.
  ({a:2,  k:10,  w:2})		Dit is een JSON-object, waarmee je het flakkeren van de vlammen kunt beïnvloeden. De vlammen worden gemaakt met de formule voor een lopende golf: y(x,t) = A sin(kx - ωt), Het voert te ver om daar uitgebreid op in te gaan; we beperken ons tot de betekenis van de parameters:  a: Amplitude van de golfbeweging. Een grotere waarde geeft een grotere 'uitslag'. Default: 0.03  k: Golfgetal. Een grote getal geeft meer golven per lengte-eenheid, of: een meer kringelen vlam. Default: 0.05  w: Hoeksnelheid. Een hogere waarde geeft een snellere beweging, of: een hogere frequentie. Default: 10
  (false)		Stop het effect.
  ()		Start het effect.

  
  Behalve het bovenstaande is het ook mogelijk om het gedrag van de vlammen aan te passen door de array flames als parameter mee te geven aan burn().
  flames is een lijst van JSON-objecten die elk achtereenvolgens bevatten:
   x: x-coördinaat van de lopende golf. Altijd 0, niet veranderen.
   hsla: Definitie van de kleur in hsla-formaat, als array van vier getallen.
   y: y-coördinaat van de lopende golf, waarvoor de hsla-kleur geldt. Getal oplopend van 0 tot 0.5
   blur: Straal van de vervaging bij coördinaat y. Getal oplopend van 0 tot maximaal 1.
  Zie de file jquery.burn.js voor de noodzakelijke opmaak van de array van JSON-objecten.   
• Tenslotte:
• Het voorbeeld op deze pagina is gemaakt met alleen default-instellingen en de file jquery.burn.min.js.
• Nogmaals: Als je parameters wilt veranderen moet je jquery.burn.js gebruiken.

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>).

<link rel="stylesheet" href="burn.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.burn.min.js"></script>

(Zet dit in de <BODY>, op de plaats waar de letters moeten branden).

<p align="center" class="burning">Brandende letters</p>

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

<script>
$(document).ready(function() {
  $('.burning').burn();
});
</script>

De code van knop ziet er als volgt uit:
 
Deze code is een uitbreiding van de code voor de brandende letters. Het heeft alleen zin om deze code te gebruiken in combinatie met die brandende letters.

(Zet dit in de <BODY>, op de plaats waar de knop moeten verschijnen).

<button style="float:right; margin-left:20px"
  onclick="toggleEffect()">Effect uit- of aanzetten</button>

(Zet dit bij het JavaScript aan het eind van de <BODY>,
voor of na, maar niet in de $(document).ready(function()).

var onoff = true;
function toggleEffect() {
  if( onoff ) {
    $('.burning').burn(false);
    onoff = false;
  } else {
    $('.burning').burn();
  onoff = true;
  }
}

Downloaden:
 
Druk op de knop:  File: voorb434.zip, 3644 bytes.