How to do a marquee in BB?

Beaver Builder
1

Hey,
Pretty much the question in the title. But if you have any alternative that are easy to integrate it would be great.

All the best,

2

This is my website: howickcatholic.org.nz - courtesy of Claude :slightly_smiling_face:

If this is what you want, paste the following into a HTML module: -

.scrolling-line { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff8e1; border-top: 2px solid #e6b800; color: black; overflow: hidden; z-index: 9999; padding: 6px 0; } .ticker-track { display: inline-flex; white-space: nowrap; padding: 4px 0; font-size: 1.1em; }
  Welcome to our parish website  ·····     ·····  Next Alpha programme starts 2 August – sign up now  ·····     ·····  Visit the parish Noticeboard  ·····     ·····  Pope Leo has issued a document about AI – see Noticeboard.  Also his life story there ·····     
 ·····
  
</span>
<span class="ticker-copy">
   &nbsp;&nbsp;Welcome to our parish website &nbsp;·····&nbsp;&nbsp;&nbsp;&nbsp;
  <span style="color:red;">····· &nbsp;Next Alpha programme starts 2 August – sign up now &nbsp;·····&nbsp;&nbsp;&nbsp;&nbsp;</span>
  ····· &nbsp;Visit the parish Noticeboard &nbsp;·····&nbsp;&nbsp;&nbsp;&nbsp;
  <span style="color:red;">····· &nbsp;Pope Leo has issued a document about AI – see Noticeboard.&nbsp;&nbsp; Also his life story there ·····&nbsp;&nbsp;&nbsp;&nbsp;</span>
</span>
(function () { const track = document.getElementById('ticker-track'); const copy = track.querySelector('.ticker-copy'); const pauseMs = 2500; const speed = 100;

let offset; // how far we’ve scrolled (px). negative = text still coming in from right
let copyWidth;
let lastTime = null;
let pauseUntil = 0;
let initialized = false;

function init() {
copyWidth = copy.offsetWidth;
const containerWidth = track.parentElement.offsetWidth;
offset = -containerWidth; // start with text just off the right edge
initialized = true;
requestAnimationFrame(step);
}

function step(timestamp) {
if (!initialized) return;
if (!lastTime) lastTime = timestamp;

const now = timestamp;

if (now < pauseUntil) {
  // Still pausing — hold position, keep rAF alive
  lastTime = now;
  requestAnimationFrame(step);
  return;
}

const delta = (now - lastTime) / 1000;
lastTime = now;

const prevOffset = offset;
offset += speed * delta;

// Did we cross zero this frame? (text start arriving at left edge)
if (prevOffset < 0 && offset >= 0) {
  offset = 0;
  pauseUntil = now + pauseMs;
  track.style.transform = 'translateX(0px)';
  requestAnimationFrame(step);
  return;
}

// Seamless loop: once past one full copy, wrap back
if (offset >= copyWidth) {
  const prevWas = offset;
  offset -= copyWidth;
  // If the wrap itself crossed zero, pause
  if (prevWas >= copyWidth && offset >= 0 && offset < speed / 30) {
    offset = 0;
    pauseUntil = now + pauseMs;
    track.style.transform = 'translateX(0px)';
    requestAnimationFrame(step);
    return;
  }
}

track.style.transform = 'translateX(' + (-offset) + 'px)';
requestAnimationFrame(step);

}

setTimeout(init, 300);
})();

3

Formidable !
Best from France