CSS animaties en filters

CSS Transition

De eenvoudigste animatie is een transition, bijvoorbeeld bij een hover. Voeg dit toe aan de css van het element (bijvoorbeeld de a:link of een custom class zoals .vergroot). Alle eigenschappen worden nu geanimeerd, tijdens de hover. Meer info op W3-schools.

    .vergroot		{transition: all 0.5s; }
    .vergroot:hover	{transform:rotate(-5deg) scale(1.8);}

In de HTML staat de class dan zo bij een plaatje:

<img src="plaatje.jpg" class="vergroot" />

Wil je een zoom effect (het zogeheten Ken Burns effect) dan moet er nog een extra div met overflow:hidden omheen.

<style>
   .zoom { overflow:hidden; width:100px; height:75px; }
</style>

<div class=zoom>
<img src="plaatje.jpg"  class="vergroot" />
</div>

CSS animation en @keyframes

Een andere manier van CSS-animatie is met keyframes. Bijvoorbeeld tijdens het laden van de pagina. Je voegt animation: toe aan de css van het element, je geeft het een naam (in dit voorbeeld fadein) en een snelheid (in dit voorbeeld 2 seconden):

body {animation: fadein 2s;}

Vervolgens geef je met @keyframes aan wat de verschillende stappen van fadein zijn, met from en to, of met percentages. Er zijn veel opties, je kan bijvoorbeeld een delay aangeven door een tweede tijd te vermelden, achter de eerste. Zie W3-schools. Hier het voorbeeld van een fadein met opacity:

body {animation: fadein 2s;}
@keyframes fadein {
   0%  { opacity: 0; }
   100% { opacity: 1; }
   }

CSS Filters

Je kan css filters gebruiken om een plaatje te filteren, bijvoorbeeld in zwartwit of met een blur. Meer info over filters. In het voorbeeld hieronder is het plaatje zwartwit, maar wordt het kleur als je met je muis eroverheen gaat:

.zw		{ filter: grayscale(1); }
.zw:hover	{ filter: grayscale(0); }

in plaats van (1) of (0.5) kan je ook  (100%) of (50%) zetten

In de HTML is er bij de img het attribuut class=”zw” toegevoegd.
Je kan ook ALLE plaatjes in een bepaalde div dit filter geven, als volgt:

.divnaam img { filter: grayscale(100%); }

Andere filters zoals blur gaan net zo:

.blur		{ filter: blur(0); transition: all .5s; }
.blur:hover	{ filter: blur(5px);}

Hieronder Google Maps met filter:sepia(100%); opacity:0.7;

Functies toevoegen met Javascript

Animaties kunnen worden uitgevoerd bij het laden van de pagina of bij een hover, maar als je iets wil animeren bij een klik op een ander item, of de animatie pas wil uitvoeren als je er naartoe scrollt, dan heb je Javascript nodig. Op justinaguilar.com wordt dat uitgelegd en kan je het css-framework en de scripts downloaden. In die bestanden zitten al allerlei soorten animaties, zodat je ze alleen nog maar hoeft aan te roepen.

Scroll animatie: jQuery scrollto, Parallax

Een vorm van animatie is een scrollto-script. Bijvoorbeeld in één lange pagina, waar je via het menu met een animatie naar een plek scrollt. Bekijk ScrollMagic waar allerlei scroll- en parallax-effecten inzitten. Scroll animatie kan ook met pure CSS, maar voorlopig helaas alleen in Firefox.

Als jQuery al geladen is (zie hieronder) kan je dit script ONDERAAN je code inplakken en aanpassen. In dit voorbeeld scroll je naar de #wrapper als je op .hero klikt.
Meer info.

<script>
   $(".hero").click(function() {
 $('html,body').animate({
 scrollTop: $("#wrapper").offset().top},
 'slow');
 });
 </script>

jQuery laden vanaf Google server

jQuery is een bibliotheek met Javascript-functies. Je kan deze jQuery library op je server neerzetten en aanroepen, of je kan die van Google gebruiken door dit in de <head> te zetten:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>