Den animerte grafikken i headingen min

Til info: Dette blogginnlegget handler om animasjon av tekst med JavaScript, noe jeg benyttet i headingen på nettsidene i 2013. Denne metoden fungerer like godt fortsatt, men er ikke lenger i bruk på nettsidene mine. Jeg gikk senere over til mindre ressurskrevende animasjon med keyframes i CSS, og deretter til en animert SVG, som fortsatt er i bruk.

Den gamle grafikken

Da jeg nylig skulle redesigne Hardcode.no stod jeg overfor et problem: Bredden på den gamle «headingen» var 760 piksler bred, mens de nye sidene skulle være bredere.

Vel, kunne jeg ikke bare laget ny grafikk som var bredere? Svaret er nei, det kunne jeg ikke.

Den gamle grafikken på toppen av alle sidene mine var et animert GIF-bilde med teksten «Sylling Hardcode», med en statisk markør under første bokstav og en blinkende markør etter siste bokstav:

Dette har vært et konsept jeg har vært veldig fornøyd med, så jeg ville gjerne videreføre dette.

En utfordring var selve bakgrunnen i GIF-animasjonen: Dette var noe jeg opprinnelig lagde i 2004, og jeg kunne ikke lenger finne originalen. Å skalere opp den eksisterende bakgrunnen var uaktuelt, både fordi bildekvaliteten ville blitt dårligere og fordi selve teksten var embeddet direkte over bakgrunnen.

Løsningen for bakgrunnsbildet

Jeg brukte litt tid i Photoshop og forsøkte å lage et nytt bakgrunnsbilde mest mulig likt det forrige, med samme farger og et abstrakt motiv, men ble ikke riktig fornøyd med resultatene.

Da fant jeg ut at jeg kunne bruke deler av bakgrunnen i den eksisterende GIF-animasjonen og lage noe mosaikk ut av det:

Jeg kunne skalere det opp så mye jeg ville uten at det ville bli kornete, samtidig som jeg beholdt de samme fargene. I tillegg er det jo glimrende at den gamle grafikken kan leve videre i en ny form.

Løsningen for teksten

Den forrige grafikken brukte skrifttypen Eurostile, men jeg hadde ikke lenger lisens på denne tilgjengelig. Så i stedet for å bruke penger på ny lisens valgte jeg å bruke Google Web Fonts, gratis skrifttyper for bruk på nett. Jeg fant ingen tilsvarende font, så valget ble en font ved navn «Jura».

Så jeg valgte altså å ikke lage en GIF-animasjonen med teksten embeddet rett i bildefilen, men i stedet ha en statisk bakgrunn og selve teksten som HTML.

Løsning for animasjonen

Jeg valgte å gå for en relativt enkel animasjon med hjelp fra JavaScript-biblioteket jQuery.

Selve HTML-koden er slik:

<div id="logo">
 <a href="/">
  <span id="logotyping"></span>
  <span class="runnerblink">S</span>
  </a>
</div>

Jeg skal ikke gå inn på CSS som er brukt her, men #logo fikk den nye grafikken som bakgrunn.

#logotyping er selve teksten som blir animert og gir inntrykk av at «Sylling Hardcode» blir tastet inn. #runnerblink er den siste markøren som skal blinke. Her er skriftfargen satt til transparent. At jeg har valgt bokstaven S er rett og slett bare fordi den skal ha samme bredde som markøren under første bokstav i teksten.

For første bokstav i #logotyping og for hele #runnerblink har jeg med CSS angitt at det skal være en 4 piksler bred ramme nederst. Dette er altså de to hvite strekene under teksten.

Jeg skrev to JavaScript-funksjoner, runnerblink() og logotype(charnumber).

Funksjonen runnerblink() er bare en funksjon som viser og skjuler den siste markøren hvert 750. millisekund, samme hastighet som de fleste tekstmarkører har. Denne går i intervaller ved hjelp av setInterval i JavaScript, og selve endringen av synligheten gjør jeg med jQuery, hvor jeg setter visibility til henholdsvis visible og hidden. Jeg kunne brukt display=inline/none også, men da kunne jeg i enkelte spesielle tilfeller risikere at noe annet innhold ville flytte på seg. Visibility tar opp den samme plassen hele tiden, men gjør bare innholdet «usynlig».

Funksjonen logotype(charnumber) gir illusjonen av at teksten «tastes inn». Jeg tar utgangspunkt i tekststrengen «Sylling Hardcode», og funksjonen kjøres en gang for hver bokstav i tekststrengen, derav variabelen charnumber.

Hvis det er den første bokstaven, som skal ha en statisk markør under seg, gjøres det et unntak og bokstaven pakkes inn noe egen CSS. Hver bokstav legges til i #logotyping en etter en, med et intervall på 50 millisekunder.

JavaScriptet ble til slutt slik:

function runnerblink()
 {
  if($("#logo .runnerblink").css("visibility")=="hidden")
   {
    $("#logo .runnerblink").css("visibility", "visible");
   }
  else
   {
    $("#logo .runnerblink").css("visibility", "hidden");
   }
 }

function logotype(charnumber)
 {
  charnumber = parseInt(charnumber);
  var logotext = "Sylling Hardcode";
  if(charnumber <= logotext.length)
   {
    var newchar = logotext.substring(charnumber,(charnumber+1));
    if(charnumber<1)
     {
      $("#logotyping").append('<span class="runner">'+newchar+'</span>');
     }
    else
     {
      $("#logotyping").append(newchar);
     }
    setTimeout("logotype("+(charnumber+1)+")",50);
   }
 }

$( document ).ready(function() {
  setInterval(function(){runnerblink()},750);
  setTimeout("logotype(0)",100);
});

Jeg lar koden tale for seg her. Og om du skulle lese dette blogginnlegget en gang i fremtiden kan det godt være at denne grafikken og animasjonen er erstattet med noe annet.

Relatert innhold

Bloggen