如何使用 HTML5 平滑滾動文本

Question

我想盡可能平滑地滾動一行文本

我的目標設備是 1920 x 120 分辨率，沒有輸入。 （沒有鍵盤或鼠標）。 它有一個動力不足的 CPU。

<html>
<head>
    <title>News</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(function() {
                $.get('data.txt', function(data) {
                    $('#text-file-container').html(data);
                });
            });
        </script>
        <link rel="stylesheet" href="content.css">
</head>
<body>

    <div id="scroll">
            <h1>
                <marquee behavior="scroll" direction="left" scrollamount="15" id="text-file-container"></marquee>
            </h1>
    </div>

</body>
</html>

我嘗試了一個我在網上找到的 JS 庫，但它的性能很差我願意接受建議

Answer 1

您可以嘗試使用 CSS 動畫和過渡而不是 JavaScript 庫/插件或marquee （如評論中所述，它已過時，應避免使用）。

如何使用 CSS 和動畫完成的一個示例：

 * { margin:0; padding:0; border:0; } @keyframes slide { from { left: 100%;} to { left: -100%;} } @-webkit-keyframes slide { from { left: 100%;} to { left: -100%;} } #marquee { color:red; background:#f0f0f0; width:100%; height:120px; line-height:120px; overflow:hidden; position:relative; } #text { position:absolute; top:0; left:0; width:100%; height:120px; font-size:30px; animation-name: slide; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: slide; -webkit-animation-duration: 10s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinite; }

 <div id="marquee"> <div id="text">Your Text</div> </div>

您可以通過更改animation-duration的值來調整選取框的速度。 您應該根據文本的長度修改to的值。

Jay 評論后更新：當文本大於選取框的空間時，選取框失敗。 一種解決方案是使空格不換行/中斷和考慮文本大小的動畫（使用變換而不僅僅是位置來移動文本）：

 * { margin:0; padding:0; border:0; } @keyframes slide { from { left:100%; transform: translate(0, 0); } to { left: -100%; transform: translate(-100%, 0); } } @-webkit-keyframes slide { from { left:100%; transform: translate(0, 0); } to { left: -100%; transform: translate(-100%, 0); } } .marquee { color:red; background:#f0f0f0; width:100%; height:120px; line-height:120px; overflow:hidden; position:relative; } .text { position:absolute; top:0; white-space: nowrap; height:120px; font-size:30px; animation-name: slide; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: slide; -webkit-animation-duration: 30s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinite; }

 <p>Text Fits</p> <div class="marquee"> <div class="text">Text Here</div> </div> <p>Text overflows</p> <div class="marquee"> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem non lacus condimentum dictum quis id tortor.</div> </div>

然后我的瀏覽器上的運動有點不穩定。 我會尋找更流暢的解決方案，但這將解決文本長度問題。

如何使用 HTML5 平滑滾動文本

問題描述

1 個解決方案

解決方案1
15 已采納 2015-09-17 20:35:54

如何使用 HTML5 平滑滾動文本

問題描述

1 個解決方案

解決方案1 15 已采納 2015-09-17 20:35:54

解決方案1
15 已采納 2015-09-17 20:35:54