Banner component

[lisagjh]

Ik ben begonnen met de banner met de member logo's te maken.

Idee

Ik wil zorgen dat er twee rows zijn, die standaard roteren in anderen richtingen. Als je scrollt, scrollt ie sneller mee. Als je terug scrollt, misschien de andere kant op?

Ontwerp

Progress

Veel van de logo's in de database zijn PNGs, wit zonder achtegrond. Dit maakt het ontwerpen iets moeilijker, want het ziet er gewoon minder uit. Ik kan moeilijk doen en alle logo's in directus vervangen. Of zo laten, en kijken of ik nog iets kan maken van het design.

Code

{#each data as item}
      {#if item.logo}
        <picture>
          <source
            srcset="https://fdnd-agency.directus.app/assets/{item.logo}format=avif"
            type="image/avif"
          />
          <source
            srcset="https://fdnd-agency.directus.app/assets/{item.logo}?format=webp"
            type="image/webp"
          />
          <img
            src="https://fdnd-agency.directus.app/assets/{item.logo}"
            alt=""
            height="150"
          />
        </picture>
      {/if}
    {/each}

+page.svelte - data meegeven aan de component

<Banner data={data.agencies} />