[Atemporal Branding]

Hello there,

I’m trying to add the marquee bar to my website but it comes out like this…

View post on imgur.com

Thanks!

[Atemporal Branding]

Hey never mind. I just created a new announcement and it fixed itself.

But I still didn’t figure it out how to have it in a infinite loop? Like without that blank space when text ends. I’d like it to reappear without showing that negative space. Is there a way?

View post on imgur.com

Thanks again!

[Aakash Chakravarthy]

Hi there,

Thanks for using Announcer. The horizontal ticker works that way by default.

It is not possible to loop the ticker without a empty space.
This is a challenging implementaion since the plugin needs to consider a variety of conditions, styles, message content etc.

Except repeating the texts like you have done there is no idea I can suggest for this requirement now. Hope you understand 🙂

Thanks,
Aakash

[Atemporal Branding]

Hi Aakash,

Thank you very much for replying.

I’m gonna drop some code here that allowed me to create a slider like that with an infinite loop. Maybe it can give you an idea to implement in the plugin. Hope it works!

HTML and JavaScript

<div class=”outer”>
<!– This div is important! It lets us specify margin-left later on. –>
<div>
<div class=”loop”><div class=”content”> Lorem Ipsum Dovem ✦</div></div>
</div>
</div>

<script>
document.querySelectorAll(‘.outer’).forEach(el => {
let content = el.querySelector(‘.content’);

repeatContent(content, el.offsetWidth);

let slider = el.querySelector(‘.loop’);
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});

function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop

while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
</script>

CSS

/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */

.content {
font-family: “Inter”, sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #111111;
padding-left: 0.25em;
}

@media only screen and (max-width: 767px) {
.content {
font-size: 2rem !important;
padding-left: 0.25em;
}
}

.outer {
overflow: hidden; !important;
}

.outer div {
display: inline-block;
}

.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
}

@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}

@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between “outer” and “loop” */
}
}

[Author]

Posts