CSSマーキーの速度

Question

マーキーエフェクトにCSSを使用すると、コードは完璧に実行されます。私の唯一の問題はスピードです。

テキストが短い場合、マーキーは時間がかかります。テキストが長い場合、マーキーは非常に速く動作します。私は上記がアニメーションの時間のためです。animation: marquee 15s linear infinite;

テキストの長さにかかわらず一定の速度でマーキーを実行する方法はありますか？必要であれば、私はJavascriptを使用して開いています （私が試みたが、成功していない。）

ここに私の現在のCSSコードです：

<style> 
    /* Make it a marquee */ 
    .marquee { 
     width: 100%; 
     margin: 0 auto; 
     white-space: nowrap; 
     overflow: hidden; 
     background-color: #000000; 
     bottom: 0px; 
     color: white; 
    } 
    .marquee span { 
     display: inline-block; 
     padding-left: 100%; 
     text-indent: 0; 
     animation: marquee 15s linear infinite; 
     animation-delay: 10s; 
     background-color: #000000; 
     color: white; 
     bottom: 0px; 
    } 
    /* Make it move */ 

    @keyframes marquee { 
     0% { 
      transform: translate(10%, 0); 
     } 
     100% { 
      transform: translate(-100%, 0); 
     } 
    } 
    /* Make it pretty */ 

    .scroll { 
     padding-left: 1.5em; 
     position: fixed; 
     font: 50px 'Verdana'; 
     bottom: 0px; 
     color: white; 
     left: 0px; 
     height: 10%; 
    } 
</style> 

HTMLここ

<div class="marquee"> 
<p class="scroll marquee"><span id="scrolltext"></span></p> 
</div> 

Answer 1

右に適切働いているように見えるのです、これは何よりも数学の問題の詳細です。

私たちは、もちろんこの

function calcSpeed(speed) { 
 
    // Time = Distance/Speed 
 
    var spanSelector = document.querySelector('.marquee span'); 
 
    var spanLength = spanSelector.offsetWidth; 
 
    var timeTaken = spanLength/speed; 
 
    spanSelector.style.animationDuration = timeTaken + "s"; 
 
} 
 
calcSpeed(100); 
 

 
function calcFastSpeed(speed) { 
 
    // Time = Distance/Speed 
 
    var spanSelector = document.querySelector('.fast.marquee span'); 
 
    var spanLength = spanSelector.offsetWidth; 
 
    var timeTaken = spanLength/speed; 
 
    spanSelector.style.animationDuration = timeTaken + "s"; 
 
} 
 
calcFastSpeed(500);

/* Make it a marquee */ 
 

 
.marquee { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    background-color: #000000; 
 
    bottom: 0px; 
 
    color: white; 
 
} 
 
.marquee span { 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    text-indent: 0; 
 
    animation: marquee linear infinite; 
 
    animation-delay: 5s; 
 
    background-color: #000000; 
 
    color: white; 
 
    bottom: 0px; 
 
} 
 
/* Make it move */ 
 

 
@keyframes marquee { 
 
    0% { 
 
    transform: translate(10%, 0); 
 
    } 
 
    100% { 
 
    transform: translate(-100%, 0); 
 
    } 
 
} 
 
/* Make it pretty */ 
 

 
.scroll { 
 
    padding-left: 1.5em; 
 
    position: fixed; 
 
    font: 50px'Verdana'; 
 
    bottom: 0px; 
 
    color: white; 
 
    left: 0px; 
 
    height: 10%; 
 
}

<div class="marquee"> 
 
    <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span> 
 
</div> 
 
<br /> 
 
<div class="fast marquee"> 
 
    <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span> 
 
</div>

のような簡単なTime = Distance/Speed計算を行うことができ、これは「トラック」であるどのくらい考慮していない単純な例ですが、今では基本を知っています:-)

同じ速度で移動する2つの異なる長さのテキストの別の例

function calcSpeed(speed) { 
 
    // Time = Distance/Speed 
 
    var spanSelector = document.querySelectorAll('.marquee span'), 
 
    i; 
 
    for (i = 0; i < spanSelector.length; i++) { 
 
    var spanLength = spanSelector[i].offsetWidth, 
 
     timeTaken = spanLength/speed; 
 
    spanSelector[i].style.animationDuration = timeTaken + "s"; 
 
    } 
 
} 
 
calcSpeed(100);

/* Make it a marquee */ 
 

 
.marquee { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    background-color: #000000; 
 
    bottom: 0px; 
 
    color: white; 
 
} 
 
.marquee span { 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    text-indent: 0; 
 
    animation: marquee linear infinite; 
 
    animation-delay: 5s; 
 
    background-color: #000000; 
 
    color: white; 
 
    bottom: 0px; 
 
} 
 
/* Make it move */ 
 

 
@keyframes marquee { 
 
    0% { 
 
    transform: translate(10%, 0); 
 
    } 
 
    100% { 
 
    transform: translate(-100%, 0); 
 
    } 
 
} 
 
/* Make it pretty */ 
 

 
.scroll { 
 
    padding-left: 1.5em; 
 
    position: fixed; 
 
    font: 50px'Verdana'; 
 
    bottom: 0px; 
 
    color: white; 
 
    left: 0px; 
 
    height: 10%; 
 
}

<div class="marquee"> 
 
    <span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span> 
 
</div> 
 
<br /> 
 
<div class="marquee"> 
 
    <span>Well I hope it goes off the screen</span> 
 
</div>

Answer 2

ハイテクがありますあなたがしようとしている例Example

以上、適切なHTMLコードを提供できる場合詳細wi質問

body { margin: 20px; } 
 

 
.marquee { 
 
    height: 25px; 
 
    width: 420px; 
 

 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.marquee div { 
 
    display: block; 
 
    width: 200%; 
 
    height: 30px; 
 

 
    position: absolute; 
 
    overflow: hidden; 
 

 
    animation: marquee 5s linear infinite; 
 
} 
 

 
.marquee span { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
@keyframes marquee { 
 
    0% { left: 0; } 
 
    100% { left: -100%; } 
 
}

<div class="marquee"> 
 
    <div> 
 
    <span>You spin me right round, baby. Like a record, baby.</span> 
 
    <span>You spin me right round, baby. Like a record, baby.</span> 
 
    </div> 
 
</div>

斐伊川番目のそれは

@keyframes marquee { 
 
     0% { 
 
      transform: translate(10%, 0); 
 
     } 
 
     100% { 
 
      transform: translate(-100%, 0); 
 
     } 
 
    } 
 

 
-------- i used belowed one that works fine for me ---------- 
 
------------------ you can try thisss--------------------- 
 

 
@keyframes marquee { 
 
     0% { 
 
      transform: translate(0%, 0); 
 
     } 
 
     100% { 
 
      transform: translate(-100%, 0); 
 
     } 
 
    }

Answer 3

あなたは、彼らが同じ速度でスクロールする必要があり、あなたのスライド要素に同一の幅を与えることができます。しかし、それは本当に動的ではありません。

または、要素の幅に応じて速度を計算できます。私の小さなデモを見てください。

編集

// your time for 10 px in seconds 
 
var timeFor10Px = 0.2; 
 
var animationSettings = 'marquee linear infinite'; 
 
var $marque = $('.marque'); 
 

 
$marque.each(function() { 
 
    var outerWidth = $(this).outerWidth(); 
 
    var calc = outerWidth/10 * timeFor10Px; 
 
    $(this).css('animation', animationSettings + ' ' + calc + 's'); 
 
});

.holder { 
 
    background: black; 
 
    width: 100%; 
 
    color: white; 
 
} 
 

 
.marque { 
 
    /* removed, see js tab */ 
 
    /*animation: marquee 15s linear infinite; */ 
 
    display: inline-block; 
 
} 
 

 

 

 
@keyframes marquee { 
 
    from { 
 
    transform: translate(0%); 
 
    } 
 
    to { 
 
    transform: translate(100%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="holder"> 
 
    <span class="marque marqu1"> 
 
    Some nice Text 
 
    </span> 
 
    <br> 
 
    <span class="marque marqu2"> 
 
    Some nice Text Lorem Ipsum dolor sit amet..... 
 
    </span> 
 
</div>

：@Andrew骨は同様のソリューション