Logo Mar

by Louis Walch

HTML

<div class="marquee block">

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>


    <!-- Clone -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>

</div>

SCSS

.marquee {
          animation: marquee-scroll 30s linear infinite running;
          // animation-direction: reverse;
          display: flex;
          padding: 20px 0;
          background-color: yellow;
          width: fit-content;
          user-select: none;

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

          DIV {
            text-align: center;
            width: 100px;
            margin: 0 50px;
            background-color: pink;
          }

          IMG {
            pointer-events: none;
          }
        }

        @keyframes marquee-scroll {
          0% {
            transform: translateX(0)
          }

          100% {
            transform: translate(-50%)
          }
        }



        .marquee-1 {
          padding: 30px 0;
          background-color: pink;
        }

        .swiper-wrapper {
          transition-timing-function: linear;
        }

        .swiper-slide {
          width: fit-content;
        }

        .img-wrapper {
          pointer-events: none;
          // margin-left: 40px;
          // margin-right: 40px;
          height: 100px;
        }

JavaScript

// https://www.cssscript.com/demo/infinite-marquee-carousel/

var vanillaMarquee = document.getElementsByClassName('.marquee');
var isDragging = false;
const dragStart = (e) => {
    if (!isDragging) return;
    c('dragStart');
    c(e.movementX);
    vanillaMarquee.scrollLeft -= e.movementX;
};
const stopDragging = () => {
    isDragging = false;
};
vanillaMarquee.addEventListener('mousedown', () => isDragging = true);
vanillaMarquee.addEventListener('mousemove', dragStart);
window.addEventListener('mouseup', stopDragging);