Pesquisar neste blog

22/03/2023

Marquee animation CSS

Saída gerada










<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMG Hover</title>
    <meta http-equiv="refresh" content="20">
</head>
<style>
    *{
        box-sizing: border-box;
    }
    body{
        --space: 3rem;
        min-height: 100vh;
        display: grid;
        align-content: center;
        overflow: hidden;
        gap: var(--space);
        width: 100%;
        font-size: 1.5rem;
        line-height: 1.5;
    }
    .marquee{
        --duration: 4s;
        --gap:var(--space);
        display: flex;
        overflow: hidden;
        user-select: none;
    }
    .marquee__group{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: var(--gap);
        min-width: 100%;
        animation: scroll var(--duration) linear infinite;
    }
    @media(prefers-reduced-motion:reduce){
        .marquee__group{
            animation-play-state: paused;
        }
    }
    .marquee__group h4{
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 1rem;
        border: 1px solid #ccc;
        padding: 3rem;
    }
    @keyframes scroll{
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(calc(-100% - var(--gap)));
        }
    }
</style>
<body>
    <div class="marquee">
        <div class="marquee__group">
            <h4>Business A</h4>
            <h4>Business B</h4>
            <h4>Business C</h4>
            <h4>Business D</h4>
            <h4>Business E</h4>
            <h4>Business F</h4>
            <h4>Business G</h4>
        </div>
        <div aria-hidden="true" class="marquee__group">
            <h4>Business A</h4>
            <h4>Business B</h4>
            <h4>Business C</h4>
            <h4>Business D</h4>
            <h4>Business E</h4>
            <h4>Business F</h4>
            <h4>Business E</h4>
        </div>
    </div>
</body>
</html>

Nenhum comentário: