CSS3で電光掲示板風のスクロールを再現する

どこか暖かみのある電光掲示板のようなスクロールするテキストを作成します。

デモ

まずはデモページをご覧ください。

• Demo
• zipファイルをDownload

HTML

<p class="ledText"><span>【CSS3で電光掲示板】スクロールするテキストを見ると10年前のホームページを思い出します。</span></p>

CSS

/* =====================
	電光掲示板
======================= */
.ledText {
    overflow: hidden;
    position: relative;
    padding:5px 0;
    color: #FFB400;
    font-size: 60px;
    font-weight: bold;
    background: #333333;
}

/* CSS3グラデーションでドット感を出す */
.ledText:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
	background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
	background-size: 2px 2px;
    z-index: 10;
}

/* CSS3アニメーションでスクロール */
.ledText span {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	-webkit-animation-name: marquee;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 15s;
	-moz-animation-name: marquee;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 15s;
	animation-name: marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 15s;
}

@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

ソースはこんな感じです。ポイントは画面のドットを再現するところにCSS3のbackground-sizeを使用しているところです。

テキストのスクロールといえば10年前に作ったホームページやガラケー向けのホームページでよく使用されていた<marquee>タグが有名ですが、HTML5が当たり前になった時代にこのタグは非推奨となりました。

そこでCSS3アニメーションを使用してスクロールするようにして懐かしの動きを再現しております。

最後に

使いどころがあるかどうか分かりませんが、上手く使えたら目を惹くデザインが出来ると思います。
今後もCSS3で◯◯を再現するみたいなシリーズに挑戦していきたいです！

参考記事

CSSを使って電光掲示板風のお知らせを作成してみました | ケーワンエンタープライズ開発部ブログ