CSS 마키 속도

Question

마키 효과에 CSS를 사용하면 코드가 완벽하게 실행됩니다. 내 유일한 문제는 속도입니다.

텍스트가 짧으면 선택 윤곽이 오래 걸립니다. 텍스트가 길면 선택 윤곽이 매우 빠르게 실행됩니다. 위의 이유는 애니메이션 시간 때문입니다. animation: marquee 15s linear infinite;

텍스트 길이에 관계없이 일정한 속도로 천막을 실행할 수있는 방법이 있습니까? 필요한 경우 내가 자바 스크립트를 사용하여 열려입니다 (나는 시도했지만 성공하지 않았습니다.)

여기에 내 현재 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 계산을 수행 할 수 있습니다, 이것은 '트랙'얼마나 오래 고려하지 않는 간단한 예이지만, 이제는 기본을 알고 있습니다 :-)

두 가지 길이의 텍스트가 같은 속도로 움직이는 또 다른 예제

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>

: 앤드류 뼈는 유사한 솔루션