CSS Newsticker с задержкой между анимациями (и другими проблемами) - PullRequest
Новая
       43

CSS Newsticker с задержкой между анимациями (и другими проблемами)

0 голосов
/ 27 ноября 2018

в первую очередь: я не очень разбираюсь в CSS.Мне удалось заставить работать CSS Newsticker (источник: Тикер Pure CSS без абсолютного позиционирования ).Но, к сожалению, это не работает, как задумано.

  • Как мне избавиться от задержки между завершением анимации и перезапуском?
  • Как мне избежать исчезновения текста тикера перед выполнением полного тикера-Заворачивать?Редактировать: См. Здесь https://jsfiddle.net/uLvzrtg0/ - кажется, что это происходит с фиксированной шириной?

  • Каков наилучший способ сделать переменную времени анимации зависимой от длины текста ввода?(Я пробовал Javascript, и он работает довольно хорошо - за исключением IE) 

    <script>
var vSpeed = (5+params[0].length*.18)+"s";
    if(params[0]=="")
    {
      document.getElementById("tickerwrap").style.display="none";
    }else{
    document.getElementById("ticker").style["-webkit-animation-duration"] = vSpeed;  
    document.getElementById("ticker").style["animation-duration"] = vSpeed;  
    }

JSFiddle с примером: https://jsfiddle.net/08921sek/

<p>Content before ticker</p>
  <div id="tickerwrap">
    <div id="ticker">
This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.
    </div>
  </div>
<p>Content after ticker</p>
<style>
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}


/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}

</style>

Спасибо за любой совет!И извините, если я не следовал некоторым правилам!

С наилучшими пожеланиями shoop

1 Ответ

0 голосов
/ 27 ноября 2018

Вы можете запустить анимацию с transform: translate3d(0, 0, 0); И для этого вам могут потребоваться дополнительные изменения, такие как создание тикера padding-right: 100%; и тикеррапа padding-left: 100%;.По второму вопросу (избегайте исчезновения текста), вам может понадобиться добавить еще один контейнер и сделать его overflow:hidden;.

См. Фрагмент ниже: 

/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding-left: 100%;
}


/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  padding-right: 100%;
}

#container {
  overflow:hidden;
  width:100%;
}
<p>Content before ticker</p>
  <div id="container">
  
  <div id="tickerwrap">
    <div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
  </div>
  </div>
<p>Content after ticker</p>

Вы также можете проверить это здесь .

Надеюсь, этот wilkl поможет вам!:)

...