Блог

Главная - Вопросы по программированию - Как заставить текст прокручиваться горизонтально в скрипте кнопки с 2 переменными?

Как заставить текст прокручиваться горизонтально в скрипте кнопки с 2 переменными?

#javascript #html #button #scroll

#javascript #HTML #кнопка #прокрутка

Вопрос:

Нашей компании был предоставлен этот фрагмент кода кнопки для размещения на нашем веб-сайте для подключения к нашему виртуальному стенду. Я бы хотел, чтобы оба набора текста прокручивались горизонтально по странице (слева направо), в зависимости от статуса стенда. Может кто-нибудь мне помочь? Это код:

 <script src="https://www.websitehere"></script>
<div class="btn-booth-container" 
style="cursor: pointer; 
color: #F7F6F2; 
background-color: #507C8F;
padding: 10px;
text-align: center;
font-weight: bold;"

onclick="openIframe('https://www.websitehere/booth/XXXX//?embed=true')" 
data-boothid="XXXX" 

data-boothon="CLICK HERE TO CHAT WITH US IN OUR VIRTUAL BOOTH" 

data-boothoff="SCHEDULE A VIRTUAL MEETING" 

id="div_booth_status"></div>
<script>updateBoothStatus();
</script>

Подводя итог — я хочу, чтобы текст с данными и текст с данными прокручивались горизонтально по странице.
Это весь код, к которому у меня есть доступ.

Заранее спасибо!

Ответ №1:

Я понятия не имею, как вы отслеживаете состояние загрузки, поэтому я просто буду использовать a :hover для переключения между ними.

Поскольку у вас есть тексты в качестве атрибутов данных, я могу отображать их через псевдоэлементы (до и после). Я добавил position: absolute , left: 0px и right: 0px чтобы они занимали position: relative ширину родительского элемента.

Я, наконец, создаю непрерывную анимацию для обоих псевдоселекторов, которая преобразуется от -100% (из-за отскока влево) до 100% (из-за отскока вправо).

 .btn-booth-container {
  --booth-container-height: 20px;
  
  cursor: pointer; 
  color: #F7F6F2; 
  background-color: #507C8F;
  height: var(--booth-container-height);
  text-align: center;
  font-weight: bold;
  
  /* ADDED */
  position: relative;
  overflow: hidden;
}

.btn-booth-container::before,
.btn-booth-container::after {
  position: absolute;
  display: inline-block;
  right: 0px;
  left: 0px;
  top: calc(var(--booth-container-height) / 8);
  
  animation: my-move 10s linear infinite;
  text-align: right;
}

.btn-booth-container::before {
  content: attr(data-boothon);
  opacity: 1;
}

.btn-booth-container:hover::before {
  opacity: 0;
}

.btn-booth-container::after {
  opacity: 0;
  content: attr(data-boothoff);
}

.btn-booth-container:hover::after {
  opacity: 1;
}

@keyframes my-move {
  from  {transform: translateX(-100%)}
  to    {transform: translateX(100%);}
}  
 <div class="btn-booth-container" 
      onclick="openIframe('https://www.websitehere/booth/XXXX//?embed=true')" 
      data-boothid="XXXX" 
      data-boothon="CLICK HERE TO CHAT WITH US IN OUR VIRTUAL BOOTH" 
      data-boothoff="SCHEDULE A VIRTUAL MEETING" 
      id="div_booth_status"></div>

Ответ №2:

Честно говоря, я не уверен на 100%, что понимаю вопрос. Вот то, что, как я понял, вы хотите достичь

 <!-- <script src="https://www.websitehere"></script> this line is commented for the demo only -->

<!-- It is not a good practice to add <style> tag inside the <body> but but it should work. It looks like you have no choice…  -->
<style>
  @keyframes scroll {
    0% {right: 100%}
    100% {right: 0}
  }
</style>
<div
  class="btn-booth-container"
  style="cursor: pointer; 
    color: #F7F6F2; 
    background-color: #507C8F;
    padding: 10px;
    height: 1em;
    text-align: center;
    font-weight: bold;
    position: relative;"
  onclick="openIframe('https://www.websitehere/booth/XXXX//?embed=true')">
  <div
    style="position: absolute;
      animation: scroll 4s linear infinite"
    data-boothid="XXXX"
    data-boothon="CLICK HERE TO CHAT WITH US IN OUR VIRTUAL BOOTH"
    data-boothoff="SCHEDULE A VIRTUAL MEETING"
    id="div_booth_status">DEMO</div>
</div>

<!-- <script>updateBoothStatus();</script> this line is commented for the demo only -->

Удалите слово «ДЕМО» перед копированием / вставкой кода, это было, ну …, для демонстрации.

animation: scroll 4s linear infinite здесь вы можете изменить анимацию