scrolldriven animation

[christoph3r3w]

@christoph3r3w

Beschrijving

For the scroll-driven creative coding peak, I received the following prompt

• Syzygal : an alignment of three celestial objects, as the sun, the earth, and either the moon or a planet
• Risoprint : Risograph printing is a technique best described as a ‘digital screen printing’. The process is similar to screen printing, but with the convenience of an office copier.

I went through a small DLC to create the following

Wat deze ticket omvat

• Onderzoek ( what the best way is to build this component).
• Conventies
• Links and information that could be useful while building the component
• Otwikkel component
• Taken

standards & conventions #4

• Zoveel mogelijk werken met de atomic components methode (DRY)
• Mobile First
• Comments toevoegen aan complexe code zodat dit voor iedereen in de squad te begrijpen is
• Kebab case
• Responsive
• Progressive enhancement
• Toegankelijk

Onderzoek & Referencies

Media of how it can and maybe should look.
How did you come to this code or aesthetical decision

Risoprint

https://www.risopop.com/what-is-riso
https://www.pinterest.com/search/pins/?rs=ac&len=2&q=risoprint&eq=risop&etslf=3601

Syzygy

https://osandoos.com/Syzygy-series
https://www.planetary.org/video/eclipse-qa-with-bill-nye-what-does-syzygy-mean

Ontwikkeling

Image or description of the development

I used animation(-timeline), transform with perspective, and text-shadows for the effect in plain CSS.

Taken

• layer rotate animation - 4700b9b
• Risoprint interpretation - 3e29d35
• card alignment - 7dedeb5

---

@Mossati

Beschrijving

Ik ga een gradient progress bar bouwen die aangeeft hoever je bent in de wizard.

Taken

• Gradient background
• Animatie voor het tonen van de bar
• Animatie voor het vullen van de bar

Inspiratie

Wireflow

???

Breakdown Schets

Ik heb geen schets gemaakt maar dit is de code die ik heb gebruikt.
Ik heb bewust gekozen om geen progress element te kiezen omdat ik de value niet kon animeren.

<div class="wizard-progress">
      <p>Wizard Progress</p>
      <div class="container" aria-label="progress-container">
        <div class="value" aria-label="progress-value"></div>
      </div>
    </div>

Testen

Wegens het gebruik van divs heb ik aria-labels gebruikt om een naam te geven aan de elementen.
De Lighthouse test geeft niks aan voor de progress bar.

Resultaat