Online animation-generators

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

Het volgende wat we nu gaan behandelen is het gebruik maken van online generators.

Waarmee je zelf een animatie kunt maken.

Ik heb een aantal url's verzameld.

Die de moeite waard zijn om eens te gaan bekijken en ermee te experimenteren.

Ik wil beginnen met een overzichtspagina waarop bruikbare css generators worden behandeld.

Op deze webpagina staan alle interessante css generators.

En de één richt zicht zich meer op specifieke css vormgeving voor tekst.

Deze is voornamelijk voor het maken van buttons.

Voor verlopen, voor effecten etcetera.

Deze lijst is absoluut een aanrader.

Om stuk voor stuk al deze pagina's eens een keertje door te nemen.

En te kijken en te bookmarken welke voor jou interessant zijn.

Op de website 'cssanimate.com', vond ik een generator die wel heel erg uitgebreid was.

Je kunt natuurlijk meteen van alles gaan uitproberen.

Je kan ook eerst een example gaan bekijken hier onderin.

Dan kies ik bijvoorbeeld voor een bounce. En dan kan ik deze afspelen.

En dit is de bounce.

Ik kan vervolgens een andere kiezen, 'swing', ook afspelen. En dit is de 'swing'.

Deze swing wordt nu meteen toegepast in de timeline.

Dus ook een manier om deze pagina te leren begrijpen en hoe je hem kunt gaan instellen.

Op deze timeline kun je keyframes aanmaken.

Deze keyframe staat dan op zoveel procent van de timeline.

Dit is een keyframe, dit is een keyframe en dit is een keyframe.

Je ziet vervolgens rechts bovenin de aparte keyframes.

Dus ook op deze manier kun je naar de aparte keyframes navigeren.

Je hebt hier de animation-properties. Dat is voor de totale animatie.

Je kunt bepalen hoe lang deze moet duren. Hoe vaak hij herhaald moet worden.

En ook de timing-function eraan geven. Je kiest bijvoorbeeld voor 'ease-in'.

En je kunt het rotatiepunt instellen, dat is wel heel erg handig.

Als je een element wil roteren en je wilt hem bijvoorbeeld om een hoekpunt roteren of juist vanuit het middelpunt.

Vervolgens kun je hieronder per frame de properties instellen.

De positie links, boven, de rotatie, schalen, schuintrekken en ook de opacity.

Het is een idee om op basis van een bestaande animatie.

Je eigen aanpassingen te maken door extra keyframes in te voeren.

Ik kan hier bijvoorbeeld zelf een keyframe toevoegen op de pagina.

En deze bijvoorbeeld een andere rotatie meegeven.

En dit levert dan een andere animatie op. Die je zelf hebt aangepast.

Nou hieronder vind je dan vervolgens de volledige code.

En deze moet je dan kopiëren en die kun je dan naar je eigen document brengen.

Klik eenmaal op de knop ' Copy code' om alle code te kopiëren.

En we keren terug naar ons eigen document.

Afhankelijk van wat je aangevinkt hebt. Krijg je alle benodigde prefixes erbij.

Dus op dit moment is het de standaard css schrijfwijze.

De -webkit- voor Chrome en Safari. De -o- prefix voor Opera. De -moz- prefix voor Firefox.

En de -ms- prefix voor Internet Ecxplorer.

Voor de moderne browser voldoet het om alleen maar de Chrome/Safari -webkit- prefix te gebruiken.

Omdat Opera en Firefox deze ondertussen ook ondersteunen.

Alleen voor Internet Explorer zal je bijvoorbeeld nog de aparte -ms-prefix kunnen gebruiken.

Ik plak deze code in mijn 'animations.css' stijlblad, dat doe ik helemaal onderaan de pagina.

Dit is de prefix voor internet

Explorer.

De prefix voor Opera, de prefix voor Chrome en Safari en de prefix voor Firefox.

Dit zijn ze dus allemaal nog apart.

Dan volgt nu de officiële css schrijfwijze van de animatie.

En dit is vervolgens de toepassing van de animatie.

Hij wordt nu toegepast op een class="element-animation".

Maar ik wild at deze bijvoorbeeld toegepast gaat worden op de taart bovenin, de afbeelding.

Dus ik knip ook weer deze uit deze niet bestaande class weg, want die heb ik gewoon gekopieerd.

Ik zoek vervolgens in mijn opmaak stijlblad.

Dus ik bewaar mijn 'animation.css' stijlblad. Want die is uitgebreid met nogmaals een animatie.

En ik ga naar mijn 'opmaak.css'.

En ik vervang de huidige toegepaste animatie voor deze nieuwe.

Ik bewaar dit document en ik bekijk dit voorbeeld in de browser.

Ik had bij het linken van mijn stijlblad ervoor gezorgd dat,

eerst het stijlblad met de 'animations.css' werd ingelezen.

En daarna volgde mijn 'opmaak'. Dat is de reden dat nu de browser.

Bij dit element is aangekomen en hij heeft als opmaak ingelezen dat

de animation 'animationFrames' afgespeeld moet worden.

Hij deze al kent, want eerder is hij deze al tegengekomen.

In het stijlblad 'animation.css'.

Want daar staan met @keyframes, de animation- naam 'animationFrames' helemaal beschreven.

Op zich kan ik het gebruik maken van extra css-stijlbladen voor specifieke functies.

Als bijvoorbeeld het gebruik maken van animaties absoluut aanraden.

Wil je een animatie overzichtelijk houden.

Dan is het toch vaak prettig om deze op nieuwe regels uit te schrijven, zoals je nu ook in het voorbeeld ziet.

Zo heb je heel snel een overzicht over het soort animatie.

Maar dit zorgt er wel voor dat je css-stijlblad enorm lang wordt.

Dus als je dan voor je algemene vormgeving, de layout en de teksten etcetera.

Een apart stijlblad maakt en ook voor de animaties een apart stijlblad.

Dan hou je het voor jezelf wel een stuk overzichtelijker.