애니메이션, AngularJS : 초당 픽셀 단위의 애니메이션 속도?

Question

한 줄에 두 줄의 텍스트가있는 경우 각 라인의 내용은 동적입니다.

애니메이션 속도를 초당 픽셀로 설정하는 방법이 있습니까? 그래서 그 선은 길이에 관계없이 같은 속도로 스크롤 할 것입니까? 상황의

예 : AngularJS directive 및 CSS의

이

div { 
 
    width: 50%; 
 
    padding-left: 10%; 
 
    float: left; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#line1 { 
 
    background-color: green; 
 
} 
 

 
#line2 { 
 
    background-color: yellow; 
 
} 
 

 
h4 { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: 0; 
 
    line-height: 50px; 
 
    text-align: left; 
 
    /* Apply animation to this element */ 
 
    /* Animation delay 0.5s */ 
 
    -moz-animation: line-scroll 15s linear 0.5s infinite; 
 
    -webkit-animation: line-scroll 15s linear 0.5s infinite; 
 
    animation: line-scroll 15s linear 0.5s infinite; 
 
} 
 

 
#line1 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 200%; 
 
} 
 

 
#line2 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 600%; 
 
} 
 

 
@keyframes line-scroll { 
 
    0% { 
 
     -moz-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(0%); 
 
    } 
 
    100% { 
 
     -moz-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(-100%); 
 
    } 
 
}

<div id="line1"> 
 
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4> 
 
</div> 
 

 
<div id="line2"> 
 
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4> 
 
</div>

수단을 환영합니다.

Answer 1

넌 JQuery와 (자바 스크립트)을 사용하여 제목의 너비를 가져오고 너비 즉 픽셀 당 지속 시간을 기준으로 기간을 계산하는 것보다

width() 제목의 너비를 가져 오는 데 jquery 메서드가 사용됩니다.

1s = 20px 

Therefore 100px = 100/20 
       = 5s 

당신은 분모를 증가시킬 수 스크롤 속도를 var dur1=Math.ceil(w1/10)에서 (수 10 참조) 다음과 같이

이 나는 ​​기간을 계산합니다.
다음은 코드

//getting the width of both the headings 
 
var w1=$("#line1>h4").width(); 
 
var w2=$("#line2>h4").width(); 
 

 
//calculating the duration of the animation dynamically based on the width 
 
var dur1=Math.ceil(w1/10); 
 
var dur2=Math.ceil(w2/10); 
 

 
//setting the duration dynamically 
 
$("#line1>h4").css("animation-duration",dur1+"s"); 
 
$("#line2>h4").css("animation-duration",dur2+"s");

div { 
 
    width: 50%; 
 
    padding-left: 10%; 
 
    float: left; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#line1 { 
 
    background-color: green; 
 
} 
 

 
#line2 { 
 
    background-color: yellow; 
 
} 
 

 
h4 { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: 0; 
 
    line-height: 50px; 
 
    text-align: left; 
 
    /* Apply animation to this element */ 
 
    /* Animation delay 0.5s */ 
 
    -moz-animation: line-scroll 15s linear 0.5s infinite; 
 
    -webkit-animation: line-scroll 15s linear 0.5s infinite; 
 
    animation: line-scroll 15s linear 0.5s infinite; 
 
} 
 

 
#line1 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 200%; 
 
} 
 

 
#line2 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 600%; 
 
} 
 

 
@keyframes line-scroll { 
 
    0% { 
 
     -moz-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(0%); 
 
    } 
 
    100% { 
 
     -moz-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(-100%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="line1"> 
 
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4> 
 
</div> 
 

 
<div id="line2"> 
 
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4> 
 
</div>

Answer 2

CSS에서 애니메이션 지속 시간은 time units (현재는 초/밀리 초)이어야합니다. 아래와 같이

하면, 그러나, PX-값에 대한 % - 값로 전환하여 전이의 폭을 적응할 수 :

div { 
 
    width: 50%; 
 
    padding-left: 10%; 
 
    float: left; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#line1 { 
 
    background-color: green; 
 
} 
 

 
#line2 { 
 
    background-color: yellow; 
 
} 
 

 
h4 { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: 0; 
 
    line-height: 50px; 
 
    text-align: left; 
 
    /* Apply animation to this element */ 
 
    /* Animation delay 0.5s */ 
 
    -moz-animation: line-scroll 15s linear 0.5s infinite; 
 
    -webkit-animation: line-scroll 15s linear 0.5s infinite; 
 
    animation: line-scroll 15s linear 0.5s infinite; 
 
} 
 

 
#line1 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 200%; 
 
} 
 

 
#line2 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 600%; 
 
} 
 

 
@keyframes line-scroll { 
 
    0% { 
 
     -moz-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(0%); 
 
    } 
 
    100% { 
 
     -moz-transform: translateX(-1000px); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(-1000px); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(-1000px); 
 
    } 
 
}

<div id="line1"> 
 
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4> 
 
</div> 
 

 
<div id="line2"> 
 
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4> 
 
</div>

가