Fade-effecten met figuren XI: page-turner demo
Hieronder zie je een boek. Als je er op klikt of tikt, wordt de bladzijde omgeslagen.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Dit is een uitgewerkte toepassing van de fade-effecten (transitions2.js) van brothercake.com. Zie ook het item Fade-effecten met figuren IV: Fade. Je vindt daar ook een overzicht van de effecten die met Transitions 2.0 mogelijk zijn.
- Besproken wordt:
- Gebruik van het script.
- Toepassen in je eigen site.
- Gebruik van het script
- De code bestaat uit HTML, CSS (in de file page-turner.css en JavaScript (in de files transitions. js en page-turmer.js). Voor je eigen gebruik moet je de HTML, de CSS en het JavaScript aanpassen.
- Het boek heeft geen eerste bladzijde. Als de laatste twee bladzijden zijn getoond begint het weer van voren af aan.
- Besproken wordt:
- Gebruik van het script.
- Toepassen in je eigen site.
- Gebruik van het script
- De code bestaat uit HTML, CSS (in de file page-turner.css en JavaScript (in de files transitions. js en page-turmer.js). Voor je eigen gebruik moet je de HTML, de CSS en het JavaScript aanpassen.
- Het boek heeft geen eerste bladzijde. Als de laatste twee bladzijden zijn getoond begint het weer van voren af aan.
- HTML
- De HTML bestaat uit een <p>-tag met de klasse book-frame. Om het boek netjes in het midden te plaatsen is er een inline-style toegevoegd.
- De bladzijden van het boek zijn opgenomen in <a>-tags. Deze hebben geen href-attribuut, maar wel een id. Hoewel het correct HTML is, geeft dit foutmeldingen in het HTML-console, omdat de HTML-parser niet weet welke pagina moet worden opgeroepen. De foutmeldingen (als je ze ziet) kun je negeren.
- Om een en ander goed te laten werken is staat een deel van het JavaScript in de <body>, ná de <p>-tag.
Het script kun je ook aan het einde van de <body> zetten.
- CSS
- De CSS in de file page-turner.css zorgt voor de opmaak van de klasse book-frame. De afmetingen width en height zijn gelijk aan de achtergrond van de klasse.
- De a-tags binnen book-frame worden hier ook opgemaakt, evenals de plaatjes binnen de a-tags.
- De plaatjes moeten allemaal even groot zijn. De afmetingen worden opgegeven in de CSS.
- JavaScript
- De code in transitions.js is gecomprimeerd. Het is niet doenlijk om hier de <p>-tag met de klasse book-framein te wijzigen. Er is ook een ongecompliceerde versie beschikbaar, met de naam transitions.debug.js, die kun je wel veranderen.
- transitions.js wordt in de <head> van het document gezet.
- Het JavaScript in de file page-turner.js zorgt voor het reageren op een klik op de a-tags en doet het
noodzakelijke rekenwerk. Deze file moet na de <p>-tag met de klasse book-frame worden gezet,
anders werkt het niet.
Opmerking: De manier waarop de event-handler 'onclick' aan de a-tags wordt gekoppeld (via de ids trigger·) is de oorzaak van de foutmeldingen die zijn genoemd bij de HTML. - In het voorbeeld worden 6 paren van elk 2 plaatjes gebruikt. De namen van de plaatjes in elk paar eindigen op xL of xR, waarbij x een volgnummer is. Die staan in de 2-dimensionale array pages. Het begin van de filename en het pad naar de plaatjes zet je in path. De extensie staat in suffix.
- De alt-tekst wordt in de array descriptions. Het is niet mogelijk om hier hier het title-attribuut bij te zetten zonder transitions.js te wijzigen.
- De in het voorbeeld gebruikte transition is grow. Behalve deze is
ook de transition skew mogelijk, in twee varianten. Een en ander is te
vinden in de commentaren in page-turner.js.
- Toepassen in je eigen site
- `Download de .zip file en pak hem uit. Open de file index.html in een browser. Dit is een werkend voorbeeld.
- Vervang de plaatjes page-1L.jpg t.m. page-6R.jpg door je eigen afbeeldingen. Zorg ervoor dat ze allemaal even groot zijn. Pas ook de afmetingen van book-frame.jpg aan, zodat je eigen afbeeldingen er goed in passen.
- Let er op dat de linker bladzijden eindigen op L en dat de rechter pagina's eindigen op R.
- Pas ook de afmetingen in de CSS aan, voor zowel van book-frame als van de afzonderlijke pagina's.
- Pas het JavaScript in page-turner.js aan:
• Elementen van de arrays in pages, met daaraan gekoppeld de alt-teksten in descriptions.
• De suffix van de bestandsnamen in suffix. Die is voor alle plaatjes gelijk. Je kunt hier alle grafische formaten inzetten die door een browser worden herkend: .jpg, .gif, .png, …. Een uitzondering is .svg, omdat de meeste browsers niet met externe .svg-bestanden overweg kunnen. - Kies tenslotte een effect voor het omslaan van de bladzijden, zoals genoemd in het commentaar.
- Om de originele code te downloaden ga je naar
www.brothercake.com/site/resources/scripts/transitions/. - De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
- De tag die het script in page-turner.js invoegt staat na de paragraaf of aan het einde van de <BODY>.
Gebruik:
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="page-turner.css">
<script src="transitions.js"></script>
(Zet dit in de <BODY> op de plaats waar het boek moet verschijnen).
<p class="book-frame" style="margin:0 auto 0 auto">
<a id="trigger0"><img id="image0" src="page-1L.jpg"></a>
<a id="trigger1"><img id="image1" src="page-1R.jpg"></a>
</p>
<script src="page-turner.js"></script>
Downloaden:
Druk op de knop:
File: voorb647.zip, 170 640 bytes.
