Mijn doel is om een digitaal interactief prentenboekje te maken. Bij een boekje hoort ook een inhoudsopgave, of een overzicht van de hoofdstukken/pagina's. Bovendien is het makkelijker om op deze manier snel verder door het boek te bladeren. Daarom heb ik deze week onderzocht hoe ik een interactieve inhoudsopgave kan maken en deze toegevoegd aan mijn slides.
Aanpak
Net als bij het maken van de GSAP slides heb ik voor deze ontwikkelingsstap een voorbeeld stap voor stap doorgenomen. Hierbij heb ik gekeken wat er gebeurd als ik iets in de code aanpas en heb ik op het internet gezocht naar dingen die ik nog niet kende.
Leerervaring
Op een gewone pagina zou je JumpScroll kunnen gebruiken. Hiermee spring je een aantal pixels naar boven of beneden op de pagina als je scrolt. Dit kon ik echter niet gebruiken bij mijn pagina omdat ik horizontale slides gebruik.
Na veel onderzoeken en uitproberen ben ik tot deze stappen gekomen:
Stappenplan knoppen maken:
1. HTML:
maak een div en geef deze een class en een id, zet de tekst in de div
2. CSS:
geef de class een kleurtje enzo, een pointer en marginproperties
3. JS:
a. document.getElementById('#id');
$(document).on("click",
"#id", function(){
{GOpaginanummer(-1)}
})
Hiermee
haal je eerst het element op uit HTML. Vervolgens zorg je ervoor dat wanneer je
erop klikt er iets gebeurt. Wat is
gebeurt bepaal je met het GO-functie.
b. Go
functie:
function GO2(e){
var SD=isNaN(e)?e.wheelDelta||-e.detail:e;
if(SD<0){tl.play(‘nummer’)}else{tl.reverse()};
};
Je geeft het eerst een naam
(GO1, GOp2 ect.)
De eerste regel kopieër je
In de tweede regel pas je
‘nummer’ aan aan het getal van hoeveel pagina’s je verder wilt. 0 = één pagina,
1 = twee pagina’s , -1= pagina terug ect.
Dit komt overeen met het
voorblad = 1
Van voorblad naar konijn = 2
(pagina 3 voorblad niet meegerekent. )
wheelDelta:
is een atribute value. Hiermee wordt gemeten hoe ver je scrollt (turn of the
mousewheel). Als het van de gebruiker af roteert is het positief, als het naar
de gebruiker toe roteert is het negatief.
c. Voor
pagina knoppen:
function GOp1(e){
tl.play(0);
};
Cijfer vervanger door aantal
pagina’s vooruit
Resultaat
Op de beginpagina staan knoppen naar alle andere pagina's. Door hierop te klikken blader je direct naar de betreffende pagina. De knoppen bovenin staat op elke pagina, hiermee kun je één pagina vooruit of achteruit bladeren of direct naar de beginpagina gaan.
Bekijk hier de code en het resultaat: http://codepen.io/codesen/pen/VKQodZ?editors=1010
Geen opmerkingen:
Een reactie posten