Publisert i bloggen, onsdag 4. desember 2013:

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

Hva er jQuery?
Redesign av hardcode.no

Bloggen

Paid and organic last click
Are og Ida på date
Kunstig intelligens
Vekst- prosjektet
Da Outlook stjal ikonet mitt
Sen eller tidlig påske?
Koordinater i SVG
Påstand: Corner er mål
Vestfold-Rogaland kalkulator
Twitter og VM på ski
My New Year's Resolutions
Et bilde sier mer enn tusen ord
Rogaland blir nye Vestfold
På størrelse med Vestfold
Datoformat i Excel og Google Analytics
what3words Hvilke tre ord?
Covfefe will make America great again
Om domenenavn og firmanavn
Fotballfrue: Jeg tar innpå deg
Sakte-TV: Se gresset gro
Sakte-TV: Se maling tørke
Første generasjon iPapp har kommet
Jukselapp fotografering
Det sorte hullet cookies disabled
Høysesong for kjipe annonser
Om analsex og popups
Rotasjon av vindsymboler
Hvor mye er Fotballfrue verdt?
Slik tar du et screenshot
Nyttige husketrekanter
Enklere utregning med kryssmultiplisering
Min egen lille adventskalender
Logge antall likes på Facebook
Hva er sitemap.xml?
Hva er robots.txt?
Responsivt design
Webscraping med PHP
Jeg sammenligner epler og pærer
Scalable Vector Graphics
Google Analytics API: Hente data
Google Analytics API: Muligheter
HTML5: Video
Big Data
Cookies: Hvordan det brukes
Cookies: Hva er det?
Excel i to vinduer
CRM-systemet «Kontor»
Gigantisk timelapse
Hva er jQuery?
Overvåke ReadyNAS DUO med PHP
Favicon - ikonet i adressefeltet
Animert heading på hardcode.no
CSS -sprites
Komprimere PNG-bilder
Redesign av hardcode.no
Klikkbar flash uten clickTAG
Relevans har stor verdi
Alle har wide- screen i 2013
Markedsandeler nettlesere 2010
Internet Explorer-vindu i feil størrelse
Hvor stor er en piksel?
Markedsføring og kundelojalitet
Flash-versjoner
Vestre Sylling og Øverskogen JFF
Sidevisninger, besøk og brukere
Widescreen kommer
Hvor brede bør sidene være?
Fortsatt lese hele saken?
Lese hele saken nå?
Første møte med AdWords
Bort med IE6
Utviklingen på nettleserfronten
Nyttige jukselapper
Nye Sylling.no
Klær med egen logo?
Værdata fra yr.no
Logodesign trender i 2008
Gmail grimaser
Google Analytics
Publiseringssystemet Outpost
Hardcode.no relanseres
Publiserings -systemet