流れるテキストのCSSジェネレーター
JavaScript不要、CSSのみで流れるテキスト（Marqueeアニメーション）を生成します。
プレビュー
<!-- 無限ループコンテナ -->
<div class="marquee-container">
<div class="marquee-content">
<span>Marquee CSS Generator</span>
</div>
<!-- ループ連結用（同じ内容を繰り返す） -->
<div class="marquee-content" aria-hidden="true">
<span>Marquee CSS Generator</span>
</div>
</div>.marquee-container {
width: 100%;
overflow: hidden;
display: flex;
background-color: {{bg_color}};
padding: 20px 0;
user-select: none;
}
.marquee-content {
display: flex;
flex-shrink: 0;
gap: {{gap}}px;
padding-right: {{gap}}px;
animation: scroll {{speed}}s linear infinite;
animation-direction: {{dir_val}};
animation-play-state: {{play_state}};
}
.marquee-container:hover .marquee-content {
animation-play-state: {{hover_state}};
}
.marquee-content span {
font-size: 4rem;
font-weight: bold;
color: {{color}};
white-space: nowrap;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}機能、使い方
- 無限ループの仕組み: 同じ内容のコンテンツを2つ並べ、CSSアニメーションで左へ100%移動させることで、境目のないスムーズなループを実現しています。
- 画像への対応:
spanタグをimgタグに変更することで、ロゴスライダーなども簡単に作成可能です。 - 導入のコツ:
marquee-containerのwidthを調整することで、特定のエリア内だけでループさせることもできます。
CSSプロパティの説明
@keyframes scrollで、transform: translateX(-100%)を使用して、自身の幅分だけ左に移動させています。2つの要素が並んでいるため、1つ目が消える瞬間に2つ目が全く同じ位置に来ることでループが繋がります。
animation-directionでは、reverseを指定することで、方向を「右から左」から「左から右」へ反転させています。
animation-play-stateにて、pausedを指定することで、特定の条件（このツールではホバー時）にアニメーションを一時停止させることが可能です。
flex-shrink: 0は 親要素の幅に合わせて子要素が縮んでしまうのを防ぎ、本来のコンテンツ幅を維持したままスライドさせるために重要です。
