8 oktober 2015

Loading image met SVG en CSS3 animaties

development
ux / design

Mijn werk als front end developer bestaat uit het tot leven wekken van een ontwerp van een website. Natuurlijk is het volgens het ontwerp op het scherm krijgen van letters, afbeeldingen en kleuren een belangrijk onderdeel. Maar de dynamische elementen die veranderen op basis van de acties van de gebruiker maken front end een echte uitdaging.

Een website ontwerp wordt in de meeste gevallen opgeleverd met een aantal platte afbeeldingen van de verschillende soorten webpagina’s en de elementen. Soms blijven die elementen statisch, maar andere kunnen ook van inhoud en uiterlijk veranderen. De reden kan zijn om de boodschap van extra informatie te voorzien of om de bezoeker aan te zetten tot actie. Een goed voorbeeld zijn  aanwijzingen van fout ingevoerde gegevens bij het versturen van een formulier of het uitklappen van een dropdown menu.

De manier waarop deze elementen van inhoud, kleur en vorm veranderen kan op verschillende manieren worden uitgevoerd, waarbij de ene manier beter bij het ontwerp past dan de ander. Het is dan aan de front end developer het ontwerp op de juiste manier te interpreteren en daar passende transities bij te ontwikkelen. Ik hoop daar in deze en de komende blogposts een beetje inzicht in te kunnen geven.

Loading image

In deze post wil ik een korte tip geven van hoe je met iets kleins als een speciaal voor een klant ontwikkelde loading image, de website als geheel een stuk persoonlijker uitstraling kunt geven. Je kunt op internet namelijk een hele hoop gratis loading  images vinden die je op bijna iedere website wel ziet. Iedereen kent wel de ronddraaiende stipjes en cirkeltjes, maar het is toch veel leuker als een met zorg uitgedacht en geanimeerd elementje verschijnt op het moment dat je (onverhoopt) op de website moet wachten.

Case

Een organisatie in de maritieme industrie heeft een website waar men veel afbeeldingen op kan bekijken of uploaden. Denk je aan een loading image speciaal voor de klant. Dan zou je bijvoorbeeld een element uit het logo kunnen animeren. Een ander idee is om een onderwerp uit de sector te gebruiken als loading image. Een voorbeeld in dit geval is een ronddraaiende scheepsschroef of golvend water.  In dit voorbeeld ga ik van een klein statisch golfje in de vorm van een SVG bestand, een golfje maken dat continu blijft bewegen:

 

Stap 1: teken de SVG

In Adobe Illustrator kun je vrij gemakkelijk een golf een tekenen:

  1. Teken een rechte lijn en kies onder Effect > Distort & Transform > Zig Zag.
  2. Kies met de popup die verschijnt de juiste instellingen, totdat je een golfje hebt gemaakt
    Let wel op dat het golfje als je het begin tegen het einde aan zou leggen wel mooi aansluit. Dit hebben we namelijk nodig om er een vloeiende animatie van te kunnen maken.
  3. Kopieer dit golfje nog twee keer en zet ze op gelijke afstand onder elkaar.
  4. Sla het bestand op als SVG 1.1.
  5. Ga naar een online tool (bijv. https://jakearchibald.github.io/svgomg/) om de SVG op te schonen en kleiner te maken. In dit geval is het bestand niet zo heel ingewikkeld, maar het helpt wel om een hoop van de XML in het bestand op te schonen. Mocht je het bestand later willen gebruiken om er wat meer styling op los te laten of anders willen embedden, dan wordt dat hierdoor een stuk makkelijker.

 

Stap 2: de HTML

We maken twee divs aan:

<div class="loader__mask">

 <div class="loader"></div>

</div>

 

Een div die het plaatje bevat en een die over de ander div heen ligt en werkt als een masker.

Stap 3: de CSS

Voor de div die het plaatje bevat stellen we background-size zo in dat hij de achtergrond helemaal beslaat. Zo zorg je ervoor dat de SVG precies in de div past. De schaalbaarheid van de vectorafbeelding komt hier dus goed van pas: er vindt geen kwaliteitsverlies plaats en blijft mooi op beeldschermen met een hoge resolutie.

In de CSS roepen we ook een animatie aan die de background-position van de achtergrondafbeelding animeert over een periode van 5 seconde en voor een oneindig aantal keer. Je kunt met de tijd spelen voor het bereiken van het gewenste effect.

.loader {

            width: 148px;

            height: 100%;

            position: relative;

            overflow: hidden;

            background: url(img/waves2.svg) repeat-x 0 0;

background-size: contain;

            -webkit-animation-name: bg--move;

            -webkit-animation-duration: 5s;

            -webkit-animation-timing-function: linear;

            -webkit-animation-iteration-count: infinite;

            animation-name: bg--move;

            animation-duration: 1s;

            animation-timing-function: linear;

            animation-iteration-count: infinite;

}

Let er op dat de afstand, waarover je de afbeelding verplaatst even groot is als de breedte van de div, anders stopt de animatie eerder dan dat de afbeelding volledig een keer over het scherm is verplaatst en zie je geen vloeiende animatie meer.

@-webkit-keyframes bg--move {

from {

                        background-position: 0 0;

            }

            to {

                        background-position: 148px 0;

            }

}

@keyframes bg--move {

from {

                        background-position: 0 0;

            }

            to {

                        background-position: 148px 0;

            }

}

Door het masker de juiste breedte te geven, dekken we een deel van het golfje af, waardoor de illusie ontstaat dat het golfje echt beweegt en niet meer op een plaatje lijkt dat voorbij schuift.

.loader__mask {

margin: 100px auto;

width: 52px;

height: 62px;

overflow: hidden;

}

Zie hier een werkend voorbeeld:

Geschreven door: Arjen
Cookies?

We gebruiken cookies om het functioneren van onze website te verbeteren. De gegevens worden volledig anoniem verzameld.