Sources

sources die ik gebruik voor mijn werk + mijn code waar ik het verwerk

Inhoudsopgave

Semester 3 sources

Reactive statements

Ik heb reactive statements gebruikt om ervoor te zorgen dat charts.

🔎 Het Probleem:

  • functie aan month buttons die alles hoor te updaten naar de volgende of vorige maand
  • alleen charts worden niet mee geüpdatet

🔄 Oplossing:

  • $: gebruiken voor de vars die connected zijn aan de chart zodat die uiteindelijk mee geüpdatet worden

Meer uitleg over hoe dit werkt vind je hier: issue 117 Voorbeeld code waar we het hebben geimplementeerd: voorbeeld

Bronnen die mij hebben geholpen om dit mogelijk te maken:

svelte.dev: reactive-statements

Bij het schrijven over reactive statements vond ik toevallig dit stack overflow . Hier merkte ik dat je ook gewoon maar 1 $: kan gebruiken en dan alles wat reactive is binnen de curly braces kan doen.

Scss werkend krijgen

Voor de 3 week van sprint 17 wilde ik een achtergrond hebben met vallende sneeuw. Ik vond toen een codepen die dat had en werkte op vallende sneeuw

Probleem was dat ik scss werkend moet krijgen in mijn svelte project

Hier vond ik een stack overflow dit ik gebruikte over hoe ik dat voor elkaar kan krijgen. bron: stack overflow

Hier is uitleg hoe heb ik het verwerkt heb in mijn project + uitleg over de scss code

instalatie scss code uitleg

HSL kleuren

Leuke workshop van Koop over kleuren en contrasten vertelde hij bijvoorbeeld over HSL. HSL is een andere manier om kleuren te kiezen voor je pagina. HSL staat voor Hue, saturation and lightness(vertaling: Tint of Kleurtoon, Verzadiging en helderheid)

voorbeeld: background: hsl(50 80% 40%);. het eerste getal bepaald de tint, de 2de de verzadiging en de laatste de helderheid.

MDN laat goeie voorbeelden zien. niet alleen de mogelijkheden met kleur maar ook de wwaardes die je binnen de () kan gebruiken zoals deg (degree) turn en meer.

Heb zelf bij de view transition coding spike wat kleuren te veranderen met het gebruik van hsl. die vind je hier

code

Semester 4 sources

Milestones & subissues

wat zijn milestones

Milestones zijn bedoeld om Progressie bij te houden van wat je wilt bereiken. In milestones kan je issues en pull requests erin toevoegen Die ermee temaken hebben.

Voor meer info over milestones kun je heir naar toe gaan gitdocs

hoe werk je met milestones

  • Ga naar issues of pull requests en klik op de knop milestones
  • In milestones Kan je een nieuwe milestone creeëren
  • Hierin kan je er een naam aangeven, description en een datum
  • Na het creeëren van een milestone kan je er nu issues en pull requests aan toevoegen.

Conventie

  • Zorg voor goeie benamingen van de milestones
  • Miles stones moet iets groot zijn sinds de issues die erin komen meestal onderdelen zijn van iets groots. (voobeeld van een milestone naam: refactor code base)
  • Milestones kunnen gelinked zijn aan userstories. Zorg ervoor dat de titel met een user story te maken heeft
  • Geef De miles stone Eeen versie nummer wanneer hij voledig af is. semver.

wat zijn subissues

Subissues is een nieuwe feature van github waar je issues in een issue kan maken.

Conventie

Bij het maken van Subissues zorg je ervoor dat ze klein blijven. Als de normale issue bijvoorbeeld maken van een navbar, dan is een subissue bijvoorbeeld "maken active state", "maken voor de active link" of "Icons toevoegen aan de nav".

Gebruik het alleen voor issues die op een rij moeten komen, niet voor issues die eenmaal meer tijd kosten dan normaal.

SEO (Search Engine Optimization)

Nederlands voor * zoekmachine optimalisatie*. Een goeie SEO zorgt ervoor dat je hoog terecht komt bij zoek resultaten.

Waarom ik hier over praat is omdat ik hier ook mee te maken had. Bij het uitvoeren van een lighthousetest bij het project van oncolaboration mij een opvallende score terug gaf. Ik was benieuwd wat en waarom Het zo'n lage score terug gaft.

De reden

Dit stukje in de app.html zorgt ervoor dat de score zo laag was.

<meta name="robots" content="noindex, nofollow">

Bevat het content attribuut. De noindex & nofollow zorgen er dus voor dat websites bijvoorbeeld niet hoog komen bij search engines en niet worden geïndexeerd. Dit betekent dat de pagina niet verschijnt in zoekresultaten en dat zoekmachines geen links op de pagina volgen.

waarom werd het dus toegepast in het project?

volgens de site maxlead zijn dit de volgende redenen.

  • Een website, bijvoorbeeld een testomgeving, niet in zoekmachines terecht mag komen.
  • Een pagina informatie bevat waarvan de webmaster niet wil dat deze door zoekmachinespiders geïndexeerd wordt.

Eigelijk als je het zo bekijkt is het best logisch want de Website zit nog in een alpha fase dus hij is nog niet helemaal af

SPA (Single page aplication)

SvelteKit maakt dus gebruik van het SPA techniek. Dat betekent dat wanneer je van de ene pagina naar de andere gaat, de browser niet de hele pagina opnieuw laadt, maar alleen de benodigde content vervangt. Fijn voor users want dit zorgt soms voor een snellere en smoothere navigatie.

meer info over SPA vind je hier svelteDOCS

  • Dit kan ook nadelen hebben bijvoorbeeld wanneer de pagina veel javascript nodig heeft bij het renderen van de pagina
  • of als SEO heel belangrijk is voor de website

Ik Heb hier trouwens zelf hier profeit van gemaakt: Check hier hoe ik een chapter video heb Zowel client als serverside werken heb gemaakt. Zonder de eventPreventdefault() zorgt de SPA techniek er nog steeds voor dat de pagina niet refreshed wanneer ik navigeer tussen chapters

data-sveltekit-noscroll

Om Het zo makkelijk mogelijk uit te leggen is dat wanneer je navigeert binnen de pagina zorgt deze attribuut van SvleteKit ervoor dat je niet terug gaat naar de orginele positie van waar je op de pagina begint.

Deze techniek heb ik ook toegepast bij de chapter functie zodat je niet steeds naar de top van de pagina word gestuurd als je op 1 van de chapters klikt

hier dezelfde issue als waar ik vertel over de SPA techniek van SvelteKit. Hier vind je dus ook een kleine documentatie dat ik dus de data-sveltekit-noscroll attribuut heb toegepast in mijn code.

hier is meer info over de data-sveltekit-noscroll techniek svelteDOCS

Svelte 5 props

In svelte 5 is props een rune. Runes zijn symbolen die je gebruikt Svelte bestanden om de Svelte-compiler aan te sturen. Als je Svelte als een eigen taal beschouwt, dan zijn runes een onderdeel van de syntaxis — ze functioneren als sleutelwoorden.

Het is belangrijk om te weten dat er verschillen zijn tussen runes en Vanilla js functies

  • je hoeft ze niet te importeren sinds het ingebouwd is door svelte
  • het zijn geen waardes, dus je kunt ze niet aan een agrument toewijzen van een functio of ze aan een variable geven
  • Net als js sleutel worden zijn runes alleen geldig binnen bepaalde gedeeltes binnen je code

Maar wat doen props?

props zorgt ervoor dat je bepaalde eigenschappen ophaald

hier is een voorbeeld wat een ander student heeft gemaakt:

let { placeholder = "Type hier...", id, type = "text", ...rest } = $props();

Hier worden dus placeholder, id, type en nogmeer dingen ALS die erbij komen doorgestuurd naar andere components

en hier is hoe hij het in een andere file ophaalt en daarbij ook een nieuwe eigenschap erbij toevoegd

let { onchange } = $props();

andere voordelen van props

  • het vervangt export let, dus je hoeft de eigenschappen niet meer handmatig op te halen
  • je kan alle eigenschappen destructurenen als dat nodig is.
  • en voorkomt dubbele declaraties in components

hier vind je meer over runes hier vind je meer over props

event Bubbling

Event bubbling in Svelte 5 betekent dat events van een child-component automatisch omhoog gaan naar de parent-component, zodat de parent erop kan reageren

Robin van der Heijden die werkt aan het atlas project gebruikt deze methode bij het maken van zijn filter functie op de posters pagina

Hoe werkt het

  1. als eerst maakt hij in zijn atom component een object waar meerdere variablen gedefinieerd word naar de $props(); onderandere de onchange. Het is wel belangrijk om te onthouden dat hier nog niks gedaan word met de onchange sinds hij dit nog niet van zijn parent component heeft ontvangen.
  2. In het molecule component wordt onchange als prop opgehaald en doorgegeven aan het atom component. Hierdoor kan het atoom component zijn eigen onchange omhoog sturen
  3. Binnen het Orgnisme component word het daardwerkelijke event-handler(filterhandler) gedefinieert voor de naam en straat. Deze word uiteindelijk als onchange aan de molecule component doorgegeven die dat dan weer naar het atoom component stuurt, waardoor als de gebruiker iets intypt in de TextInput hij het event helemaal doorbubbelt van het atoom naar het organism.

Zie hier de basis over event bubbling

En hier meer info over event bubbling in svelte 5.

Sveltekit State Management

State management word gebruikt op de lokale staat van een user te beheren. Daarmee bedoel ik binnen de code bepaal wat er gebeurt als de user iets aan de data veranderd of wanneer hij binnen een page navigeert.

eigelijk zijn de Reactive statements ook een voorbeeld van de statement management. het zorgt ervoor dat de data geupdate word binnen de pagina en dat ook kan displayen.

een ander voorbeeld wat ook mij had geholpen met de chapter function van oncollaboration is de $app/stores. dit stuk code heeft ervoor gezorgd dat als ik een chapter van de video aanklik hij de pagina niet refreshed. Dus het is niet alleen de spa methode die dat afhandelt.

Semester 4.5 sources

Svelte 5 Runes

Bij het onderwerp over event-bubbling heb ik wat verteld over het gebruik van $props;. $props; is een rune wat een nieuwe feature is van svelte 5, maar wat is een rune precies, wat doen ze en hoeveel zijn er.

Runes zijn Syntaxes (keywords) die de compiler van svelte controllen. Je kan ze herkennen met de $ teken die ze hebben

alle runes op een rij

  • $props;
  • $state
  • $derived
  • $effect
  • $bindable
  • $inspect
  • $host

runes mode

Om runes leesbaar te maken heb ik hulp gekregen van christopher die een script had die ervoor zorgt dat runes herkend word binnen vs code

issue over de sv5 migration

$derived

Een belangrijke rune waar ik het over wil hebben is de $derived rune sinds dat vrij intresante rune is die in mijn code is voorgekomen sinds ik mijn project van oncollaboration van sv4 over heb gezet naar sv5.

In comment.svelte waar ik de timestamp functie heb gemaakt zijn alle reactive statements die orgineel aleen een dollar teken waren over gezet naar $derived.

$derived maakt berekeningen van andere gegevens. een voorbeeld daarvan is dit

let parsedContent = $derived(parseCommentContent(comment.content));

Deze korte functie berekend wat er binnen de parsedCommenContent functie gebeurt. waneer er iest veranderd in de comment.content zorgt de $derived ervoor dat de parsedContent var opnieuw berekend word. Dit maakt de variabele reactief en zorgt ervoor dat de inhoud altijd up-to-date is met de laatste wijzigingen in comment.content.

Om het nog makkelijker uit te leggen. Post je een comment dan word de comment die je hebt geschreven (met eventueel de timestamp) correct weergeven word nadat je het hebt gepost

Hier is de bron die meer over runes verteld svelteDocs

issue naar mijn verwerking

:is() selector

Aan de hand van een issue van css weekly #609 heb ik een artikel gevonden over de is:() Selector.

voorbeeld

/* Zonder de is:() selector */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

/* met de is:() selector */
:is(h1, h2, h3, h4, h5, h6) {
	font-weight: bold;
}

Als je zo naar de code kijkt denk je mischien van "whats the point". Nou, het toffe van deze techniek is dat verschillende elementen/selectoren binnen dezelfde parent element die dezelfde styling krijgen dat je de parent maar 1 keer hoeft te schrijven en dat allen ovirige selectoren binnen de () komen zonder dat je dat meerdere keren opnieuw hoeft te schrijven

voorbeeld met hoe ik het heb gedaan

/* before */

.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6,
.markdown-content b,
.markdown-content strong,
.markdown-content i,
.markdown-content em,
.markdown-content p {
  margin: 10px 0;
}

/* after */

.markdown-content :is(h2, h3, h4, h5, h6, b, strong, i, em, p) {
  margin: 10px 0;
}

ze doen allebij hetzelfde alleen de after is veel meer optimized.

meer info vind je hier

en hier een voorbeeld van hoe ik het heb verwerkt in mijn eigen code.

Conditional attributes Svelte & inline scripting

Sveltekit maar ook andere frameworks hebben De mogelijkheid om mini javascript code binnen een element te doen.

Hier bijvoorbeeld:

In dit stukje geef ik aan als featureWebinars bestaat, hij de js-enabled.link naar mijn code

<section bind:this={featuredWebinars} class="featured-webinars {featuredWebinars ? 'js-enabled' : ''}">

Ander voorbeeld is deze hieronder:

Deze geeft aan dat wanneer een animation voorbij is hij de rotating animation weghaald. link naar mijn code

<svg bind:this={svgElement} onanimationend={() => svgElement.classList.remove('rotating')} width="30px" height="30px" viewBox="0 0 24 24" fill="hsl(340, 100%, 15%)" xmlns="http://www.w3.org/2000/svg">
        <rect x="3" y="7" width="18" height="14" rx="1" stroke="white" stroke-width="2" stroke-linecap="round"/>
        <path d="M13 7L17 3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M11 7L7 3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>

hier vind je een bron over dit soort markups die je binnen zo'n html element kan doen

Laws of UX

Een intresante bron wat ik van jason heb gekregen gaat over de regels van Ux design. Deze Site bevat een lijstje met bepaalde dingen over aanpak van design. Zo heb je bijvoorbeeld hier eentje wat gaat over Serial Position Effect dit betekent dat gebruikers vooral kijken naar wat er vooraan staat en wat er helemaal achteraan staat. Dit laat weten dat het belangrijk is bij design dat je dat ook doet voor de dingen die je het liefts wil laten zien.

repairs

css @property

Momenteel zit ik in mijn reparatie periode van mijn endterm van semester 4. En aan de hand van wat bronnen die Joost mij en mijn mede studenten heeft gegeven over scroll-driven-animation, vond ik daar iets in dat heet @property van css. Ik heb het wel vaker gezien in verschillende code projecten ,maar wist niet wat het exact was dus ben onderzoek gaan doen over deze css techniek.

Over dit onderwerp vind je hieronder de bron die mij geholpen heeft met het begrijpen van @property in css. Ook vind je 3 links die laten zien dat ik er zelf ook gebruik van heb gemaakt in 1 van de persoonlijke projecten waar ik mee bezig ben geweest de afgelopen tijd.

css tricks @property

Mijn github repo

css code

live site

Maar wat is @property precies?

Het is een bepaalde regel in css waarmee je zelf je eigen custom property kan definiëren met verschillende syntaxes ,zoals number, percentage, color, angle en meer. Naast dat kan je ook de erfenis (inherits) bepalen (Daar ga ik meer over vertelen).

syntaxes & initual value

In het vorige kopje heb ik al wat voorbeelden opgenoemd die syntaxes bepalen wat voor soort value de @property kan krijgen.

Wat je hier ziet is dat de naam van de @property @--hue heet. Als Syntax heeft hij angle, dat betekent dat zijn waarde altijd een getal moet zijn met deg aan het einde om aantegeven dat het ook echt een angle is.

@property --hue {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

Andere voorbeeld is bijvoorbeeld de color.

Hier geldt de regel dat je een geldige css kleur meegeeft (of het nou naam, hsl, rgb of hex is maakt niet uit.)

@property --hue {
  syntax: "<color>";
  initial-value: red /*hsl,rgb en hex kan ook*/;
  inherits: false;
}

meerdere syntaxes in 1 @property?

Css properties hebben ook de mogelijkheid om meerdere soorten syntax types in 1 @property te stoppen.

@property --size {
  syntax: "<percentage> | <length> | <color>";
  initial-value: 0%;
  inherits: true;
}

Wat je hier ziet is dat deze @property nu percentage, length en color. Dit betekend dat als je bij een bepaalde css selector de custom property genaamd --size iets anders wil maken, zoals kleur, dan is dat ook mogelijk.

h2{
  --size: green;
}

meerdere waardes

Naast het feit dat je met | meerdere syntaxes kun toevoegen, kan je ook op verschillende manieren binnen de initial-value, meerdere waarden op verschillende manieren definiëren. Met bijvoorbeeld + kan je bijvoorbeeld binnen de initial-value een spacebar ruimte tussen 2 waardes geven.

@property --size {
  syntax: <length>+";
  initial-value: 10px 20px;
  inherits: true;
}

Maar je kan ook met de # gebruik maken van kommas tussen 2 verschillende waardes.

@property --text {
  syntax: <string>#";
  initial-value: linear-gradient(black, blue), linear-gradient(red, purple)";
  inherits: true;
}

inherits

Het laatste wat je waarschijnlijk is opgevallen, waar ik ook graag meer over wil vertellen, is de inherits. De inherits is een boolean, waarbij je kunt kiezen tussen true en false. Dit betekent dat als inherits op true staat en je veranderd de waarde van de @property ergens, dan betekent dat de childeren van dat element die ook die property willen gebruiken, de waarde krijgen van zijn parent en niet van het aangemaakte @property.

Hier is een goed voorbeeld die van mijn eigen project komt.

 @property --card-content {
    syntax: "<number> | <color> | <angle>";
    inherits: false;
    initial-value: red;
  }
 
  li {
    --card-content: 20deg;
    text-align: center;
    padding: 0.5em;
    border-radius: 8px;
    animation: fadeIn 1s forwards;
    animation-delay: 0.5s;
    position: relative;
    transition: transform 0.3s ease; 
  }


  li p {
    color: var(--card-content);
  }

Laten we stap voor stap er doorheen gaan

  1. Ik heb een @property gemaakt die --card-content heet.
  2. De @property support meerdeere syntax types, zoals color.
  3. De waarde is rood en inherits staat op false.
  4. Vervolgens zie je dat de waarde is veranderd naar 20deg. Dit kan ,omdat hij ook angle support
  5. Daaronder zie je dat de p in de li (oftewel de child van de li) een color property heeft met als waarde de custom property die ik heb aangemaakt.
  6. Omdat inherits op false staat, betekent dat hij niet de waarde van zijn parent pakt. Dus de waarde in li p is dan nog steeds rood
  7. Zou de inherits op true staan, dan was de waarde in de color 20deg geweest, omdat hij de value van zijn parent pakt in plaats van de custom proprerty.

Dit is een goed voorbeeld van hoe de inherits werkt.

maar wat is nou het voordeel aan custom properties als je het vergelijkt met css variables?

Het is je mischien opgevallen dat het toepassen van css properties zowat sprekend lijkt als het toepassen van een css variable. Alleen het voordeel van de css @property is dat hij al een volledige info waarde heeft. Dat wil zeggen, dat als je bijvoorbeeld een animation maakt en je zet alleen de custom property met een nieuwe waarde erin, dat hij ook weet wat hij moet doen.

Hier zie je een goed voorbeeld van mijn eigen project om er een beter beeld van te krijgen.

@property --text-animations {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }

  h1 {
    text-align: center;
    margin-bottom: 1em;
    animation: growshrink 0.7s ease-in-out;
    animation-iteration-count: 5;
    transform: rotate(var(--text-animations));
  }

  @keyframes growshrink {
    to{
      --text-animations: 360deg;
    }
  }
  1. Je ziet een custom @property met de naam --text-animations
  2. Zijn syntax is angle met als waarde 0deg
  3. Die waarde geef ik aan mijn h1 element, met de transform rotate property.
  4. Je ziet ook dat ik de h1 een animation heb gegeven.
  5. In de animation zie je dat ik alleen de custom property heb gegeven binnen de to met daarbij een nieuwe waarde. Waardoor hij dus een volledig rondje draait.
  6. Dit werkt, omdat css weet dat dit een custom property is die angle als syntax heeft. Dat betekent dat je deze in de animation alleen een nieuwe waarde moet geven om het element te laten draaien.

Als je css var gebruikt in plaats van @property zou dit niet werken bij de animation.

Waarom dit niet werkt is, omdat css niet kan zien dat deze variable over rotate gaat. Dus in de animation zeg je alleen naar 360deg en niet naar rotate 360deg, wat dus wel het geval is bij @property.

  :root{
    --text-animations: 0deg;
  }

  h1 {
    text-align: center;
    margin-bottom: 1em;
    animation: growshrink 0.7s ease-in-out;
    animation-iteration-count: 5;
    transform: rotate(var(--text-animations));
  }

  @keyframes growshrink {
    to{
      --text-animations: 360deg;
    }
  }

Wat is mijn eigen mening over @property

Wat je hebt gezien is dat ik het zelf op een kleinschalige manier heb toegepast in mijn eigen project om er mee te expirimenteren. Maar ik zie nu al de potentie van deze css techniek voor grote projecten. Zeker merk ik het bij animations, je maakt de keyframe kleiner en cleaner. Dus eigelijk is dit een andere manier om je code dry te maken en meer leesbaar. Andere dingen die mij zijn opgevallen, is dat het maken van fouten in de css sneller wordt voorkomen, sinds je met css properties moet aangeven wat het precies is vergeleken met var, waar je van alles in kan dumpen. En als laatst dat je met inherits het gedrag kan bepalen van verschillende css selectors die de @property in hun eigen styling toepast.

scroll driven animation

Binnen mijn eigen project ben ik bezig geweest met scroll-driven-animation. Ik heb hiermee eerder gewerkt en heb ik daar inspiratie uitgehaald.

inspiratie van mijn code uit sprint 17.

Maar wat is scroll driven animation eigelijk?

Om het zo makkelijk mogelijk te houden is scroll-driven-animation een manier om animations te laten uitvoeren wanneer je scrollt op een bepaald element, inplaats van dat het gelijk uitvoert na het laden van de pagina.

Mijn ervaring bij het maken van scroll-driven-animation

In het algemeen heb ik er geen moeite mee gehad sinds deze feature niet veel code nodig heeft om hem werkend te krijgen.

Hier vind je ook een voorbeeld van hoe ik scroll-driven werkent heb gekregen in mijn code

@supports (animation-timeline: view()){

  img {
    --card-content: 10deg;
    animation: straighten linear both;
    animation-timeline: view();
    /* animation-range: entry 0% cover 50%; */
    /* animation-range: entry 40% exit 50%; */
    transform: rotate(var(--card-content));
}

/* @keyframes straighten {
  to{
    --card-content: 0deg;
    scale: 1;
  }
} */

  @keyframes straighten{
    0% {
      --card-content: 10deg;
      scale: 0.8;
    }
    50% {
      --card-content: 0deg;
      scale: 1;
    }
    100% {
      --card-content: 10deg;
      scale: 0.8; 
    }
  }
}
  1. Als eerst zorg ik er voor met de @support dat dit alleen werkt voor browsers die scroll-driven-animation ook ondersteunen.
  2. Wat ik dan doe is dat ik de waarde van mijn custom property binnen de animation van waarde heb veranderd na 10deg.
  3. Binnen de animation heb ik het een naam gegeven, genaamd straighten.
  4. Linear en both zorgen ervoor dat de waarde van het element behouden blijft buiten de animatie. Zonder dit, kan je net aan de kaarten zien in hun normale staat vlak voordat ze buiten het scherm vallen.
  5. Daarna geef ik het een animation-timeline met als waarde view(). Dit zorgt ervoor dat de scroll-driven-animation aan het element begint, zodra hij bij het begin van de viewport is (0%) en eindigt bij het einde van de viewport (100%). Ik heb het leeg gehouden binnen de (), omdat dit zowel voor verticale als horizontale scroll werkt. Zie de bron mozzilla view()
  6. De animation-range is bedoeld voor de andere @keyframe animation die commented is. De animation range zorgt ervoor dat de animation halverwege het scrollen binnen het scherm (50% in het midden dus) hij de animatie eindigt. Dat betekent dat hij niet 100% van de animation bereikt op 100% van de view poort, maar halverwegen. Oftewel entry = begin op bepaalde positie met animeren en cover = beëindig de animatie een ander positie.
  7. Als laats geef ik de --card-content als waarde aan de transform property met daarin een rotate.
  8. Daarmee hoef ik dus alleen de custom property door te geven met een nieuwe waarde en heb ik hiermee een succesvolle scroll-driven-animation gemaakt die je in mijn livesite terug vind.

recap bronnen

inspiratie van mijn code uit sprint 17: Waar ik mijn mind heb verversd over scroll-driven-animation.

mozzilla view(): geeft wat uitgebreidere uitleg over de view().

animation-range: geeft uitgebreide uitleg over de animation range die mij geholpen heeft met het starten en eindigen van mijn commented keyframe animation.

livesite: mijn live site waar ik mijn scroll-driven-animation werkend heb gekregen.

code: en uiteraard mijn zelf gemaakte code die erbij hoort.