Sprint 6 - The Startup

Week 2

Maandag 13 januari 2025

Workshop Interaction Design

Wireflows getekend van verschillende interacties:

User story

Zie issue: https://github.com/julia-stevens/the-startup-responsive-interactive-website/issues/29

Wireflow:

Button states:

Infinite animerende banner

https://github.com/user-attachments/assets/560a1381-6008-4184-9fc5-bc5d4beac97c

.about-slider {
    /* Flex parent */
    display: flex; 
    gap: 0;

    width: calc(60vw * 7);

    --animation-xs: bannermove 19s linear infinite;
    --animation-s: bannermove 23s linear infinite;
    --animation-m: bannermove 28s linear infinite;
    --animation-l: bannermove 35s linear infinite;
    --animation-xl: bannermove 42s linear infinite;

    animation: var(--animation-xs);

    @media screen and (min-width: 580px) {
        animation: var(--animation-s);
    }

    @media screen and (min-width: 900px) {
        animation: var(--animation-m);
    }

    @media screen and (min-width: 1400px) {
        animation: var(--animation-l);
    }

    @media screen and (min-width: 1600px) {
        animation: var(--animation-xl);
    }

    @media screen and (prefers-reduced-motion) {
        animation-play-state: paused;
    }

    &:hover {
        animation-play-state: paused;
    }
}

@keyframes bannermove {
    0% {
        translate: 0 0;
    }
    100% {
        translate: -50% 0;
    }
}