Ellips met rotatie-effect
Voorkant
Hierboven zie je een ellips. Als je er op klikt klapt die om. Als je er nog een keer op klikt klapt die weer om, zodat
de oorspronkelijke ellips weer te zien is.
Op deze pagina leg ik uit hoe je dit maakt. De code kun je downloaden om zelf te gebruiken.
- Besproken wordt:
- De oorsprong van het script.
- De werking van het script, in globale termen.
- Inbouwen in je eigen site.
- De oorsprong van het script
- Het script heb ik ooit eens gevonden op jsbin.com. Het is gemaakt door een anonieme ontwikkelaar die het niet meer onderhoudt.
- Bij de implementatie op deze website is de code geschoond. Overbodige zaken zijn verwijderd.
- De CSS bevat alleen zaken die door moderne browsers worden ondersteund. Alle vendor-prefixes zijn verwijderd.
- De positionering van classes binnen classes is verbeterd zodat alle browsers het correct behandelen.
- De oorspronkelijke code gebruikt jQuery 1.7.1. Voor de hier gevolgde aanpak is dat een erg zwaar pakket
(geminificeerd: 92kB), daarom is het vervangen door
W3.JS (8.6kB geminificeerd).
W3.JS is een ontwikkeling van w3schools.com. De functionaliteit komt gedeeltelijk overeen met jQuery, maar heeft (nog?) geen voorzieningen voor achterwaartse compatibiliteit.
Zie ook het item W3.JS: wat het is en hoe je het kunt gebruiken.
- De werking van het script
- De code bestaat uit CSS, HTML en één JavaScript-opdracht. Zie onder aan deze pagina.
- De HTML-code bestaat uit drie geneste <div>-tags.
- De buitenste <div>-tag heeft de class wrapper. Deze wordt gebruikt om de ellips in het document te positioneren.
- De tweede <div>-tag heeft de class container. Deze bepaalt de grootte van de ellips en bevat instellingen voor het effect (perspective en transform-style).
- De binnenste <div>-tag heeft de class ellips. Deze beschrijft de ellips: opvulkleur, randkleur, tekstkleur,
lettertype en -grootte, enzovoort. Er is ook een voorschrift voor transition:transform 1s linear. Deze bepaalt hoe
een eventueel uitgevoerde overgang verloopt.
Zie de items "Lichtgevende" schaduwen met CSS en Cirkels en ellipsen tekenen met CSS voor meer informatie. - De <div>-tag met class ellips heeft ook de event-handler onclick. Als er op de ellips wordt
geklikt wordt de function w3.toggleClass() aangeroepen. Deze voegt de class flipped toe aan de ellips, of verwijdert
deze. De class flipped zorgt er voor dat de ellips 180° om zijn verticale as draait. Omdat
de ellips een voorschrift heeft voor overgangen (transition) lijkt het alsof de ellips omklapt.
w3.toggleClass is een methode van het W3-object. - Om aan te geven dat de ellips 'klikbaar' is, verandert de muisaanwijzer van een pijl in een handje als de muis zich op
de ellips bevindt.
- Inbouwen in je eigen site
- Download W3.JS.
- Zet de code uit de downloadfile in je webdocument.
- Pas de CSS aan aan je eigen wensen.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.wrapper {
width:400px;
margin:10px auto;
}
.container {
width:300px;
height:140px;
margin:auto;
perspective:700;
transform-style:preserve-3d;
}
.ellips {
position:relative;
top:0; left:0; right:0; bottom:0;
border:10px solid white;
text-align:center;
font-size:40px;
line-height:110px;
color:white;
border-radius:50%;
background:forestgreen;
cursor:pointer;
transition:transform 1s linear;
}
.flipped {
transform:rotateY(180deg);
}
</style>
<script src="w3.js"></script>
(Zet dit in de <BODY> op de plaats waar De ellips moet verschijnen).
<div class="wrapper">
<div class="container">
<div class="ellips"
onclick="w3.toggleClass('.ellips','flipped')">Voorkant</div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb467.zip, 602 bytes.
Opmerking:
De geminificeerde versie van W3.JS die op deze site wordt gebruikt, is gemaakt met eMinifier v1.1.0. Dit windows-programma
wordt niet meer onderhouden en is verdwenen van internet.
