I need to convert JQUERY code to Vanilla JS

32 views Asked by At

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

0

There are 0 answers