Member Avatar for Randya

I am trying to find a way to eliminate the spacing that takes place with a basic marquee. For example, I am trying to make 10 photos marquee and when the 10th photo passes I want the first photo to repeat again directly behind it so that there is never any gap in the marquee.

Does anyone know how I would do this?

  • 2 Contributors
  • 2 Replies
  • 56 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by Randya

Dani AI

Generated

— is right that the old <marquee> behaviour causes that visible gap: it restarts the sequence after it leaves the viewport. The usual, robust fix is to create a continuously scrolling "track" that contains two copies of your image sequence and move that track with a linear CSS animation (or with JS if you need variable speed based on width). Duplicating the items guarantees the second set follows immediately, so there is no gap.

A minimal example (structure only):

<div class="marquee">
  <div class="track">
    <img src="img1.jpg" alt="">
    ... up to img10 ...
    <!-- repeat the same 10 images in the same order -->
    <img src="img1.jpg" alt="">
    ... img10 again ...
  </div>
</div>

.track { display:flex; animation: scroll 20s linear infinite; }
.track img { display:block; flex:0 0 auto; }
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

Tips: remove margins/inline whitespace between images (use display:block or font-size:0 on the container), use animation-timing-function: linear, and add a :hover pause and prefers-reduced-motion handling for accessibility. If your images or container are responsive, measure the track width in JS and compute a matching animation duration to keep speed consistent. Note that <marquee> is obsolete; prefer CSS animation for control and accessibility (see MDN on CSS animation: [https://developer.mozilla.org/en-US/docs/Web/CSS/animation]).

Recommended Answers

All 2 Replies

Member Avatar for Randya

Almost Bob

the marquee extension behaves like that, exits the display area before restarting,
this prior thread http://www.daniweb.com/forums/thread180864.html may help


That's not quite what I am looking for but thank you for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.