Geanimeerd 3D-menu met CSS
Op deze bladzijde is een menu aanwezig. Het zit verborgen onder deze tekst. Klik op het hamburger-icon linksboven
om het te zien. De menu-items doen overigens niets.
Klik op het paars-blauwe blok dat zichtbaar blijft, om het menu weer te verbergen.
Op deze pagina wordt uitgelegd hoe je zoiets in je site inbouwt. De code kun je hier niet downloaden i.v.m. copyrights, die herpublicatie van de code verbieden. Je kunt het wel van de site van de maker downloaden om zelf gratis te gebruiken.
- Besproken worden:
- De oorsprong van het script.
- Inbouwen in je eigen site.
- De oorsprong van het script
- De code is afkomstig van tympanus.net, waar een heleboel prachtige CSS-toepassingen zij te vinden.
- Dit is een toepassing van een CSS-menu dat wordt getoond op
tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/.
Deze toepassing is de "airbnb"-versie van het menu, zoals beschreven in Webdesigner Magazine 76 (mei 2015) pag. 46 - 49.
Dit blad wordt sinds november 2017 niet meer gemaakt.
De uitwerking op deze site beschrijft het origineel van tympanus.net. - Op het moment dat dit wordt geschreven is de huidige versie van deze code ongeveer 2½ jaar oud. Er wordt niet meer
aan ontwikkeld.
- Inbouwen in je eigen site
- Download de code van tympanus.net.
- Pak de .zip-file uit. Er zijn zes index.html-bestanden, die allemaal een beetje verschillend zijn. index6.html is de meest recente en werkt prima.
- Bouw de HTML-code op in je HTML-bestand zoals die in de zes index.html-bestanden wordt getoond.
- Neem de drie .css-bestanden en het bestand modernizr.custom.25376.js op in de <head>-sectie van je HTML-bestand.
- Neem de bestanden menu.js en classie.js op in je HTML-code, net vóór de </body>-tag.
- Er zijn in de CSS zes verschillende effecten geprogrammeerd, te weten:
- effect-airbnb Dit is wat op deze pagina is gebruikt. (In de downloadfile: index.html).
- effect-moveleft De pagina schuif naar links, maar blijft helemaal in beeld (In de downloadfile: index2.html).
- effect-rotateleft Als effect-airbnb, maar de pagina draait naar links (In de downloadfile: index3.html).
- effect-movedown De pagina schuift naar beneden (In de downloadfile: index4.html).
- effect-rotatetop De pagina draait naar boven (In de downloadfile: index5.html).
- effect-laydown De pagina gaat onderaan het scherm plat liggen (In de downloadfile: index6.html).
- Effecten die je niet gebruikt kun je uit component.css verwijderen.
Opmerking:
Op de site tympanus.net/codrops staan nog veel meer prachtige dingen.
