Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md
Je gaat werken op een manier die in scrum een programming spike wordt genoemd. Een spike is een taak gericht op het beantwoorden van een vraag of het verzamelen van informatie. In plaats van het produceren van een verzendbaar product. Bij sommige taken kan niet goed ingeschat worden tot het ontwikkelteam daadwerkelijk wat werk verricht om een technische vraag of ontwerpprobleem op te lossen. De oplossing is dan om een zogenaamde 'spike' te creëren.
Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional. - Wikipedia
Voor de opdracht van de opdrachtgever ontwerp en maak je creatieve oplossingen voor de interface. Nu de website statisch gegenereerd wordt kun je al je skills inzetten om de interface te verrijken. De bedoeling is dat je gebruikers "oooh" en "aaaah" roepen en niet meer kunnen stoppen met klikken! Of Scrollen! Of gooien!
Elke week ontwerp en maak je een creatieve oplossing, welke je op vrijdag gaat testen. Deze sprint ga je in drie spikes, 3 experimenten ontwerpen en maken.
Prompt: Mysterious post-apocaliptic scroll driven animation
- Saturation gaat omlaag hoe verder je scrollt
- Elementen vallen takelen af hoe verder je scrollt
- Cracks verschijnen in de elementen en worden steeds meer en zichtbaarder hoe verder je scrollt
- Planten/klimops zullen steeds meer verschijnen hoe verder je scrollt
Prompt: Crazy retro line art view transition
Wanneer je naar een nieuwe pagina navigeert, komt er een view transition met een retro line view transition.
Prompt: Grunge kerstsfeer met alle toeters en bellen
- Onderaan de pagina rijdt een trein wanneer je scrolt
- Het sneeuwt op de pagina
Scroll driven animation:
Voor de scroll driven animations maak ik gebruik van de scroll driven animation API met scroll() en view().
View Transition:
Voor de view transition gebruik ik de view t ransition API, en maak ik gebruik van ::view-transition-group om de keyframe animaties af te spelen. Deze zet ik in een @media (prefers-reduced-motion: no-preference). Ook gebruik de import { onNavigate } from '$app/navigation'; van Svelte.
Kerstsfeer:
Om de website kerstig te maken heb ik met WebGL een sneeuw shader toegevoegd. Ook heb ik met een scroll-driven animation de trein laten bewegen.
- Link naar mijn scroll driven animation branch
- Link naar ontwerp scroll driven animation
- Link naar mijn view transititon branch
- Link naar ontwerp view transition
- Link naar mijn kertsfeer branch
- Link naar ontwerp kerstsfeer
This project is licensed under the terms of the MIT license.