Vorige week had ik al onderzoek gedaan naar hoe ScrollMagic werkt, hoe ik daarmee animaties kan triggeren en elementen op een pagina kan pinnen. Deze week heb ik ontdekt hoe ik (horizontale) slides kan maken, zowel met als zonder ScrollMagic.
Aanpak
Met de ScrollMagic slides was ik al aardig ver gekomen vorige week. Deze week ben ik hiermee verder gaan door verschillende dingen uit te proberen.
Ik heb de hele code stap voor stap doorgenomen. Alle stukjes die ik nog niet kende of niet begreep heb ik opgezocht op internet. Ook heb ik gekeken naar wat er allemaal weggelaten kon worden zonder dat dit de werking van de code aantastte (bijvoorbeeld het logo).
Vervolgens heb ik zelf een code geschreven waarbij de pagina's slides wanneer je scrollt. Ik heb op elke pagina een GSAP techniek neergezet. Sommige dingen hiervan had ik al eens eerder gemaakt en sommige waren nieuw en heb ik dus eerst opgezocht op internet. Ik heb nergens code gekopieerd, maar soms wel overgetypt.
Leerervaring
Veel proberen werkt. Soms lukt iets de eerste keer niet, maar als je het dan nog een keer probeert werkt het wel. Door zelf de code te typen (in plaats van de kopiëren) ben je veel bewuster bezig met de code. Het duurt weliswaar een stuk langer, maar je leert ook beter waar je hoofdletters moet gebruiken, waar komma's moeten en meer kleine details die je snel over het hoofd ziet wanneer je een code kopieert.
Wanneer je een code stap voor stap doorneemt wordt deze begrijpelijker en makkelijk zelf te gebruiken. Ik heb veel moeten opzoeken, maar daar heb ik ook veel van geleerd:
<span> element zorgt ervoor dat je dingen op een pagina kunt groeperen.
<
fa fa-[…]> wordt gebruikt voor symbolen op pagina's
Z-index:
bepaald welke object vooraan staan. Een element met een grotere ‘stack order’
komt altijd voor een element met een lagere ‘stack order’. De z-index werkt
alleen wanneer er ook een position is toegekend aan een element.
document.querySelectorAll:
haalt een lijst op van elementen binnen het document die overeenkomen met de
gespecificeerde selectoren. Van de lijst wordt een ‘nodeList object’ gemaakt.
Deze ‘nodes’ kunnen worden aangepast door middel van indexcijfers. [1] staat
voor het eerste object met deze selector [2] voor het tweede element, ect.
for (var
i=0;i<): hierbij word een loop gebruikt en hierin de variabelen i gebruikt.
createElement(): Hiermee wordt een 'element node' gemaakt
document.addEventListener(): Deze methode hecht een 'event handler' aan het document.
nodes: Elk HTML-element is een 'node'.
NaN= Not-A-Number, de isNaN() functie bepaalt of een waarde NaN is of niet
Andere dingen die ik geleerd heb bij het maken van deze code:
Als je de viewbox van een SVG aanpast kan de grootte van de afbeelding veranderen. De eerste twee getallen bepalen de positie binnen het scherm, de laatste twee getallen bepalen de breedte en hoogte. Hoe groter de getallen, hoe kleiner de afbeelding.
Als je meerdere classes wilt toevoegen aan een element kun je dat zo doen: class= “name1 name2”
Om je muisaanwijzer in een handje te laten veranderen wanneer je over een klikbaar object gaat moet je dit in je CSS code aanpassen. Je geeft het object dan een cursor: pointer;
Wanneer je text in illustrator in een afbeelding zet en
dit als SVG exporteert kun je de tekst nog aanpassen in de code.
Met repeat() en yoyo() kun je een tween laten herhalen.
Ik geef een overzichtje van de technieken die ik als content heb toegevoegd in de slides:
Pagina 1: cirkel veranderd van kleur
-
Click function
-
Reverse
-
Timeline
Pagina 2: staartje beweeg:
-
SVG optimaliseren en organiseren
-
Timeline
-
Repeat en yoyo
Pagina 3: hartjes wanneer je klikt
-
Click function
-
Stagger
-
Svg
-
Meerdere classes
Pagina 4: Bunny met tekstwolkje:
-
Tekst in SVG
-
Tween
-
TransformOrigin
Pagina 5: egel met blaadjes:
-
Blaadjes verdwijnen wanneer je erop klikt
-
Binnen één SVG
Maar wat heb je nodig om de slides met GSAP te maken:
Je maakt een timeline met hierin de beweging van de pagina's. Deze timeline zet je in een loop. De loop weet of je naar voren of naar achteren scrollt en op basis daarvan wordt de slide verschoven. Je moet ook een pauze invoegen zodat de timeline stopt wanneer je op de volgende pagina bent.
Je hebt een functie nodig die weet of je naar voren of naar achteren scrollt. Tenslotte heb je een Eventlistener nodig om het scrollen mogelijk te maken.
Resultaat
Het resultaat is dat wanneer je scrollt er een pagina van de zijkant wordt 'omgeslagen'. Op elke pagina staat een SVG afbeelding waarvan één alleen beweegt en de andere interactief zijn.
Bronnen
