I'm a wordpress developer, I know nothing from JS yet. I have found a way to make a marquee loop but I need the code in vanilla JS
this is what I have:
HTML:
<div class="marquee">
<div class="bar">
<a href="www.google.com">DIGITAL MARKETING ·</a>
<a href="www.google.com">BRANDING ·</a>
<a href="www.google.com">GRAPHIC DESIGN </a>
<a href="www.google.com">WEBSITE DESIGN + DEVELOPMENT ·</a>
<a href="www.google.com">SITE MAINTENANCE ·</a>
<a href="www.google.com">SEO MARKETING ·</a>
<a href="www.google.com">SOCIAL MEDIA MARKETING ·</a>
<a href="www.google.com">PHOTOGRAPHY ·</a>
<a href="www.google.com">DIGITAL MARKETING ·</a>
<a href="www.google.com">BRANDING ·</a>
<a href="www.google.com">GRAPHIC DESIGN ·</a>
<a href="www.google.com">WEBSITE DESIGN + DEVELOPMENT ·</a>
<a href="www.google.com">SITE MAINTENANCE ·</a>
<a href="www.google.com">SEO MARKETING ·</a>
<a href="www.google.com">SOCIAL MEDIA MARKETING ·</a>
<a href="www.google.com">PHOTOGRAPHY ·</a>
</div>
</div>
CSS:
.bar a{
text-decoration: none;
color: black;
}
.marquee {
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
JQUERY:
$('.marquee').marquee({
//speed in milliseconds of the marquee
duration: 15000,
//gap in pixels between the tickers
gap: 10,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
I tried chatgpt but withouth JS knowledge I don't find it possible