Question 10747 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Trying to reverse the direction of marquee loop javascript – Jquery

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?

Tags:

2

Answers


  1. 0

    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. 0

    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