Ronddraaiende kubus
HTML
CSS
JS
Hiernaast zie je een ronddraaiende kubus met daarop een reclame-uiting voor deze website.
Op deze bladzijde wordt uitgelegd hoe je zoiets maakt voor je eigen website. De code kun je downloaden om zelf te gebruiken.
Inspiratie en bron: Webdesigner Magazine nr. 67 (juni 2014) pag. 61.
- Er worden twee items besproken:
- De werking van het script, in algemene termen.
- Inbouwen in je eigen site.
- De werking van het script
- Het script bestaat uit HTML en CSS. Er komt geen JavaScript aan te pas.
- De CSS staat in de file style456.css. Je linkt die in de <head>.
- Je kunt de naam veranderen in iets anders als je dat wilt. Voor je eigen toepassing moet je hier het een en ander aan wijzigen.
- De HTML staat in de <body>. Helemaal bovenin is een prima plaats. De plaats op het scherm wordt bepaald met CSS.
- De draaiende kubus wordt gemaakt met <div>-tags met id's en classes, die worden opgemaakt met CSS.
- De kubus wordt gemaakt met de classes face1 tot en met face6. Omdat de kubus draait om een verticale as, zijn face3 en face6 nooit zichtbaar. Ze zitten erbij voor de volledigheid.
- De content binnen face1 tot en met face6 verschijnt op de zijvlakken van de kubus. Je kunt daar in principe
alle geldige HTML in zetten.
face3 en face6 bevatten alleen een non-breaking space.
- De <div>'s voor de de zijvlakken van de kubus worden bij elkaar gehouden door een wrapper met de naam spinner. Daardoor is het mogelijk om alle zes de kubus-vlakken tegelijkertijd te animeren. Dat gebeurt met @keyframes met de naam spincube.
- De animatie duurt 5 seconden. De beweging is gedurende 70% (= 3.5 seconde) en wacht daarna gedurende 30% (= 1.5 seconde). Dit gaat oneindig lang door.
- spinner is ingebed in de wrapper stage. Die wordt gegruikt om spinner te positioneren in het document.
- Inbouwen in je eigen site
- Link de CSS-file style456.css in de <head>.
- Zet de HTML-code zoals hieronder is getoond in de <body>.
- Pas de CSS aan aan je eigen voorkeuren.
- Bij het opmaken van de kubus moet je het volgende in de gaten houden:
- In #stage: height en width moeten aan elkaar gelijk zijn.
Het is leuk om eens te experimenteren met deze waarden, vooral om ze ongelijk aan elkaar te maken. Houd er rekening mee dat het boven- en ondervlak (.face3 en .face6 zich onvoorspelbaar gaan gedragen. - In #spinner div: height resp. width moeten gelijk zijn aan height resp. width in #stage.
- In #spinner .face…: Het argument van translateZ() is helft van height (en width) in #stage.
- In #spinner: De waarden voor transform-origin moeten zijn:
width/2 height/2 0 - De grootte van het font en regelhoogte kies je zodanig dat de tekst op de kubus goed leesbaar is. Zorg ook voor een goed (kleur-)contrast tussen de tekst en de achtergrond.
- De schaduw langs de randen van elk kubusvlak moet niet te prominent aanwezig zijn. In het voorbeeld heeft deze een opacity van 0.6. Dat geeft een mooi resultaat.
- In #stage: height en width moeten aan elkaar gelijk zijn.
- Voor een echt aansprekend effect in bijvoorbeeld een presentatie:
- Maak de kubus schermvullend en centreer hem op het scherm.
- Laat de kubus niet te snel draaien, anders wordt de informatie op de kubus onleesbaar.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en voornamelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>)
(Zet dit in de <BODY>)<link rel="stylesheet" href="style456.css">
<div id="stage">
<div id="spinner">
<div class="face1">
<img src="bbl.png" height="30" width="75"
style="margin-top:25px">
</div>
<div class="face2">HTML</div>
<div class="face3"> </div>
<div class="face4">CSS</div>
<div class="face5">JS</div>
<div class="face6"> </div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb456.zip, 3098 bytes.
