Er wordt een veranderend deel van een zwart-wit afbeelding gekleurd.
Je ziet in dit filmpje (00:03:02) hoe het zwart-witte deel in Photoshop wordt gemaakt uit het gekleurde deel met de kanaalmixer.
Het resulaat van de reeks zie je in dit filmpje.
Het HTML-document en daarmee de DOM wordt opgezet.
Naast de gebruikelijke elementen als de kop en de navigatie, is er een div met als id houder, waarbinnen een div zit met de id venster. De houder toont de zwart-witte achtergrond, terwijl het venster het gekleurde deel gaat tonen. Omdat het venster vaak kleiner is en goed wordt gepositioneerd, ontstaat de illusie van een uitgelicht deel van de Nachtwacht.
Na afloop van dit tweede filmpje stuur je de Public link van de pagina naar t.denblanken@ma-web.nl
Eerst de kleur en de achtergrond van de body instellen.
Met een extern stijlblad wordt de container even breed gemaakt als de afbeelding en gecentreerd op de pagina.
#houder krijgt de zwart-witte afbeelding als achtergrond en precies diens afmetingen.
#venster krijgt kleinere afmetingen en wordt midden in de #houder geplaatst. Hiervoor is absolute positionering nodig. Dat werkt dan op zijn beurt weer als de positie van #houder relatief is.
Om de illusie compleet te maken wordt de achtergrondafbeelding van #venster zo ver terug-geschoven als hij zelf verplaatst is.
De kop wordt opgemaakt met Webfonts van Google.
Het menu wordt een horizontaal menu. Omdat het nog een ongeordende lijst is, wordt de list-style-type eerst op none gezet.
Om de items naast elkaar te krijgen, geef je ze een float: left. Als de nav een achtergrond zou hebben gehad, zie je die niet meer. Door de float, 'voelt' de overige elementen de list-items niet meer. Geef de nav dus zelf een hoogte mee.
De opmaak van de tekst doe je onder 'nav a' : de kleur, onderstreping de hoogte en de line-height met dezelfde waarde.
Geef het item ook een display block mee om de complete ruimte in te nemen.
Is het werkend, dan kun je met nav a:hover eenvoudig een rol-overeigenschap maken.
Tussen de items komt een streepje met de border-right eigenschap in de nav li. Om ook links een dergelijk streepje te hebben bij het eerste item doe je dat met ul li:first-child.
Hier nog enkele voorbereidingen voor het jQuery script.
Je ziet hier hoe Komodo met Snippets werkt. Dit gaat aan de hand van de toevoeging van het HTML5Shiv script.
Als tweede stuk wordt jQuery gekoppeld van een extern bestand.
Tot slot worden de links in het menu van id's voorzien, zodat het script kan vaststellen op welke link geklikt wordt, waarna de gewenste acties kunnen worden aangeroepen.
Het script in jQuery werkt als je alles plaatst in de document.ready voorwaarde.
Er wordt in een event-handler gewerkt: als er op een knop geklikt wordt, vinden er handelingen plaats.
De handelingen bestaan uit het aanpassen van de left-positie en de top-positie van het venster. De waarden voor deze aanpassingen worden uit Photoshop gehaald
Om dit te laten animeren, krijgt het venster in het stijlblad enkele transitie-eigenschappen mee: -webkit-transition: left 2s, top 2s, background-position 2s;
Voor gebruikers van Firefox wordt dit: -moz-transition: left 2s, top 2s, background-position 2s;
Ook de achtergrond-positie wordt aangepast: er moet weer gecorrigeerd worden voor de verplaatsen.
Behalve achtergrond-positie, linker-positie en boven-posite, worden ook de breedte, de hoogte en de kromming van de hoeken geanimeerd.
De transitie-eigenschap is nog maar net aanwezig. Ze moeten voor de verschillende browsers worden aangeroepen.
IE ondersteunt dit nog niet. De inhoud verandert daar wel, maar niet met een overgang.
Nu er een animatie klaar is, kunnen we snel een andere bij maken. We kopiëren de acties met de event-handler en passen de id van de knop aan, en vervolgens ook de waarden voor positie, achtergrondpositie, hoekafronding, breedte en hoogte aan.
We kunnen ook een animatie laen plaatsvinden bij de start van het document: de handelingen moeten dan slechts uit de event-handler gekopieerd worden.
Er ontstaat echter wel een hele litanie aan acties.
Als eerste wordt er een array van objecten gemaakt.
elk object heeft meerdere eigenschappen, zoals linkerpositie, rechterpositie, hoogte, breedte en rand-kromming.
In de volgende stap maken we een functie, die deze objecten verwerkt.
De functie bestaat uit 2 delen. Eerst de waarden uit het object halen en aan variabelen toekennen. Hierbij moet er gezorgd worden dat het passend wordt voor de CSS-waarden.
In de tweede stap wordt aan het venster de verschillende CSS-waarden toegekend.
De functie moet nog worden aangeroepen.
Als het werkt, kun je de functie eenvoudig aanroepen voor de andere objecten.
Aan de schuivende beelden wordt de laatste hand gelegd.
Eén van de gebieden schuift buiten het vlak. Dan blijkt de gekleurde achtergrond zich te herhalen. Dat is met een no-repeat in #venster snel te verhelpen.
Als de pagina op ware grootte wordt weergegeven, blijkt dat het venster na een klik op een knop telkens naar boven schuift.
Dit komt door de actie, die de klik teweegbrengt.
Door in het script 'return false' mee te geven wordt die gebruikelijke actie niet uitgevoerd.
Plaats je resultaat on-line, bijvoorbeeld in de Public map van je Dropbox.
Stuur een link van de pagina (als dat nog niet gedaan is) naar t.denblanken@ma-web.nl.
In de Public map van Dropbox vind je die link door met je rechter muisknop op het bestand te klikken en te kiezen voor: Dropbox >> Copy Public Link.
Volgende training