Fade-effecten met figuren XII: sliding map demo
Hieronder zie een een deel van een satellietfoto van Australië. Rondom de foto zijn balkjes met daarin een pijltje.
Als je daar op klikt verschuift de foto.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Satellietfoto van Australië, verdeeld in 9 stukjes
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.
De foto is verdeeld in 3 × 3 gelijke stukken, waarvan er steeds één zichtbaar is. De negen stukken
zijn afzonderlijke plaatjes. Voor het verschuiven worden de opties 'DRL', 'DRL', 'DTB' en 'DBT' van de transition 'Slide'
gebruikt.
- Besproken wordt:
- Gebruik van het script.
- Toepassen in je eigen site.
- Gebruik van het script
- De code bestaat uit HTML, CSS (in de file sliding-map.css en JavaScript (in de files transitions. js
en sliding-map.js). Voor je eigen gebruik moet je de HTML, de CSS en het JavaScript aanpassen.
- HTML
- De HTML bestaat uit een <p>-tag met de klassen demo en map. Om de foto netjes in het midden te plaatsen is er een inline-style toegevoegd.
- De knoppen met de pijltjes gedragen zich als <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 sliding-map.css zorgt voor de opmaak van de klasse map. De klasse demo heeft geen specifieke opmaak. De afmetingen width en height zijn gelijk aan de afmetingen van de negen plaatjes.
- De vier rechthoeken (met de pijltjes) zijn feitelijk knoppen, Ze hebben de klasse direction. De knop waar je het laatst op hebt geklikt is ondoorschijnend (opacity:1), de andere knoppen zijn half doorzichtig (opacity:0.5)
- De knoppen worden hier ook opgemaakt. In de afmetingen van de knoppen zijn kleine wijzigingen aangebracht, zodat het er net even wat netter uitziet.
- De plaatjes moeten allemaal even groot zijn. De afmetingen worden opgegeven in de CSS.
- JavaScript
- Het JavaScript (in de file slide-map.js) bevat een aantal variabelen die je kunt veranderen om het aan te passen
aan je eigen wensen:
- fractions Dit is een tweedimensonale array waar de namen van de negen plaatjes in staan.
- path Dit is het pad naar de map waar de plaatjes staan. Het moet eindigen met een slash of of leeg zijn.
- suffix Dit is de suffix van de plaatjes. Dit kan verwijzen naar elk type grafisch bestand dat door browsers wordt herkend. In het voorbeeld is .jpg gebruikt. De punt hoort erbij!
- descriptions Dit is een object waarmee de tekst van het alt-attribuut van de negen plaatjes wordt
ingesteld. Er zijn twee velden:
• base Dit bevat de alt-tekst van het zichtbare plaatje bij het laden van de pagina.
• fractions Dit is een tweedimensionele array (te vergelijken met de array waar de filenamen in zijn opgeslagen) waar de alt-tekst van de negen plaatjes in staan.
- 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 negen plaatjes door je eigen afbeeldingen. Zorg ervoor dat ze allemaal even groot zijn. Pas ook de afmetingen in de CSS aan, zodat je eigen afbeeldingen er goed in passen.
- Pas ook de afmetingen van de vier knoppen in de CSS aan.
- Pas het JavaScript in slide-map.js aan, voor wat betreft de variabelen die zijn genoemd onder het kopje JavaScript.
- 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/.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
- De tag die het script in sliding-map.js invoegt staat na de paragraaf of aan het einde van de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="sliding-map.css">
<script src="transitions.js"></script>
(Zet dit in de <BODY> op de plaats waar de foto moet verschijnen).
<p class="demo map" id="map" style="margin:0 auto 0 auto">
<img id="fragment" src="map-middle-center.jpg" alt="Kaart van Australië
gefocust op South Australië."><br>
<br>
Satellietfoto van Australië, verdeeld in 9 stukjes
</p>
<script src="sliding-map.js"></script>
Downloaden:
Druk op de knop:
File: voorb648.zip, 53 420 bytes.
