Home
Ik ga elke week een idee van de FDND concept roulette maken en dit proces hieronder documenteren.
Ik kreeg meteen het idee om de library te gebruiken die Justus ons heeft laten zien tijdens een college. Ik heb hieronder een video van hoe dit effect eruit ziet.
De website waarop ik dit getest heb is hier te vinden.
IMG_3841.mp4
Dit is het perfecte voorbeeld voor mij. Het is mooi, over the top, en het is bestuurbaar met de cursor. Perfect dus! Ik heb geprobeerd de library te downloaden maar het lukte me uiteindelijk niet deze werkend te krijgen.
Ik vond een alternatief maar deze was helemaal niet zo over the top als ik zou willen. Ik koos er dus voor deze niet te gebruiken en een nieuwe prompt te nemen op de roulette.
De website waarop ik deze getest heb is hier te vinden.
IMG_3842.mp4
Ik had meteen een idee voor deze prompt, Ik ik heb deze snel uitgewerkt in een Figma prototype om het zo beter te visualiseren. Het lukte me uiteindelijk jammer genoeg niet om dit idee werkelijkheid te maken.
Het idee was dat er een hexagon grid spawnde om de knop heen die je ingedrukt had. Dit lege grid zou daarna ingevuld worden vanuit het midden. Het midden is de positie van de knop die je ingedrukt hebt. De kleur zou zich ook aanpassen aan de ingedrukte knop. Zodra dit grid gevuld was zou het proces reversen (van buiten naar binnen) en dan bevind je je op de andere pagina als het grid weer leeg is.
RPReplay_Final1702019226.mov
Ik koos er toen voor om te gaan voor een loading screen in plaats van een echte page-transition. Ik heb hier een snel ontwerp voor gemaakt.
Het idee is dat het ding in het midden het Visual Thinking logo is. Ik heb ervoor gekozen de letters eruit te laten omdat ik het minimalistisch wou laten.
Ik heb na wat googlen dit codepen voorbeeld gebruikt als inspiratie om de hexagons te krijgen.
IMG_3864.mov
background: radial-gradient(circle, transparent, var(--vtDarkBlue) 40%);
background: radial-gradient(circle, transparent, var(--vtYellow) 90%);
@keyframes blur {
0% {
opacity: 75%;
}
25% {
opacity: 100%;
}
50% {
opacity: 75%;
}
100% {
opacity: 0%;
}
}Ik heb radial-gradients gebruikt om een soort effect te creëren waardoor er een illusie komt die ervoor zorgt dat het lijkt alsof er diepte is in het midden van het scherm. Zo let de gebruiker meer op het Visual Thinking logo in het midden.
Ik heb hiernaast een animatie gebruikt doormiddel van keyframes die ervoor zorgt dat de loading screen langzaam weg blurred om zo de echte content te tonen.
<script>
import { onMount } from 'svelte';
let loading = true;
onMount(() => {
if (sessionStorage.getItem('alreadyLoaded')) {
loading = false;
} else {
sessionStorage.setItem('alreadyLoaded', 'true');
setTimeout(() => {
loading = false;
}, 3000);
}
});
</script>Ik heb gebruik gemaakt van de Web Storage API om de data van de huidige sessie op te slaan. Zo kan ik ervoor zorgen dat de loading screen alleen de eerste keer dat de pagina geladen wordt getoond wordt en niet bij elke refresh van de home page.
Ik heb hiervoor sessionStorage gebruikt. sessionStorage werkt een beetje als cookies, het maakt een storage area die de data van de huidige sessie bewaart. Deze data wordt bewaart tot de tab gesloten wordt.
Je hebt ook localStorage, dit doet hetzelfde maar bewaart het zelfs als de tab gesloten wordt. Het voordeel van deze is dat deze een veel grotere storage heeft dan sessionStorage.
- 06/12
We hebben vandaag onze voortgang van de creative coding opdracht aan elkaar laten zien in een groepje maar ik had nog niet echt iets om te laten zien.
- 08/12
Ik heb vandaag een code/design review gehad met wat eerstejaars en hier issues op mijn pagina van gekregen en ook heb ik wat issues aan hun gegeven.
- Hoewel ik gebruik heb gemaakt van het blurs and gradients en page-transition gedeelte van de prompt, is het niet echt insane geworden.
- Ik gebruik nu een onMount delay van 3000ms voor mijn loadingscreen, er wordt niet echt iets geladen dus een loading screen is niet eens echt nodig.
Ik heb een snel Figma ontwerp gemaakt om mijn idee wat beter te visualiseren.
Het idee is dus dat je de toggle drukt, er komt dan een abstracte gradient paint splash die de achtergrond vult. Na een tijdje komt er een gravitational black hole die de pagina opzuigt. Je komt dat in de black hole en eindigt op een nieuwe pagina.
Ik begon door met behulp van deze tutorial een paint splash te maken als de switch is aangeklikt.
img {
-webkit-mask-image: url("assets/mask.png");
mask-image: url("assets/mask.png");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 95%;
mask-size: 95%;
-webkit-mask-position: 50px, 0px;
mask-position: 50px 0px;
}Ik kwam er toen achter dat dit non standard property's zijn en dat ik ze eigenlijk niet moest gebruiken.
Ik heb toen met behulp van dit voorbeeld en repeating-conic-gradients een nieuw idee bedacht voor een abstract gradient
.splash {
background:
repeating-conic-gradient(var(--color-purple) 0 1%, #0000 0 11%),
repeating-conic-gradient(#0000 0 7%, var(--color-cyan) 0 9%) 50% /
100% 500%,
repeating-conic-gradient(#0000 0 5%, var(--color-gold) 0 7%) 50% /
500% 800%;
animation: ripple 5s infinite;
mix-blend-mode: color-burn;
}Ik heb hiernaast gebruik gemaakt van mix-blend-mode: color burn met als inspiratie stefan's website van vorige week
Dit heb ik met een css animatie laten bewegen
@keyframes ripple {
0%,
100% {
transform: scale(1.5) rotate(0deg);
}
10%,
90% {
transform: scale(0.8) rotate(-36deg);
}
20%,
80% {
transform: scale(0.6) rotate(-72deg);
}
30%,
70% {
transform: scale(0.4) rotate(-108deg);
}
40%,
60% {
transform: scale(0.2) rotate(-144deg);
}
}Ik heb een blackhole gemaakt met een radial-gradient en deze met css animaties geanimeerd.
background: radial-gradient(
circle,
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0.7) 80%,
rgba(0, 0, 0, 0.5) 85%,
rgba(0, 0, 0, 0.3) 90%,
transparent 100%
);@keyframes blackHole {
0% {
transform: translate(-50%, -50%) scale(0);
}
33% {
transform: translate(-50%, -50%) scale(0.3);
}
66% {
transform: translate(-10%, -10%) scale(0.6);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes swirl {
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
}
Mijn pagina zit vol met animaties en bewegende kleuren. Ik heb hierdoor gekozen gebruik te maken van prefers-reduced-motion om een css animatie te veranderen en animation: none en transition: none toe te voegen.
@media (prefers-reduced-motion: reduce) {
.splash,
.splash2,
.splash3,
.splash4 {
animation: none;
}
.slider.round,
.slider.round:before {
-webkit-transition: none;
transition: none;
}
@keyframes blackHole {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
}
}
}De hele website is bruikbaar zonder een muis. Ik heb dit gedaan door een input: focus toe te voegen aan mijn slider als feedback voor de gebruiker. Ook kun je de pagina resetten door op r te klikken op je toetsenbord.
onMount(() => {
const handleKeyDown = (event) => {
if (event.key === "r") {
color = false;
blackHole = false;
}
};input:focus + .slider {
box-shadow: 0 0 10px #2196f3;
}
.splash,
.splash2,
.splash3,
.splash4 {
width: 100%;
height: 100%;
background: radial-gradient(var(--color-pink) 22%, #0000 0),
linear-gradient(to right, var(--color-green), var(--color-orange));
background-repeat: no-repeat;
filter: blur(20px) contrast(50);
box-shadow: 0 0 0 50px var(--color-white);
position: absolute;
z-index: 0;
align-items: center;
mix-blend-mode: color-burn;
animation-timing-function: ease-in-out;
}Ik heb herhalende waarden gecombineerd in mijn css om mezelf zo niet te hoeven repeaten.
:root {
--color-pink: #ee82ee;
--color-green: #00ff1a;
--color-orange: #feb47b;
--color-purple: #ff00ff;
--color-cyan: #00ffff;
--color-gold: #ffd700;
--color-light-green: #adff2f;
--color-red-orange: #ff4500;
--color-dodger-blue: #1e90ff;
--color-deep-pink: #ff1493;
--color-deep-sky-blue: #00bfff;
--color-tomato: #ff6347;
--color-chartreuse: #7fff00;
--color-dark-orange: #ff8c00;
--color-indigo: #4b0082;
--color-white: #fff;
--color-light-grey: #ccc;
--color-blue: #2196f3;
--color-black: rgba(0, 0, 0, 1);
--color-black-70: rgba(0, 0, 0, 0.7);
--color-black-50: rgba(0, 0, 0, 0.5);
--color-black-30: rgba(0, 0, 0, 0.3);
}Om mezelf niet te hoeven herhalen heb ik de kleuren ook in custom properties gezet.
<body role="application" on:mousemove={handleMouseMove}>
<div id="container">
<label class="switch">
<input type="checkbox" on:click={handleClick} />
<span class="slider round"></span>
</label>
{#if color}
<div class="splash"></div>
<div class="splash2"></div>
<div class="splash3"></div>
<div class="splash4"></div>
{/if}
{#if blackHole}
<div class="blackHole"></div>
{#each stars as star (star.id)}
<div
class="star"
style="top: {star.top}%; left: {star.left}%; width: {star.size}px; height: {star.size}px"
></div>
{/each}
{/if}
</div>
</body>Ik heb consistente indentaties in mijn code om het zo leesbaar mogelijk te houden.
Ik heb om mijn mosaic layout te kunnen maken een tutorial gevonden waarmee ik makkelijk tile's kan maken in de mosaic layout.
In het voorbeeld hierboven wat ik gemaakt heb met behulp van de tutorial is zien dat de eerste tile 4 columns inneemt en 2 rows (4 breed 2 hoog). De tweede en derde tile nemen beiden 2 colums in (2 breed). Omdat de eerste tile al 2 hoog is zullen deze twee dus ook twee hoog zijn tenzij anders aangegeven.
<div class="container">
<div class="tile">
<img src="http://via.placeholder.com/800x600/C72B41/800834" alt=""/>
</div>
<div class="tile">
<img src="http://via.placeholder.com/800x600/C72B41/800834" alt=""/>
</div>
<div class="tile">
<img src="http://via.placeholder.com/800x600/C72B41/800834" alt=""/>
</div>
</div> .container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 1rem;
}
.tile:nth-child(1) {
grid-column: span 4;
grid-row: span 2;
}
.tile:nth-child(2),
.tile:nth-child(3) {
grid-column: span 2;
}Hiermee is het dus makkelijk om een eigen design te maken.
Mijn plan was dus om een soort cirkel mosaic layout te maken waarin de tile's allemaal apart animeren. Ik zou proberen puzzle pieces te gebruiken en dan zou alles in elkaar klikken enzo. Ik dacht er toen aan om in plaats van tile's, hexagons te gebruiken omdat ik die wel mooi vond en toch al steeds hexagons gebruikte bij Visual Thinking.
Ik had een design gemaakt en deze in grijze tinten gemaakt om het sad te houden maar het werd uiteindelijk saai in plaats van sad. Ook ben ik niet zon grootte fan van het ontwerp. Omdat ik eigenlijk wel kleur wil gaan gebruiken besloot ik gewoon het hele idee weg te gooien en opnieuw te draaien in de roulette.
Oke dus ik kreeg syzygal retro line art carousel maar ik wil eigenlijk mosaic layout nog een kans geven dus ik heb die gewoon zelf toegevoegd.
Ik begon met het maken van een ontwerp. Ik probeerde het een retro gevoel te geven dat past bij de retro line art. Ook heb ik de zon, de aarde en de maan in vinyls gezet omdat syzygal te maken heeft met de posities van die drie planeten. Dit vinyl idee kwam van Ivar, ik had eerst planeten daar staan maar hij gaf aan dat vinyl's beter zouden passen bij de rest van de pagina. Het plan is om de vinyl's en de auto te animeren. Ook wil ik de line art animeren onMount.
Ik heb gebruik gemaakt van deze tutorial om mijn mosaic layout te realiseren. Voor een betere uitleg zie: Idee 1
<script>
let tiles = Array(10);
</script><main>
<img src="assets/retrogirl.png" alt="" />
<section class="container">
{#each tiles as tile}
<section class="tile"></section>
{/each}
</section>
</main>Ik heb er een array van gemaakt zodat ik niet 10 keer een tile hoefte aan te maken. Ik geef hieronder de posities van de tiles aan zoals in het voorbeeld in Idee 1
.container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 1rem;
border-radius: 2rem;
border: 20px solid var(--color-lineRed);
background: var(--color-lineOrange);
}
.tile {
border-radius: 2rem;
border: 3px solid var(--color-linePurple);
background: var(--color-background);
}
.tile:nth-child(1) {
grid-column: span 4;
grid-row: span 2;
}
.tile:nth-child(2) {
grid-column: span 4;
grid-row: span 4;
}
.tile:nth-child(3) {
grid-column: span 2;
grid-row: span 2;
}
.tile:nth-child(4) {
grid-column: span 2;
grid-row: span 1;
}
.tile:nth-child(5) {
grid-column: span 2;
grid-row: span 1;
}
.tile:nth-child(6) {
grid-column: span 2;
grid-row: span 1;
}
.tile:nth-child(7) {
grid-column: span 4;
grid-row: span 3;
}
.tile:nth-child(8) {
grid-column: span 2;
grid-row: span 1;
}
.tile:nth-child(9) {
grid-column: span 2;
grid-row: span 2;
}
.tile:nth-child(10) {
grid-column: span 4;
grid-row: span 2;
}Resultaat:
Ik heb de retro art lijnen gemaakt door een svg path te gebruiken. Ik kwam op dit idee omdat Justus tijdens een les een keer had gezegd dat je svg paden zelf kon schrijven en dit was me bijgebleven.
<svg height="15" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 0 L1500 0"
stroke="var(--color-linePurple)"
stroke-width="20"
fill="transparent"
/>
</svg>Met de bovenstaande code geef ik aan dat er eerst naar 0x, 0y moet worden gegaan (M = Move to), hierna moet er een lijn getrokken worden van de startpositie (in dit geval dus 0x, 0y) naar de aangegeven eindpositie van 1500x, 0y (L = Line to).
Hiermee teken je een lijn in je aangegeven stroke-width, kleur en height.
Ik heb hiermee alle lijnen unieke posities gegeven en creëer zo de retro line art.
Hier kwam ik op het probleem van het curven van de lijnen. Dit is ingewikkelder dan je zou denken en koste me erg veel tijd. Ik heb gebruik gemaakt van de W3S svg path docs en de MDN web svg curve commands docs om een basic understanding te krijgen van hoe ik dit aan moet pakken.
Ik kwam erachter dat ik gebruik moest maken van een Q (Quadratic bézier curve). Hieronder is een uitleg van W3S:
Bézier curves are used to model smooth curves that can be scaled indefinitely. Generally, the user selects two endpoints and one or two control points. A Bézier curve with one control point is called a quadratic Bézier curve and the kind with two control points is called cubic. The following example creates a quadratic Bézier curve, where A and C are the start and end points, B is the control point:
Je geeft aan waar de lijn begint (punt A), waar de lijn eindigt (punt C) en je geeft aan hoe de lijn moet curven (punt B).
Ik heb mijn idee daarna uitgeschreven in een svg path visualizer
Hier krijg je een visualisatie van je curve met een uitleg van wat je code doet.
M1300 0 Q 1350 35, 1300 70
Move to 1300x 0y want dit is de eindpositie van de rechte lijn en dus de startpositie van de curve. 1300x 70y is het eindpunt. Dus startpunt: 1300x 0y, eindpunt: 1300x 70y. De Q geeft aan hoe de lijn moet curven, de curve gaat 50 pixels naar rechts en dus zetten we voor de x positie 1350, de curve is in het midden van de lijn dus neem ik de average van de Y posities. 0+70/2=35.
Zoals je ziet geeft dit ongeveer de curve die ik wou.
Ik heb hierna paths geschreven met andere quadratic bézier curve's voor elke lijn.
Het is uiteindelijk gelukt maar dit ziet er naar mijn gevoel best lelijk uit.
Ik stelde mezelf de vraag, kan het niet anders? Ik was zo lang bezig met quadratic bézier curve's en nu het eindelijk gelukt is ben ik er niet eens blij mee. Waarom gebruik ik eigenlijk geen normale bezier curve (C) in plaats van de Q? Ik kon geen antwoord vinden op deze vraag. Ik gebruikte Q alleen omdat ik hem eerst vond, misschien was C wel precies wat ik nodig had. Maar 1 manier om hier achter te komen.
Ik herschreef mijn Q curve in een C formaat in de svg path visualizer en kwam zo op een nieuwe path M1300,0 C 1350,0 1350,70 1300,70
Ik herschreef met dit nieuwe path als basis mijn quadratic bezier curves naar bezier curves.
Precies wat ik wou!
Nu de moeilijkste curve nog
Omdat deze curve wat complexer is heb ik er nu wel voor gekozen een quadratic bezier curve te gebruiken
Zoals altijd begon ik door hem in de svg path visualizer te maken.
Na zoveel trial en error weet ik ook echt wat ik doe nu, ik kan nu redelijk makkelijk Q en C curves schrijven.
Ik schreef ze hierna uit in code.
Ik heb op dit moment mijn lijnen in 5 secties gemaakt met 5 lijnen in elke sectie. Dit zorgt ervoor dat ik 25 svg's heb die de lijnen tekenen.
Ik ga proberen dit te doen met 5 lange svg paths die de hele lijn bevatten (1 voor elke kleur).
Ik begon eerst door dit te maken in de svg path visualizer
Ik kwam hiermee op deze path
M0 0 L1500 0 C 1600,0 1600,168 1500,168 L400 168 Q100,170 100,500 L100, 1000
Ik heb hiermee 5 lange lijnen getekent in mijn code, 1 per kleur (ipv 25 korte wat ik eerst had)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1700 1100">
<path
d="M0 50 L1500 50 C 1700,50 1700,318 1500,318 L400 318 Q195,310 200,550 L200, 1000"
stroke="var(--color-linePurple)"
stroke-width="15"
fill="transparent"
/>
<path
d="M0 70 L1500 70 C 1673,70 1673,298 1500,298 L400 298 Q180,290 180,530 L180, 1000"
stroke="var(--color-lineGreen)"
stroke-width="15"
fill="transparent"
/>
<path
d="M0 90 L1500 90 C 1646,90 1646,278 1500,278 L400 278 Q160,275 160,510 L160, 1000"
stroke="var(--color-lineYellow)"
stroke-width="15"
fill="transparent"
/>
<path
d="M0 110 L1500 110 C 1619,110 1619,258 1500,258 L400 258 Q140,260 140,490 L140, 1000"
stroke="var(--color-lineOrange)"
stroke-width="15"
fill="transparent"
/>
<path
d="M0 130 L1500 130 C 1592,130 1592,238 1500,238 L400 238 Q125,245 120,470 L120, 1000"
stroke="var(--color-lineRed)"
stroke-width="15"
fill="transparent"
/>
</svg>Ik heb hieronder nog een keer duidelijk proberen te maken wat het pad precies tekent.
Ik probeerde eerst de auto te laten animeren doormiddel van css animaties.
@keyframes skrrt {
0% {
transform: translateX(0) translateY(0) rotate(0);
}
70% {
transform: translateX(-380%) translateY(0) rotate(0);
}
72% {
transform: translateX(-382%) translateY(2%) rotate(-18deg);
}
74% {
transform: translateX(-384%) translateY(4%) rotate(-36deg);
}
76% {
transform: translateX(-386%) translateY(6%) rotate(-54deg);
}
78% {
transform: translateX(-388%) translateY(8%) rotate(-72deg);
}
80% {
transform: translateX(-390%) translateY(10%) rotate(-90deg);
}
100% {
transform: translateX(-390%) translateY(30%) rotate(-90deg);
}
}Maar om een smooth animation te krijgen kwam ik al snel op heel veel keyframes en het was toen nog heel choppy. Ik zat toen te denken, dit kan vast wel anders.
Ik kwam toen op animateMotion. Hiermee kon ik een image een svg path laten volgen. Perfect voor dit dus aangezien ik al helemaal svg paths heb uitgeschreven.
<path id="racePath"
class="animatePurple"
d="M0 50 L1500 50 C 1700,50 1700,318 1500,318 L400 318 Q195,310 200,550 L200, 1000"
stroke="var(--color-linePurple)"
stroke-width="15"
fill="transparent"
/>
<image
href="assets/car2.svg"
id="raceCar"
x="70"
y="-80"
height="100px"
width="100px"
>
<animateMotion
xlink:href="#raceCar"
dur="10s"
repeatCount="indefinite"
rotate="auto"
>
<mpath xlink:href="#racePath" />
</animateMotion>
</image>Ik heb hierboven dus een animateMotion gezet op de paarse lijn. Je moet in een animateMotion ook een path aangeven om te volgen maar als je al een existing path hebt, in dit geval de paarse lijn, kun je mpath gebruiken om daar naar te verwijzen. Met het mpath element verwijs ik naar de id= "racepath" van de path om zo aan te geven dat ze bij elkaar horen.
Dit is een simpele animatie van 10 seconden die oneindig door blijft gaan waarin de image het aangewezen pad volgt en automatisch meerotate met de curves (in dit geval de quadratic bezier curve en bezier curve).
Een Syzygie is blijkbaar als de maan, aarde en zon op een lijn staan.
Ik heb daarom vinyl's in de kleuren van die planeten gemaakt om de planeten te representeren in de stijl van de rest van de website. Deze geef ik een css animatie zodat ze op een lijn komen te staan en toon hiermee een syzygie.
@keyframes syzygal1 {
0%, 100% {
transform: translateX(-30%);
}
50% {
transform: translateX(-300%);
}
}
@keyframes syzygal2 {
0%, 100% {
transform: translateX(-10%);
}
50% {
transform: translateX(-150%);
}
}
@keyframes syzygal3 {
0%, 100% {
transform: translateX(-10%);
}
50% {
transform: translateX(0%);
}
}
@keyframes move {
0%, 100% {
scale: 1;
}
50% {
scale: 1.2;
}
}
.gray {
animation: syzygal1 9s infinite, move 9s cubic-bezier(0.47, 0, 0.745, 0.715) infinite;
}
.orange {
animation: syzygal2 9s infinite, move 9s cubic-bezier(0.47, 0, 0.745, 0.715) infinite;
}
.blue {
animation: syzygal3 9s infinite, move 9s cubic-bezier(0.47, 0, 0.745, 0.715) infinite;
}Dit was opzich een beetje een meh idee naar mijn mening, het was gewoon moeilijk iets leuks te bedenken voor dit.
Ik heb het uiteindelijk wat opgeleukt door er een mooie gradient box-shadow aan toe te voegen.
@keyframes vinyl {
0%,
100% {
scale: 1;
border-radius: 50%;
box-shadow:
-5px -5px 5px 0px var(--color-linePurple),
5px -5px 5px 0px var(--color-lineGreen),
-5px 5px 5px 0px var(--color-lineYellow),
5px 5px 5px 0px var(--color-lineOrange),
-5px -5px 5px 0px var(--color-lineRed);
}
50% {
scale: 1.2;
border-radius: 50%;
box-shadow: none;
}
}Ik heb music notes toegevoegd aan de jukebox doormiddel van deze codepen ik heb deze de kleuren gegeven van de retro line art.
@keyframes notes {
0% {
transform: scale(1) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1.5) translate(70%, -90%);
}
80% {
opacity: 1;
transform: scale(1.5) translate(140%, -180%);
}
100% {
transform: scale(1.5) translate(140%, -180%);
opacity: 0;
}
}Ook heb ik de jukebox een shake animatie gegeven
@keyframes shake {
0%,
100% {
transform: translateX(0) rotate(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-20px) rotate(-5deg);
}
20%,
40%,
60%,
80% {
transform: translateX(20px) rotate(5deg);
}
}Dit begint met een zware shake en deze shake wordt langzaam en rustiger.
Omdat ik zoveel css animaties heb zocht ik naar iets om de performance te verbeteren. Ik kwam toen op will-change. Zo geef je vooraf aan je browser aan wat je mogelijk gaat veranderen zodat het zich daarop voor kan bereiden.
.animateGreen,
.animateYellow,
.animateOrange,
.animateRed {
will-change: stroke-dashoffset, visibility;
}
.animatePurple {
will-change: stroke-dashoffset;
}
main,
.girl1,
.girl2,
.blue,
.orange,
.gray,
.jukebox,
#raceCar,
.tile,
.music {
will-change: visibility, opacity;
}
.gray:hover,
.orange:hover,
.blue:hover,
#raceCar:hover,
.tile:hover {
will-change: filter;
}
.gray,
.blue,
.orange {
will-change: transform, animation-play-state, box-shadow, border-radius;
}
.container {
will-change: box-shadow;
}
.noot-1,
.noot-2,
.noot-3,
.noot-4,
.noot-5 {
will-change: transform, opacity;
}
.noot-1:hover,
.noot-2:hover,
.noot-3:hover,
.noot-4:hover,
.noot-5:hover {
will-change: filter, animation-play-state;
}
.jukebox {
will-change: transform;
}
.jukebox:hover {
will-change: filter;
}