Hoe zorg ik dat de interactieve animaties weer naar het begin gaan wanneer je de pagina opnieuw bezoekt?
Aanpak
Ik heb opnieuw de mogelijkheden van 'reverse' en 'restart' bekeken. Vervolgens heb ik hier (*klik*) een aantal voorbeelden uitgeprobeerd. Tenslotte heb ik het toegepast in mijn eigen code.
Leerervaring
Je kunt een reverse toevoegen aan een
clickfunctie. Je kunt meerdere reverses in één functie zetten waardoor alle animaties teruggezet worden.
Resultaat
Ik heb ervoor gezorgd dat wanneer je op de
homebutton klikt alle animaties teruggespeeld worden naar het begin. http://codepen.io/codesen/pen/VKQodZ?editors=1010
Verschillende toepassingen verzinnen voor de technieken
Nu ik beter de mogelijkheden van GreenSock ken kan ik ook beter bedenken wat voor toepassingen je zou kunnen maken met deze techniek.
Ik heb gebrainstormd en op een vel alle ideeën die ik bedacht opgeschreven. Voor elk idee heb ik nog meerdere mogelijkheden bedacht.
Hieronder staan de beste ideeën op een rijtje:
- Geanimeerde logo's voor op een webpagina
- Interactieve banner
- Om aandacht te trekken
- Als advertentie
- Paralax-website
- Interactieve animaties op het web
- Advertenties
- Spelletjes
- Mogelijk in combinatie met Phaser
- digitaal prentenboekje
- Als website/link
- Als toevoeging aan een papieren prentenboek, dmv QR-codes
- Interactieve wenskaart
- Om te mailen naar vrienden/familie/klanten ect
- Als toevoegen van een fisieke wenskaart, dmv van QR-codes
- Gepersonaliseerd per persoon/bedrijf
- Datavisualisatie
- Interactieve grafieken
- Geanimeerde tabellen ect
- Mogelijk in combinatie met d3.js
- Muziek maken
- Knoppen die geluid maken
- Interactief instrument
Hoe kan ik ervoor zorgen dat onzichtbare elementen niet voor andere klikbare elementen zitten?
Aanpak
Mogelijkheden van 'display' opzoeken.
Een voorbeeld uitproberen http://www.w3schools.com/css/tryit.asp?filename=trycss_display_js
Dit toepassen op eigen code.
Leerervaring
Met ‘display: hidden’ is het element
onzichtbaar maar zit het nog wel voor andere elementen
Met ‘display: none’ is het hele element weg. Om het
element weer zichtbaar te maken als je erop klikt (of andersom) gebruik je
‘display: block’
Voor de cirkel: de onzichtbare tekst zit nu niet meer
voor het rondje zodat je erop kunt klikken. Maar ik wilde ook dat als je op de
tekst klikt het rondje weer terug veranderd. Daarom maakte ik ook een
klikfunctie aan voor de tekst en gaf ik deze een ‘cursor: pointer’
Bij de blaadjes van de egel heb ik in de CSS de id’s een
display: block gegeven. In de tween veranderd dit naar ‘display: ‘none’’. Het
nadeel hiervan is dat je geen overgang hebt van zichtbaar naar onzichtbaar.
Daarom heb ik eerst een variabele en timeline aangemaakt en daaraan een tween
toegevoegd waarin de opacity 0 wordt en daarna de ‘display: none’.
Bedenken en uitwerken hoe ik de kennis die ik tijdens dit project het opgedaan kan delen via een video
Ik heb alle opgedane kennis van de afgelopen weken bij elkaar gezet. Ik heb gekeken naar welke punten belangrijk zijn om te benoemen in de video. Ook heb ik alvast nagedacht over hoe ik de video zo duidelijk mogelijk kan maken.
Alles wat ik tot nu toe heb opgeschreven is te vinden in dit document: https://we.tl/8A5VivBtsb
Bronnen:
Geen opmerkingen:
Een reactie posten