In deze reeks worden meerdere kaarten geplaatst, die via CSS kunnen worden omgedraaid.
De interactie gaat via Javascript.
In het tweede deel wordt het geheel nog dynamischer door het gebruik van JSON en jQuery en zie je een begin van object ge-oriënteerd JavaScript.
kaarten draaien 1: de eerste kaart (00:29:53)
We maken een kaart met 3D CSS transities.
De kaart bestaat uit een voor- en achterkant, die apart in te vullen zijn.
Het geheel staat binnen een wrapper-div, waar later nog meer kaarten bijgeplaatst kunnen worden.
Omdat van de kaart zowel de voor- als achterzijde moet mee-draaien, krijgt deze als webkit-transform-style de preserve-3D mee.
Tot slot komt er een script dat een klik verbindt met de toename van de rotatiehoek met 180 graden.
Doordat de webkit-transform op de transitions staat ingesteld, zie je een animatie.
kaarten draaien: de vormgeving verder verfijnen (00:03:32)
Het stijlblad wordt verder aangepast.
De afbeelding komt op een vaste positie van de onderkant en de kop krijgt een betere plaats.
Je zou ook de kop op de achterzijde transparanite kunnen meegeven.
kaarten draaien 3: een onoverzichtelijk script (00:06:23)
Hier zie je hoe het script voor meer dan 1 kaart zou kunnen.
Je ziet hier ook dat deze benadering niet tot een goed verwerkbaar script leidt.
Het script dijt uit met gedeclareerde variabelen en voor iedere kaart een eigen functie.
Dat moet handiger kunnen. Alleen al om fouten te vermijden en het script op termijn te kunnen onderhouden.
kaarten draaien 4: een object maken (00:06:49)
Om het script hanteerbaar te maken, maken we een object Kaart.
In dit het object de methode om te draaien toegevoegd.
Daarna kun je het voor elke kaart met 1 korte regel een instantie aanmaken, die functioneert:
var kaart = new Kaart();
kaarten draaien 5: wat er met JSON mogelijk is (00:01:50)
De opdracht met de kaarten van de vorige reeks wordt opnieuw gedaan, maar nu dynamischer.
Er wordt gebruik gemaakt van jQuery en een JSON-object.
In het json-bestand staan de gegevens van elke kaart als een array van objecten. Elk object bestaat uit paren van eigenschappen met waarden.
Hiermee blijkt het net zo goed mogelijk alle kaarten te laten verschijnen en te laten draaien. Je hebt dan wel mogelijkheden een en ander dynamischer te maken.
kaarten draaien 6: vanuit het JSON-document de kaarten plaatsen (00:12:52)
Met ajax() worden de kaarten geplaatst.
Dit gebeurt op een werkende webserver, type GET. geef ook de url mee en de naam van de functie die moet werken als de json met succesvol is geladen.
Met console.log is het proces te volgen en te controleren.
Met jQuery wordt de tafel geselecteerd.
Daarin met een for-lus alle kaarten geplaatst. Met daarin de class en de kale html voor voor- en achterkant. Als het goed is staan er na afloop het juiste aantal kaarten in de DOM.
kaarten draaien 7: de verschillende inhoud uit het JSON aan de kaarten toevoegen (00:06:31)
De voorkant van de kaarten moet nu ingevuld.
Uit de json-data destilleren we het opschriften en de namen van de afbeeldingen.
De string html wordt opengebroken en de gegevens worden ingevoegd.
kaarten draaien 8: de kaarten een ID geven (00:01:59)
Om met het script te kunnen werken moeten er ook id's aan de kaarten worden toegevoegd.
Elke id bestaat uit de string 'kaart' met daaraan het kaartId uit de json-data. Via attr() wordt dit alsnog toegevoegd.
kaarten draaien 9: object-georiënteerd (00:06:34)
Om de kaarten functionaliteit mee te geven, maken we een constructor.
Daarin zitten weer variabelen en een methode draaien. Voor elke kaart wordt een instantie gemaakt vanuit de constructor met new().
De methode draaien() wordt binnen de constructor aangeroepen met een on-event.
kaarten draaien 10: automatisch na elkaar draaien na het laden (00:03:16)
De kaarten liggen bij het begin open. Het script zou ze eigenlijk snel na elkaar moeten draaien, zodat de voorkant gedekt is.
We voegen binnen de constructor een nieuwe functie in, met als argument de vertraging.
Deze bepaalt hoe lang de setTimeOut() moet wachten met het draaien.
Als argument nemen we dan de id, vermenigvuldigd met 200ms mee.
