滾動div ticker

Question

我想在從右向左滾動的屏幕底部創建一個滾動滾動條。

解決此問題的最佳方法是什麼？我正在使用reactjs，並且我看到反應對jQuery不太好，我發現的大多數示例都使用jQuery。

Answer 1

您可以創建純粹用CSS一個側面滾動效果。這是一個demo fiddle。

/* Make it a marquee */ 
.marquee { 
    margin: 0 auto; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.marquee span { 
    display: inline-block; 
    padding-left: 100%; 
    animation: marquee 5s linear infinite; 
} 

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

Answer 2

退房的反應滾動指令：

https://www.npmjs.com/package/react-scroll

Answer 3

基於

Tyrsius

的解決方案，我已經修改了一點點的關鍵幀動畫，所以現在將停止對的方式，中間一段時間，所以用戶可以用舒適的方式閱讀內容：

@keyframes marquee { 
0% { transform: translate(0,0); 
     font-style:italic; 
     opacity:0;} 
5% { opacity:0;} 
14% { opacity:0.8;} 
15% { transform: translate(-46%, 0); 
     opacity:1; 
     font-style:normal;} 
85% { transform: translate(-54%, 0); 
     opacity:1; 
     font-style:normal;} 
86% { opacity:0.8;} 
96% { opacity:0;} 
100% { transform: translate(-100%, 0); 
     opacity:0;}}