CSS3 – Bouncing-effect met translate & cubic-bezier

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 leuke is dat negatieve getallen ook toegestaan zijn en hiermee kun je bijvoorbeeld leuke bouncing-effecten bereiken.

Als ik nu deze curve bijvoorbeeld even ver buiten het venster trek. En deze ook.

Dan zie je dus dat het hier een hoger getal dan oplevert. En normaal is het maximale.

Maar dat aan het begin de curve naar -. gaat.

Als ik deze nu met elkaar vergelijk dan zie je het resultaat hiervan.

Hij begint dus zelfs buiten het beeld. En bounced eigenlijk te ver door en dan weer terug.

Ook nu kan ik deze getallen kopiëren door hier te klikken op SAVE.

Vervolgens het toetsenbord te gebruiken met Commando of Control C.

Dan kan ik hier weer uit weg en dan kan ik dit gaan toepassen in een document.

En je kunt het vooral goed zien als je bijvoorbeeld een animatie gaat maken tussen twee posities.

En dat doe ik voor in het voorbeeld document.

Dan haal ik eerst de background-color en de transition voor de background-color weg.

En ook de margin die op dit moment deze div centreert, die haal ik ook weg.

Dan wordt deze div gepositioneerd links bovenin de pagina.

Er zijn twee manieren waarop je kunt positioneren.

Daarvoor kun je de position-eigenschappen gebruiken, als left, right, top en bottom.

En deze werken dan samen met een position absolute, relative of static.

Maar de meesten gebruiken voor het verplaatsen van elementen de css-eigenschap 'transform'.

En dan met de waarde 'translate' om in een animatie een element te verplaatsen. En die doe ik als eerste voor.

Ik begin met de transform-eigenschap en dan gebruik ik daarvoor 'translate'.

En dan voer je tussen de twee haakjes,

eerst de horizontale verplaatsing in, dan een komma, en daarna de verticale verplaatsing.

Horizontaal wil ik niet dat hij verplaatst wordt, dus daarvoor kan ik een gebruiken. Dan een komma.

En als tweede getal bepaal ik de verticale verplaatsing.

Dan wil ik hem bovenin uit beeld laten verdwijnen, gedeeltelijk.

En ik gebruik een negatief getal, bijvoorbeeld - pixels.

Dan bekijk ik eerst het eindresultaat. Dan is dit, zeg maar, de standaard positie van mijn kader.

Zodra de bezoeker met de muis over deze div heen beweegt, wil ik dat deze naar beneden tevoorschijn komt.

Dus gebruik ik daarvoor mijn pseudo-class. En ik schrijf hierin ook weer een transform-eigenschap en ook weer 'translate'.

En tussen de haakjes voer ik dan dus nu de nieuwe positie in. Ik wil dat deze naar beneden tevoorschijn komt.

Dus hij hoeft niet horizontaal verplaatst te worden. Maar ik wil dat hij verticaal op komt te staan.

Dus dat hij dan weer keurig netjes bovenin de linker hoek staat.

Als ik dit nu vervolgens doorvoer en ik ga kijken naar het resultaat.

Dan wordt dit direct toegepast.

Nou dat vind ik wat te snel, dus daarvoor gebruiken we dan de animatie-techniek 'transition'.

En daarvoor gebruik ik dan dus de opdracht 'transition'.

Dit is de shorthand-notation dus ik zet alle waarden op de juiste volgorde achter elkaar.

Eerst moet ik de css-eigenschap beschrijven en ik wil de transform-eigenschap,

die ik voor de hover op een andere positie heb gezet, wil ik gaan animeren.

Daarna het aantal seconde. En ik gebruik hiervoor seconde.

En vervolgens wil ik dat via mijn eigen 'cubic-bezier', en ik plaats de twee haakje.

En tussen de twee haakjes kan ik nu vervolgens de waarden plakken die ik nog op mijn klembord heb staan.

Als het goed is moet dit kader nu met een soort bouncing-effect tevoorschijn komen.

En als ik er met mijn muis weer vanaf beweeg dan wordt diezelfde animatie omgekeerd afgespeeld.

En als ik er met mijn muis weer vanaf beweeg dan wordt diezelfde animatie omgekeerd afgespeeld.