web-dev-qa-db-ja.com

マーキー効果を作成するにはどうすればよいですか？

CSS3アニメーションでマーキーエフェクトを作成しています。

#caption {
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 20px;
    line-height: 30px;
    height:30px;
    width: 100%;
    white-space: nowrap;
    -moz-animation:  caption 50s linear 0s infinite;
    -webkit-animation:  caption 50s linear 0s infinite;
}
@-moz-keyframes caption { 
    0% { margin-left:120%; } 100% { margin-left:-4200px; }  
}
@-webkit-keyframes caption { 
    0% { margin-left:120%; } 100% { margin-left:-4200px; }  
}
<div id="caption">
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>

これで基本的なマーキー効果を得ることができますが、このデモにはコードがあまりにも具体的です。

margin-left:-4200px;のような特定の値を使用しないようにして、任意の長さのテキストを適合させる方法はありますか？

同様のデモを次に示します。 http://jsfiddle.net/jonathansampson/XxUXD/text-indentを使用しますが、特定の値を使用します。

htmlcsscss-animations
42
Fred Wu

マークアップを少し変更して、私のアプローチを示します（段落内にspanを挿入しました）：

.Marquee {
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.Marquee span {
  display: inline-block;
  padding-left: 100%;
  /* show the Marquee just outside the paragraph */
  animation: Marquee 15s linear infinite;
}

.Marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes Marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<p class="Marquee">
   <span>
       Windows 8 and Windows RT are focused on your life—your friends 
       and family, your apps, and your stuff. With new things like the 
       Start screen, charms and a Microsoft account, you can spend    
       less time searching and more time doing.
   </span>
   </p>

JSFiddle Demo

（境界線はデバッグ目的のみに含まれ、FirefoxとChromeでテスト済み）

段落幅に依存するハードコーディングされた値は挿入されていません

アニメーションは、CSS3 transformプロパティ（必要に応じてプレフィックスを使用）を適用するため、パフォーマンスが向上します。

最初に一度だけ遅延を挿入する必要がある場合は、animation-delayも設定します。代わりにeveryループで小さな遅延を挿入する必要がある場合は、より高いpadding-left（たとえば150%）で再生してみてください

82
fcalderan

主に@fcalderanの以前の返信に基づいて、このマーキーはホバーするとスクロールします。テキストがスクロールするスペースよりも短い場合でもアニメーションが完全にスクロールするという利点があります。また、テキストの長さも同じ時間がかかります長所または短所である）ホバーされていない場合、テキストは最初の位置に戻ります。

スクロール時間以外のハードコーディングされた値はなく、小さなスクロールスペースに最適

.Marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-flex;    
}

.Marquee span {
    display: flex;        
    flex-basis: 100%;
    animation: Marquee-reset;
    animation-play-state: paused;                
}

.Marquee:hover> span {
    animation: Marquee 2s linear infinite;
    animation-play-state: running;
}

@keyframes Marquee {
    0% {
        transform: translate(0%, 0);
    }    
    50% {
        transform: translate(-100%, 0);
    }
    50.001% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0%, 0);
    }
}
@keyframes Marquee-reset {
    0% {
        transform: translate(0%, 0);
    }  
}
<span class="Marquee">
    <span>This is the Marquee text</span>
</span>
2
Mosè Bottacini

受け入れられた回答アニメーションはSafariでは動作しません、私はそれを更新しました.

また、受け入れられている回答デモフィドルには、多くの不要なスタイルがあります。

そのため、便利なコードをカットアンドペーストしたいだけで、デモを5分間クリアする必要がない場合は、単純なバージョンを作成しました。

http://jsfiddle.net/e8ws12pt/

.Marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}
.Marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: Marquee 15s linear infinite;
    animation: Marquee 15s linear infinite;
}

@keyframes Marquee {
    0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}
<p class="Marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-Origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo Unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>
1
Pixelomo

以下はあなたが望むことをするべきです。

@keyframes Marquee {
    from  { text-indent:  100% }
    to    { text-indent: -100% }
}
0
Lars Beck