skip to Main Content

I’m working from this code to create marquee, but I want the marquee to go left-to-right instead of right-to-left. I was able to make that happen but now the text doesn’t loop like it did in the original.

Can’t figure it out!

This is what I did to make the marquee scroll to the right:

function MarqueeOne(selector, speed) {
  const parentSelector = document.querySelector(selector);
  const clone = parentSelector.innerHTML;
  const firstElement = parentSelector.children[0];
  let i = 0;
  console.log(firstElement);
  parentSelector.insertAdjacentHTML('beforeend', clone);
  parentSelector.insertAdjacentHTML('beforeend', clone);

  setInterval(function () {
    firstElement.style.marginLeft = `${i}px`;
    if (i > firstElement.clientWidth) {
      i = 0;
    }
    i = i + speed;
  }, 0);
}

I just took the – out of the -${i}px on line 11. This reverses the direction but now the text just scrolls off of the screen.

here’s my CSS:

.marquee-one {
  overflow: hidden;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: flex;
    color: white;
}

.marquee-one h1{
  font-size: 5em;
  white-space: nowrap;
  text-transform: uppercase;
    color: white;
}

any advice on how to make this loop properly?

2

Answers


  1. Hi i have edited your code and it’s slide from left to right. I added flex-direction prop as row-reverse to css and it works fine. New css style is below.

    function Marquee(selector, speed) {
      const parentSelector = document.querySelector(selector);
      const clone = parentSelector.innerHTML;
    
      parentSelector.insertAdjacentHTML('beforeend', clone);
      parentSelector.insertAdjacentHTML('beforeend', clone);
      const firstElement = parentSelector.children[0];
      let i = 0;
      setInterval(function () {
        firstElement.style.marginRight = `-${i}px`;
        if (i > firstElement.clientWidth) {
          i = 0;
        }
        i = i + speed;
      }, 0);
    }
    window.addEventListener('load', Marquee('.marquee', 0.2))
    .marquee {
      overflow: hidden;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      display: flex;
      flex-direction: row-reverse;
    }
    
    .marquee h1{
      font-size: 5em;
      white-space: nowrap;
      text-transform: uppercase
    }
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Cemil</title></head>
      <body>
      <div class="marquee">
        <h1>Nepal * Himalayas * Mountains * Everest</h1>
      </div>
      </body>
    </html>
    Login or Signup to reply.
  2. The problem when you remove the minus sign is, even though the movement is in the right direction, it leaves a white space on the left. I propose to fixe that by translating h1

    function Marquee(selector, speed) {
      const parentSelector = document.querySelector(selector);
      const clone = parentSelector.innerHTML;
      const firstElement = parentSelector.children[0];
      let i = 0;
      console.log(firstElement);
      parentSelector.insertAdjacentHTML('beforeend', clone);
      parentSelector.insertAdjacentHTML('beforeend', clone);
    
      setInterval(function () {
        firstElement.style.marginLeft = `${i}px`;
        if (i > firstElement.clientWidth) {
          i = 0;
        }
        i = i + speed;
      }, 0);
    }
    
    //after window is completed load
    //1 class selector for marquee
    //2 marquee speed 0.2
    window.addEventListener('load', Marquee('.marquee', 0.2))
    .marquee {
      overflow: hidden;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      display: flex;
    }
    
    .marquee h1{
      font-size: 5em;
      white-space: nowrap;
      text-transform: uppercase;
      translate: -100% 0; /* I've added this line */
    }
    <div class="marquee">
      <h1>Nepal * Himalayas * Mountains * Everest</h1>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search