Respectievelijk afbeelding, tekst en tekst

Omwille van de laadsnelheid van de pagina is het niet verstandig om op een afbeelding boven de fold een animatie te plaatsen die beweging veroorzaakt.

De hier gebruikte animatie toont eerst de afbeelding in grijstinten en laat de kleur langzaam opkomen. Dit lijkt geen effect op de snelheid te hebben. De code vind je weer in kolom 3.

@keyframes keyframe-gray {
  0%   {filter: grayscale(100%);}
  100% {filter: grayscale(0%);}
}
section.imgBlur .in-view.col3-1 {
  animation: keyframe-gray 3s;
  animation-timing-function: ease;
}

de CSS begint met section.imgBlur. De class imgBlur is de class die meegegeven is aan het blok. Daarna zie je de class .inView. Deze class zorgt er voor dat de animatie uitgevoerd wordt zodra de afbeelding in beeld komt. De class col3-1 wordt automatisch toegevoegd om een blok met 3 kolommen, kolom 1.