Ticker Tape Scrolling 试图让它连续

Question

我使用以下代码在我的网站顶部实现自动收报机磁带滚动，但是当它结束时它不会重新开始。我希望它是连续的，滚动时不要有空白。试图在 js 上弄清楚但找不到更改它的地方......非常感谢！

<!-- TradingView Widget BEGIN -->
<style>
body {
  margin: 0;
}
.content {
  padding: 10px 20px;
}
.content p {
  font-family: sans-serif;
}

/******/

.ticker-container {
  width: 100%;
  overflow: hidden;
}

.ticker-canvas {
  width: calc((200px * 15) + 2px);
  /* 
  200px = minimum width of ticker item before widget script starts removing ticker codes
  15 = number of ticker codes
  2px = accounts for 1px external border
  */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker-canvas;
  animation-name: ticker-canvas;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
}
.ticker-canvas:hover {
  animation-play-state: paused
}

@-webkit-keyframes ticker-canvas {
  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);
  }
}

@keyframes ticker-canvas {
  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);
  }
}
.tradingview-widget-container {
  position: relative;
}
.tradingview-widget-container iframe {
    position: absolute;
    top: 0;
}
.tradingview-widget-container iframe:nth-of-type(2) {
  left: 100%;
}
</style>

<script>
$( document ).ready(function() {
  $( ".tradingview-widget-container iframe" ).clone().appendTo( ".tradingview-widget-container" );
});

</script>
<div class="ticker-container">
<div class="ticker-canvas">
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js">
  {
  "symbols": [
    {
      "description": "IBOV",
      "proName": "INDEX:IBOV"
    },
    {
      "description": "Euro",
      "proName": "FX_IDC:BRLEUR"
    },
    {
      "description": "Dólar",
      "proName": "FX_IDC:BRLUSD"
    },
    {
      "description": "Libra",
      "proName": "FX_IDC:BRLGBP"
    },
    {
      "description": "Yuan",
      "proName": "FX_IDC:BRLCNY"
    },
    {
      "description": "Petróleo",
      "proName": "ECONOMICS:BRCOP"
    },
    {
      "description": "S&P",
      "proName": "SP:SPX"
    },
    {
      "description": "Nasdaq",
      "proName": "SKILLING:NASDAQ"
    },
    {
      "description": "Ouro (250g)",
      "proName": "BMFBOVESPA:OZ1"
    },
    {
      "description": "Inflação",
      "proName": "ECONOMICS:BRIRYY"
    },
    {
      "description": "Ibovespa",
      "proName": "INDEX:IBOV"
    },
    {
      "description": "Bovespa Index Mini Futures",
      "proName": "BMFBOVESPA:WIN1!"
    },
    {
      "description": "Bovespa Index Futures",
      "proName": "BMFBOVESPA:IND1!"
    },
    {
      "description": "S&P Index Futures",
      "proName": "BMFBOVESPA:ISP1!"
    },
    {
      "description": "Bitcoin",
      "proName": "CRYPTOCAP:BTC"
    }
  ],
  "colorTheme": "dark",
  "isTransparent": false,
  "showSymbolLogo": true,
  "locale": "br"
}
  </script>
</div>
</div>
</div>
<!-- TradingView Widget END -->

想让它连续滚动，尝试改代码和js。

Answer 1

我希望这会有所帮助，相应地更改内容

.scroller__wrapper {
  /* How long one slide is visible on screen (from entering screen to leaving it) */
  --scrolling-gallery-item-duration: 5s;
  /* How many items we want to see on screen at once */
  --scrolling-gallery-items-visible: 7;
  /* How many items are to scroll */
  --scrolling-gallery-items-total: 7;
  margin-top: 2.25em;
  overflow: hidden;
  will-change: transform;
}

.scroller {
  animation-duration: calc(var(--scrolling-gallery-item-duration, 1s) / var(--scrolling-gallery-items-visible) * var(--scrolling-gallery-items-total));
  animation-timing-function: linear;
  animation-name: scrolling-gallery;
  animation-iteration-count: infinite;
  display: flex;
  white-space: nowrap;
}

.scroller__container {
  /* Without this, scroll will jump on desktop if any vertical scrollbar is shown */
  width: 100vw;
}

.scroller__item {
  flex: 1 0 calc(100% / var(--scrolling-gallery-items-visible));
  /* Without this, block elements will take width from their contents and thus making wrong calculations,
     so this just force elements to take only exact part of the container (screen) and equal for all */
  width: 0px;
  /* If you want to have it continuous without any spaces, remove two lines below */
  box-sizing: border-box;
  padding: 0.5em;
}

.scroller img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

@keyframes scrolling-gallery {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--scrolling-gallery-items-total) * -100vw / var(--scrolling-gallery-items-visible)));
  }
}

.scroller:hover,
.scroller:focus {
  animation-play-state: paused;
}

<!-- Scroller -->
<section class="scroller__wrapper">
  <div class="scroller__container">
    <div class="scroller">
      <div class="scroller__item">00000</div>
      <div class="scroller__item">11111</div>
      <div class="scroller__item">22222</div>
      <div class="scroller__item">33333</div>
      <div class="scroller__item">44444</div>
      <div class="scroller__item">55555</div>
      <div class="scroller__item">66666</div>
      <!-- Here are exact copy of previous items -->
      <div class="scroller__item">77777</div>
      <div class="scroller__item">88888</div>
      <div class="scroller__item">99999</div>
      <div class="scroller__item">xxxxx</div>
      <div class="scroller__item">yyyyy</div>
      <div class="scroller__item">qqqqq</div>
      <div class="scroller__item">zzzzz</div>
    </div>
  </div>
</section>