Collage animatie met transition en transform

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

Volgende video: Hoe werkt de 'animation'

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.

In deze video behandelen we het schrijven van de benodigde prefixes voor de verschillende browsers.

Maar hiervoor maken we eerst een collage met een animatie.

In de local root folder, die behoort bij deze video, staan afbeeldingen die we hiervoor zullen gebruiken,

De 'barrierbg.jpg' gebruiken we als achtergrondafbeelding van een div.

In deze div plaatsen we vervolgens de twee afbeeldingen.

'Gate.png' en daarna de 'bar.png', want deze moet bovenop komen te staan.

In eerste instantie zullen deze twee afbeeldingen dus gewoon, keurig netjes binnen de div geplaatst worden.

Met de eigenschap 'transform' gaan we deze afbeeldingen vervolgens positioneren.

Bijvoorbeeld ongeveer op deze manier.

En daarna is het de bedoeling dat de slagboom open gaat., zodra de bezoeker met de muis hier overheen beweegt.

Daarvoor gebruiken we dus een pseudo-class. Het rotatiepunt van de slagboom.

Moet bij de verbinding met de paal komen.

Dus zullen we het standaard -punt moeten gaan verplaatsen, want deze ligt normaal altijd in het midden.

Met de eigenschap 'transform-origin'.

Vervolgens gaan we ervoor zorgen dat deze pagina er in alle browsers hetzelfde uitzie.

En op dezelfde manier zal werken.

Binnen de body-tag, plaatsen we in eerste instantie voor de achtergrondafbeelding een 'div'.

En deze geven we een 'class' mee, class="container". En dan sluiten we deze div af met einde div.

Binnen deze div plaats je dan vervolgens een afbeelding.

Hiervoor gebruik ik dus het html 'img'. Je geeft deze een 'class' mee, bijvoorbeeld 'gate'.

En je geeft aan waar de afbeelding zich bevindt.

Dus in dit geval in het mapje 'img' staat een bestand en die heet 'gate.png'.

En je geeft de breedte op van pixels en een hoogte, in dit geval, pixels.

En dit zelfde doe je ook voor de tweede afbeelding.

Deze geef je een andere class-naam mee, bijvoorbeeld 'bar'.

De afbeelding staat ook weer in de map 'img' en heet 'bar.png'.

Deze heeft een breedte van pixels en een hoogte van pixels.

Ik zet deze pagina om in een voorvertoning in Firefox.

En ga vervolgens mijn css-sijlen schrijven. Te beginnen met de div die onderop ligt.

Met de class="container", .container

En deze ga ik voorzien van een background-image. En ik geef hier de url op.

In de map 'img' staat een bestand en die heet 'barrierbg.jpg'.

De afbeelding heeft een breedte van pixels.

En een hoogte van pixels.

Vervolgens ga ik de afbeeldingen positioneren en ik begin met de afbeelding met de class="gate", .gate

En het positioneren. Daarvoor gebruik ik de eigenschap 'transform' met de waarde 'translate'.

Tussen de haakjes plaats ik dan vervolgens eerst de horizontale waarde.

Dus het is natuurlijk even uitzoeken, maar ik heb het opgezocht.

Die is ongeveer pixels, dan een komma. En dan de verticale waarde. En dat is pixels naar beneden.

En dan komt deze ongeveer op deze positie te staan.

Vervolgens ga ik de afbeelding met de class="bar", .bar positioneren.

Daarvoor gebruik ik ook weer de transform-eigenschap, 'transform'. Met een 'translate' waarde.

Tussen de haakjes plaats ik dan vervolgens weer de horizontale verplaatsing en de verticale verplaatsing.

Horizontaal hoeft hij niet verplaatst te worden. Hij staat eigenlijk al op de juiste positie.

Alleen hij moet nog wat naar beneden en wel ongeveer pixels.

En dan komt deze slagboom precies op de juiste plek terecht.

Ik ga een pseudo-class schrijven waarmee ik de slagboom een rotatie mee ga geven.

Dat doe ik voor de class .bar:hover

En ook nu gebruik ik daarvoor de transform-eigenschap, maar deze keer de 'rotate'.

En deze ga ik °, degrees, roteren.

Als ik nu een voorvertoning bekijk in de browser, dan werkt deze mouse-over direct.

En dan zie je dus dat de rotatie standaard plaats vindt vanuit het midden.

Dat is het nul-punt. En deze wil ik dus op een andere positie gaan plaatsen.

Namelijk aan het begin de arm van de hefboom.

En daarvoor zal ik dus de 'transform-origin' opnieuw moeten gaan instellen.

Als je wilt weten waar de positie van dit punt is.

Kun je de afbeelding bijvoorbeeld openen in een programma als bijvoorbeeld Photoshop.

En deze positie gaan opzoeken.

In Photoshop heb je een venster, die 'info'.

Via het uitklapmenu kun je naar 'Deelopties' gaan. En zorgen dat de liniaal-eenheden op pixels staan.

Soms staan deze namelijk op centimeters of millimeters. maar je moet hem op pixels zetten.

Als je dan vervolgens met de muis over de afbeelding beweegt.

Dan krijg je allerlei informatie. Waaronder ook de x-, y-positie.

Als ik kijk naar deze plek. Dan is de x-, y-positie ongeveer horizontaal en pixels verticaal.

Deze gegevens kan ik nu gebruiken om mijn origine-punt te wijzigen.

Keer ik weer terug naar mijn bestand.

Ik breid dus de css-regel voor de class="bar" uit, met een 'transform:origin'.

De horizontale waarde was pixels. En de verticale waarde was pixels.

Als het goed is roteert de hefboom nu om dit gewijzigde punt.

Maar zoals je ziet wordt deze dan ook weer terug geplaatst op het originele punt.

En dat betekent dat we bij de pseudo-class, naast 'rotate'.

Ook nog een keer de 'translate' moeten plaatsen. Dus de 'translate' staat op , pixels.

Nu zou deze rotatie goed moeten werken. Hij blijft op dezelfde plek staan.

En de rotate van °. Die werkt ook.

Om hier een soepelere animatie van te maken. Maak je gebruik van de 'transition' opdracht.

Transition.

En dan begin ik in eerste instantie met het benoemen van de eigenschap.

Daarvoor kan ik dan dus de 'transform' eigenschap gebruiken.

Vervolgens bepaal ik het aantal seconde dat de animatie moet duren, seconde.

En als laatste kies ik voor een standaard waarde van 'timing-function' en dat is 'ease-in'.

Die kan ik natuurlijk altijd weer wijzigen of ik kan daar mijn eigen 'cubic-bezier' voor gebruiken. Maar ik vind deze prima.

En dan bekijk ik het eindresultaat in de browser.

En de hefboom gaat nu op een rustige manier omhoog.

Maar ook weer naar beneden als ik er met mijn muis vanaf beweeg.