Question

现在，我的关于页面（站点是 here。查看密码是 Hello2021）上的滚动条在文本字符串之后有一个空格，在它开始下一次旋转之前。我怎样才能使文本始终可见并滚动，没有空格？

 <div class="scroll">BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW</div>

.scroll{ overflow: hidden!important;
position: relative!important;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 15s linear infinite;
 -webkit-animation: scroll 15s linear infinite;
  animation: scroll 15s linear infinite;}

@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }

}
@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
#page {overflow-x:hidden}

Answer 1

我认为仅使用 Css 无法达到预期的效果。使用 dynamic-marquee 库的解决方案可以如下实现：

<!-- This code block must be in head -->
<script src="https://cdn.jsdelivr.net/npm/dynamic-marquee@1.3.2/dist/dynamic-marquee.js"></script>

<!-- This code block must be in body and above the 3rd block -->
<div id="marquee"></div>

<!-- This code block can be in the body or footer -->
<script>
    var $marquee = document.getElementById("marquee");
    var marquee = (window.m = new dynamicMarquee.Marquee($marquee, {
      rate: -100
    }));
    window.l = dynamicMarquee.loop(
      marquee, [
        function() {
          return "BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW";
        },
        function() {
          return "Another line of important text";
        }
      ],
      function() {
        var $separator = document.createElement("div");
        $separator.innerHTML = "&nbsp|&nbsp";
        return $separator;
      }
    );
</script>

如何编辑滚动文本使其始终可见？

1 个答案: