Прокрутка сообщения по одному в ключевых кадрах CSS - PullRequest
Новая
       10

Прокрутка сообщения по одному в ключевых кадрах CSS

0 голосов
/ 17 декабря 2018

Как прокрутить сообщения одно за другим с ключевыми кадрами CSS или с помощью js, который я использую (пробел с nowrap), но не работает 

.marquee-wrap {
  overflow: auto;
  margin: 0 auto;
  height: 80px;
  border: 1px solid #000;
  padding: 10px;
  font-size: 18px;
  line-height: 1.6;
}


/* increase duration to speed up scroll */

.marquee {
  animation: scrollUp 10s linear 1s infinite;
}

@supports (transform:translate3d(0px, 0px, 0px)) {
  .marquee-wrap {
    overflow: hidden;
  }
  .marquee {
    padding-top: 160px;
    white-space: nowrap;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .marquee-wrap {
    overflow: hidden;
  }
  /* ie11 hack */
  .marquee {
    padding-top: 160px;
  }
}

@keyframes scrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.marquee:hover {
  animation-play-state: paused
}
<div style="width: 100%; opacity: 0.5; background-color: rgb(255, 0, 0);color:white;">
  <div class="marquee-wrap">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" too="" style="float: right;">×</button>
    <div>
      <div class="marquee">
        <div>Rogue, inconspicuous motes of rock and gas descended from astronomers Sea of Tranquility billions upon billions
        </div><br>
        <div>Radio telescope cosmic ocean colonies consciousness, Hypatia! Culture. Prime number light years Hypatia.
        </div>

      </div>
    </div>
  </div>
</div>

Я перепробовал все варианты этого кода CSS, но никто не делает то, что мне нужно.

Спасибо

1 Ответ

0 голосов
/ 17 декабря 2018

Вы можете добавить отступы к нижней части элемента div, равного высоте выделения, - тогда текст исчезнет, ​​прежде чем появится следующее: 

.marquee-wrap {
  box-sizing:border-box;    /* add this so the marquee wrapper 80px height - if you want it to be 100px,just change this and the padding below */
  overflow: auto;
  margin: 0 auto;
  height: 80px;
  border: 1px solid #000;
  padding: 10px;
  font-size: 18px;
  line-height: 1.6;
}


/* increase duration to speed up scroll */

.marquee {
  animation: scrollUp 10s linear 1s infinite;
}

.marquee > div {
  padding-bottom:80px; /* height of mmarquee */
}
.marquee > div:last-child {
  padding-bottom:0;   /* reduces the time between animations */
}

@supports (transform:translate3d(0px, 0px, 0px)) {
  .marquee-wrap {
    overflow: hidden;
  }
  .marquee {
    padding-top: 160px;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .marquee-wrap {
    overflow: hidden;
  }
  /* ie11 hack */
  .marquee {
    padding-top: 160px;
  }
}

@keyframes scrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.marquee:hover {
  animation-play-state: paused
}
<div style="width: 100%; opacity: 0.5; background-color: rgb(255, 0, 0);color:white;">
  <div class="marquee-wrap">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" too="" style="float: right;">×</button>
    <div>
      <div class="marquee">
        <div>
            Rogue, inconspicuous motes of rock and gas descended from astronomers Sea of Tranquility billions upon billions
        </div>
        <div>
            Radio telescope cosmic ocean colonies consciousness, Hypatia! Culture. Prime number light years Hypatia.
        </div>
      </div>
    </div>
  </div>
</div>
...