Analyseren

Tijdens deze ronde van het roulette kwam ik uit op "Magical Baroque" View Transition.
Dit is gebaseerd op het interieur van een kerk of kathedraal met wat 'magische' details.

Ik ben meteen begonnen met het maken van een moodboard, hierin kwam ik al snel achter een idee en een kleurenpalet dat ik wil gebruiken en wat ideeën in een dag en nacht sfeer. Aangezien onze site nog geen optie voor darkmode had wou ik deze graag maken.

Link moodboard: https://www.figma.com/design/h4zGHUWd6q5CNdt00XCuIT/Untitled?node-id=0-1&p=f&t=7vd6hafxcQNNTCRc-0

Foto:

Ontwerpen

Eigenlijk wist ik meteen al wat ik wou gaan bouwen dus heb ik wat minder aan ontwerpen besteed. Iets wat ik wel graag in de site was is een custom cursor. Deze heb ik al een aantal keer gebruikt en was dat van plan weer te gaan doen. Aangezien mijn theme magical was kreeg ik een tip om een toverstokje te maken. Deze heb ik in ProCreate uitgetekend:

image

Bouwen

CSS

Dark/lightmode

Voort het veranderen van de kleur op de pagina heb ik 2 verschillende datatheses neergezet, light en dark. Deze zijn later met javascript uit te voeren. Ik heb hiervoor eerst de custom properties aangepast naar de nieuwe kleuren die ik uit het moodboard gehaald heb.

https://github.com/itsValyria/Oncollaboration/blob/c3ec3c70d08057e5a1e304b1d0fd14bb02d3fb04/static/css/global.css#L61-L74

Background

Eerst begon ik met het kiezen van een background die op elke pagina zichtbaar is. Er bestaan sites die een bepaald patroon gebruiken als achtergrond, ik kwam er al snel 1 tegen die goed past bij het baroque thema.

https://github.com/itsValyria/Oncollaboration/blob/c3ec3c70d08057e5a1e304b1d0fd14bb02d3fb04/static/css/global.css#L89-L99

Hiermee zorgt ervoor dat de background heel veel keer het zelfde patroon herhaald van de gradient, dit zorgt voor een mooie achtergrond.

View Transition

Voor de view transition heb ik gekozen om te veranderen van lightmode(old) naar de darkmode(new). Dit doormiddel van een SVG Mask. Het mask zorgt ervoor dat de transition smooth overloopt met een cirkel dat over de pagina verschijnt. Aan deze light en dark themes zitten ook een animatie van een aantal seconden aan samen met een keyframe.

::view-transition-new(root) {
  mask: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="20" cy="20" r="18" fill="white" filter="url(%23blur)"/></svg>") center / 0 no-repeat;
  animation: scale 1s;
}


::view-transition-old(root),
html[data-theme='dark']::view-transition-old(root) {
  animation: none;
  z-index: -1;
}
html[data-theme='dark']::view-transition-new(root) {
  animation: scale 2s;
}


html[data-theme='light']::view-transition-new(root) {
  animation: scaleREVERSE 1s;
}


::view-transition-old(root),
html[data-theme='dark']::view-transition-old(root) {
  animation: none;
  z-index: -1;
}


@keyframes scale {
  to {
    rotate: 360deg;
    mask-size: 200vmax;
  }
}


@keyframes scaleREVERSE {
  to{
    mask-size: 200vmax;
  }
}

JS

Tenslotte heb ik nog 2 dingen stukjes javascript geschreven. Hieronder een klein stukje om de switch tussen light en dark mogelijk te maken.:

https://github.com/itsValyria/Oncollaboration/blob/c3ec3c70d08057e5a1e304b1d0fd14bb02d3fb04/src/lib/Constructions/navigation.svelte#L4-L28

Om het nog over de top te maken heb ik ook nog jsConfetti gebruikt, zo ziet de gebruiker bij elke hover over een link heel veel emojis over het hele scherm. Ik heb er nog voor gekozen om deze in een magical style te houden door een toverstokje, konijn, hoed en veel verschillende sterren te laten vliegen.

  onMount(() => {
    jsConfetti = new JSConfetti();


    const links = document.querySelectorAll('a');
    links.forEach(link => {
      link.addEventListener('mouseover', handleConfetti);
    });
  });


  function handleConfetti() {
    jsConfetti.addConfetti({
      emojis: ['⭐️', '🎩', '🌟', '🐰'],
      emojiSize: 80,
      confettiNumber: 10,
    });
  }

Resultaat