Bladeren door een boek of folder
Hier boven zie de voorkant van een fotoalbum. Als je met de muis boven de rechter zijkant komt, gaat het boek een beetje
open. Als je vervolgens klikt wordt het boek geopend.
De bladzijden met de foto's sla je om door op de rechter boven- of onderhoek te klikken. Terugbladeren doe je op dezelfde
manier, maar dan links.
Als je de kaft weg zou laten zou het een reclamefolder kunnen zijn.
Dit is een toepassing van de jQuery-plugin turn.js. Op deze pagina wordt getoond hoe je zoiets aanpakt.
De code van het voorbeeld staat onderaan de pagina. Die kun je downloaden, inclusief de plaatjes, om zelf te proberen.
- Er worden twee items besproken:
- De oorsprong van het script.
- Inbouwen in je site.
- De oorsprong van het script
- Deze jQuery-plug-in is gemaakt door Emmanuel García, een front-end developer uit Venezuela. Het script wordt beschikbaar gesteld op de turn.js-website en via GitHub.
- De site op GitHub geeft de revisies 1 t.m. 3. Dit wordt niet meer bijgehouden.
- De turn.js-website geeft versie 4, die ook op deze site is ingezet. Hier is ook een uitgebreide documentatie te
vinden.
- Turn.js is feitelijk een bibliotheek met functies die dit effect mogelijk maken. Het lijkt veel op de foto-albums
die vroeger met Flash werden gemaakt. Dit werkt helemaal met HTML5, echter niet met <canvas>.
- De code om zelf te gebruiken kun je downloaden van turnjs.com. Dit is een ongebruikelijk grote download voor dit soort zaken, nl. 20.4 MB. Dat komt doordat er uitgebreide documentatie en demo's bij zitten.
- Het voorbeeld op deze bladzijde is een bewerking van de demo "basic", gecombineerd met code om de kaft van het
boek te maken.
- Inbouwen in je eigen site
- Het gaat hier om het voorbeeld dat op deze pagina staat, en dan alleen om de code die daarvoor is aangepast.
- Omdat dit een jQuery-plug-in is. het je jQuery zelf nodig. Hier is versie 1.7.1 gebruikt, maar versie 1.3 zou moeten volstaan. Het beste betrek je die van een CDN.
- De code van de plug-in bestaat uit JavaScript en CSS. Die staat in de bestanden basicturnpage.js resp. basicturnpage.css,
die je linkt vanuit de <HEAD>.
Verder is er nog wat HTML nodig, die uiteraard in de <BODY> staat. Aan het einde van de <BODY> staat nog wat JavaScript om de plug-in te starten.
- Uit de download van turnjs.com is voor dit voorbeeld maar één bestand nodig, nl. turn.min.js. Voor deze pagina is de naam veranderd in basicturnpage.min.js. Verder gebruik je de bestanden in de download van deze site.
- De kaft maak je met een <div>-tag die class="hard" heeft. Daar kan ook tekst in, zodat je boek een titel heeft.
- Een kaft heeft en buitenkant en een binnenkant. Die moet je apart opgeven. Er zijn dus twee <div>-tags met class="hard" voor één kaft.
- Een foto zet je in een <div>-tag zonder class. Het foto-bestand zet je in een inline-style waarmee je de background-image opgeeft. Okk hier kan tekst in.
- De kaft en de foto's worden ingebed in <div class="flipbook">. Dez staat weer binnen <div class="container"> en daar staat weer <div class="flipbook-viewport"> omheen. Deze drie wrappers zorgen ervoor dat het boek staat op de plaats waar het moet staan, dat het daar blijft staan en dat het werkt.
- De tekst op de kaft en op de foto's kun je opmaken in CSS.
- Om het boek op te maken voor je eigen foto's moet je een paar dingen instellen in basicturnpage.css:
- In .flipbook-viewport .flipbook zet je width gelijk aan twee maal de breedte van de foto. Daar zet je
height op de hoogte van de foto.
Zet left op -½ × width.
Zet top op -½ × height. - In .flipbook-viewport .page zet je width gelijk aan de breedte van de foto. height zet je gelijk aan de hoogte van de foto.
- De kleur van de kaft stel je met background-color in .flipbook-viewport .page
- In .flipbook-viewport .flipbook zet je width gelijk aan twee maal de breedte van de foto. Daar zet je
height op de hoogte van de foto.
- Voor een uitgebreide beschrijving van alle mogelijkheden verwijs ik naar turnjs.com.
Het is zeker de moeite waard om kennis te nemen van de demo's in de download van die site.
- Deze plug-in heeft een onhebbelijkheid: Het boek / de folder zweeft boven de tekst van de pagina. Daarom moet je wat ruimte maken om te zorgen dat die niet onder het boek verdwijnt. Op deze bladzijde heb ik een oud kunstje gebruikt om witruimte te maken: Een transparant .GIF-plaatje van 1×1 pixel, dat is uitgerekt tot voldoende hoogte, zodat de tekst naar beneden wordt gedreven.
- Deze onhebbelijkheid zorgt er ook voor dat het boek lastig is te positioneren. Als je iets wijzigt aan de lay-out van je document, zul je de plaats van het boek apart aanpassen.
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>).
<link rel="stylesheet" href="basicturnpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="basicturnpage.min.js"></script>
(Zet dit in de <BODY>, op de plaats waar het boek moet komen).
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div class="hard">Fotoalbum</div>
<div class="hard"></div>
<div style="background-image: url(stapeltje_0.jpg)"></div>
<div style="background-image: url(stapeltje_1.jpg)"></div>
<div style="background-image: url(stapeltje_2.jpg)"></div>
<div style="background-image: url(stapeltje_3.jpg)"></div>
<div style="background-image: url(stapeltje_4.jpg)"></div>
<div style="background-image: url(stapeltje_5.jpg)"></div>
<div style="background-image: url(stapeltje_6.jpg)"></div>
<div style="background-image: url(stapeltje_7.jpg)"></div>
<div style="background-image: url(stapeltje_8.jpg)"></div>
<div style="background-image: url(stapeltje_9.jpg)"></div>
<div class="hard"></div>
<div class="hard">Einde</div>
</div>
</div>
</div>
(Zet dit helemaal aan het eind van de <BODY>).
<script type="text/javascript">
// Create the flipbook
$('.flipbook').turn({
width:500, // Width
height:187, // Height
elevation: 50, // Elevation
gradients: true, // Enable gradients
autoCenter: false // Auto center this flipbook
});
</script>
Downloaden:
Druk op de knop:
File: voorb441.zip, 78 546 bytes.
N.B.: De file basicturnpage.min.js zit niet in deze download. Zie de tekst hierboven.
