Javascript-форум - Бегущая строка

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Бегущая строка (https://javascript.ru/forum/dom-window/72242-begushhaya-stroka.html)

Бегущая строка

Помогите, пожалуйста, немного поправить скрипт бегущей строки. Когда страница загружается, то строка уже заполнена. А мне нужно, чтобы строка начинала бежать только после того, когда произойдет полная загрузка сайта. Можно так сделать? И еще один момент: как сделать паузу при наведении на строку? Спасибо большое!

var wrapper = document.querySelector('.currency_quotation'),
    marquee = document.querySelector('#marquee'),   
    wrapperWidth = wrapper.offsetWidth,
    marqueeWidth = marquee.scrollWidth;
function move() {
  var currentTX = getComputedStyle(marquee).transform.split(',');
  if( currentTX[4] === undefined ) {
    currentTX = -1;
  } else {
    currentTX = parseFloat(currentTX[4]) - 1;
  }
  
  if(-currentTX >= marqueeWidth) {
    marquee.style.transform = 'translateX(' + wrapperWidth + 'px)';
  
  } else {
    marquee.style.transform = 'translateX(' + currentTX + 'px)';
  }
}
var interval = setInterval(move, 20);

<style>.currency_quotation {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#marquee {
  white-space: nowrap;
}

#marquee p {
  display: inline;
  margin-right: 50px;
}</style>
<div class="currency_quotation">
  <div id=marquee>
    <p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
    <p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
  </div>
</div>

Бегущая строка

LADYX,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.currency_quotation {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#marquee {
  display:  inline-block;
  background-color: #FFD700;
  white-space: nowrap;
  transform: translateX(100%);
}

#marquee p {
  display: inline;
  margin-right: 50px;
}</style>
  <script>
window.addEventListener("load", function() {
  var wrapper = document.querySelector(".currency_quotation"),
  marquee = document.querySelector("#marquee"),
  wrapperWidth = wrapper.offsetWidth,
  marqueeWidth = marquee.scrollWidth,
  currentTX = wrapperWidth;
  wrapper.addEventListener("mouseenter", function() {
    wrapper.classList.remove("move");
  });
  wrapper.addEventListener("mouseleave", function() {
    wrapper.classList.add("move");
  });
  window.addEventListener("resize", function() {
  wrapperWidth = wrapper.offsetWidth;
  marqueeWidth = marquee.scrollWidth;
  currentTX = wrapperWidth;
})

  function move() {
    if (wrapper.classList.contains("move")) {
      currentTX--;
    }
    if (-currentTX >= marqueeWidth) {
      currentTX = wrapperWidth;
    }
    marquee.style.transform = "translateX(" + currentTX + "px)";
  }
  var interval = setInterval(move, 20);
});
  </script>
</head>

<body>

<div class="currency_quotation move">
  <div id=marquee>
    <p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
    <p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
  </div>
</div>


</body>
</html>

рони,
спасибо вам, да, всё супер!

рони,
прошу прощения, один момент. Делаю паузу так:

document.querySelector('.marquee_pause').onclick = function() {
  clearInterval(interval)
}

Работает. Но вот как мне сделать, чтобы при повторном нажатии бег возобновлялся. Помогите, пожалуйста, что я не так делаю?

Цитата:

Сообщение от LADYX

Но вот как мне сделать, чтобы при повторном нажатии бег возобновлялся

interval = setInterval(move, 20);

document.querySelector('.marquee_pause').onclick = function() {
     if (interval) { clearInterval(interval); interval = 0;}
     else interval = setInterval(move, 20);
  }

А лучше

document.querySelector('.marquee_pause').onclick = function() {
     wrapper.classList.toggle("move");
  }

Добавляю так:

window.addEventListener("load", function() {
  var wrapper = document.querySelector(".currency_quotation"),
  marquee = document.querySelector("#marquee"),
  wrapperWidth = wrapper.offsetWidth,
  marqueeWidth = marquee.scrollWidth,
  currentTX = wrapperWidth;
  wrapper.addEventListener("mouseenter", function() {
    wrapper.classList.remove("move");
  });
  wrapper.addEventListener("mouseleave", function() {
    wrapper.classList.add("move");
  });
  window.addEventListener("resize", function() {
  wrapperWidth = wrapper.offsetWidth;
  marqueeWidth = marquee.scrollWidth;
  currentTX = wrapperWidth;
})

document.querySelector('.marquee_pause').onclick = function() {
     wrapper.classList.toggle("move");
  }

  function move() {
    if (wrapper.classList.contains("move")) {
      currentTX--;
    }
    if (-currentTX >= marqueeWidth) {
      currentTX = wrapperWidth;
    }
    marquee.style.transform = "translateX(" + currentTX + "px)";
  }
  var interval = setInterval(move, 20);
});

Не работает. Что я неправильно делаю?
И еще подскажите, пожалуйста, как добавить условие, что если на паузе, то классу .marquee_pause добавлять класс .marquee_pause_active ?
Простите за кучу вопросов.

Dilettante_Pro,
кстати, а первый вариант работает

Цитата:

Сообщение от LADYX

Не работает

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.currency_quotation {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#marquee {
  display:  inline-block;
  background-color: #FFD700;
  white-space: nowrap;
  transform: translateX(100%);
}

#marquee p {
  display: inline;
  margin-right: 50px;
}</style>
  <script>
window.addEventListener("load", function() {
  var wrapper = document.querySelector(".currency_quotation"),
  marquee = document.querySelector("#marquee"),
  wrapperWidth = wrapper.offsetWidth,
  marqueeWidth = marquee.scrollWidth,
  currentTX = wrapperWidth;
  wrapper.addEventListener("mouseenter", function() {
    wrapper.classList.remove("move");
  });
  wrapper.addEventListener("mouseleave", function() {
    wrapper.classList.add("move");
  });
  window.addEventListener("resize", function() {
  wrapperWidth = wrapper.offsetWidth;
  marqueeWidth = marquee.scrollWidth;
  currentTX = wrapperWidth;
})
  document.querySelector('.marquee_pause').onclick = function() {
     wrapper.classList.toggle("move");
  }
  function move() {
    if (wrapper.classList.contains("move")) {
      currentTX--;
    }
    if (-currentTX >= marqueeWidth) {
      currentTX = wrapperWidth;
    }
    marquee.style.transform = "translateX(" + currentTX + "px)";
  }
  var interval = setInterval(move, 20);
});
  </script>
</head>

<body>

<div class="currency_quotation move">
  <div id=marquee>
    <p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
    <p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
  </div>
</div>
<button class="marquee_pause">Pause</button>

</body>
</html>

Dilettante_Pro,
да, увидел ошибку.
А если первый ваш вариант добавляю:

document.querySelector('.marquee_pause').onclick = function() {
     if (interval) { clearInterval(interval); interval = 0; this.toggleClass('marquee_pause_active'); }
     else interval = setInterval(move, 20);
  }

.marquee_pause_active {}

то также исправно работает. Но вот классу .marquee_pause класс .marquee_pause_active почему не добавляется, где снова моя ошибка?