Как создать тикеры подкатегории - PullRequest
Новая
       50

Как создать тикеры подкатегории

0 голосов
/ 23 сентября 2019

Я хочу создать несколько тикеров в одном.В этом скомпилированном коде вы увидите «Test1» и соответствующее сообщение.В основном я хочу дублировать «Test1» на несколько.Каждому «Тесту» будет соответствовать сообщение, которое будет видно только после того, как наступит этот «Тест».Как только поворот сделан, он перейдет в следующий.Я хочу, чтобы названия тестов прокручивались так же, как и само сообщение.Это было бы очень похоже на ESPN / новости в нижней части экрана телевизора.Вот то, что я до сих пор / где я застрял: 

/*@import url(http://weloveiconfonts.com/api/?family=entypo);*/

    body {
      background: #000;
      color: #02feff;
    }

    @font-face {
      font-family: "Oswald", sans-serif;
    }

    div {
      font-family: "Oswald", sans-serif;
    }

    .sport-indicator {
      font-size: 30px;
      font-weight: bold;
      width: 6%;
      color: white;
      position: absolute;
      background: black;
      line-height: 1;
      vertical-align: middle;
      padding: 0px;
      text-align: center;
      height: 49px;
      box-shadow: 0 0 20px 14px #000;
      z-index: 11;
      left: 0;
      background: #4c4c4c;
      /* Old browsers */
      font-style: italic;
      padding: 0 20px;
      background: -moz-linear-gradient( top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #1c1c1c 89%, #2b2b2b 100%, #131313 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient( top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #1c1c1c 89%, #2b2b2b 100%, #131313 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient( to bottom, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #1c1c1c 89%, #2b2b2b 100%, #131313 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4c4c4c", endColorstr="#131313", GradientType=0);
      /* IE6-9 */
    }

    .ticker {
      border: 2px solid #ccc;
      height: 50px;
      bottom: 0;
      position: absolute;
      overflow: hidden;
      border-left: 0;
      width: 99%
    }

    .info-container {
      font-size: 50px;
      line-height: 0.8;
    }

    .info {
      color: white;
      animation-name: marquee;
      animation-duration: 15s;
      transition: 10s;
      animation-timing-function: ease-in;
      animation-iteration-count: infinite;
      text-align: right;
      position: absolute;
      right: -8%;
    }

    .game-info-container {
      width: auto;
      position: relative;
      float: right;
      display: inline-block;
      right: 0;
      height: 50px;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3a3a3a+2,5e5e5e+19,494949+26,0e0e0e+59 */
      background: #3a3a3a;
      /* Old browsers */
      background: -moz-linear-gradient( top, #3a3a3a 2%, #5e5e5e 19%, #494949 26%, #0e0e0e 59%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient( top, #3a3a3a 2%, #5e5e5e 19%, #494949 26%, #0e0e0e 59%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient( to bottom, #3a3a3a 2%, #5e5e5e 19%, #494949 26%, #0e0e0e 59%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#3a3a3a", endColorstr="#0e0e0e", GradientType=0);
      /* IE6-9 */
    }

    @keyframes marquee {
      0% {
        transform: translate(0, 100px);
      }
      10% {
        transform: translate(0, 0);
      }
      20% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-150%, 0);
      }
    }
<html>  
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    
    <div ng-app="tickerApp">
      <div ng-controller="TICKER">
        <div class="ticker">
          <div class="sport-indicator">Test1</div>
          <div class="info-container">
    
            <div class="info">Test1: One of hopefully many subcategory tickers.</div>
          </div>
        </div>  
      </div>
    </div>
    
    </html>
...