Vebego Component Library

Marquee 

<div class="mol-marquee">
    <div class="marquee">
        <div class="marquee-group">
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
        </div>
        <div class="marquee-group">
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="marquee-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
        </div>
    </div>
</div>
 
<div class="mol-marquee">
    <div class="marquee">
        <div class="marquee-group">
            {{#each logo}}
                <div class="marquee-item">
                    {{ render '@image' image merge=true}}
                </div>
            {{/each}}
        </div>
        <div class="marquee-group">
            {{#each logo}}
                <div class="marquee-item">
                    {{ render '@image' image merge=true}}
                </div>
            {{/each}}
        </div>
    </div>
</div>
 
{
  "logo": [
    {
      "image": {
        "src": "https://picsum.photos/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/230",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/500",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/280",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/230",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/500",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/280",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/230",
        "sources": false
      }
    }
  ]
}
  • Content: 
    @keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.mol-marquee {
    @apply m-auto max-w-[100vw];

    .marquee {
        @apply flex overflow-hidden select-none;

        .marquee-group {
            @apply flex flex-shrink-0 items-center min-w-full;
            animation: marquee 40s linear infinite;

            .marquee-item {
                @apply grid place-items-center mr-24;

                .atm-image img {
                    @apply h-32 object-contain max-w-xs;
                }
            }
        }
    }
}
  • URL: /components/raw/marquee/marquee.css
  • Filesystem Path: src/components/03-molecules/marquee/marquee.css
  • Size: 606 Bytes
  • Content: 
    // Count items in marquee and update css animation duration based on the number of items.
window.addEventListener('load', function () {
    var marquees = document.querySelectorAll('.mol-marquee');

    // Loop through each .mol-marquee element
    marquees.forEach(function (marquee, index) {
        var groups = marquee.querySelectorAll('.marquee-group');
        
        var count = 0;
        if (groups.length > 0) {
            count = groups[0].querySelectorAll('.marquee-item').length;
            
            // Calculate the animation duration (8s per item)
            var duration = (count * 8) + 's';
            
            // Set the animation duration on each element
            groups.forEach(function (group) {
                group.style.animationDuration = duration;
            });
        }
    });
});
  • URL: /components/raw/marquee/marquee.js
  • Filesystem Path: src/components/03-molecules/marquee/marquee.js
  • Size: 830 Bytes

No notes defined.