電光掲示板のように横から文字を流す方法【HTML5・CSS3】

電光掲示板のように横から文字を流す方法はとても簡単に実装することができます。横から流れるという動作があるのであなたのサイトに載せるとアピールポイントにもなります。もちろん文字だけではなく画像も流すことができ、あなたのサイトは一つ賑やかになるのではないでしょうか。

過去に紹介していた電光掲示板のように横から文字を流す方法「マーキータグ」の記事がこの記事を書いている時点で廃止予定になることがわかり、焦ったので代わりの新しい方法をここに書きますのでご紹介します。

マーキータグはHTMLのみで実装できましたが悲しいことに廃止され、新しい方法は「Javascript」か「CSS3」を利用する必要がありますが今回は最新のブラウザならどんな状況でも動く?CSS3を利用します。CSS3 Animationを使います。

CSS3 Animation対応ブラウザ

CSS3アニメーション対応ブラウザはこちらをご覧ください。

最新のブラウザならOpera mini以外全て対応しています。
Opera miniは低スペックもしくは通信量を抑える目的のブラウザなのでopera miniを使っている方は今回利用するCSS3アニメーションの動作は望んでいないかと思われるため気にする必要なないでしょうか。

ただヒトコト書いていてもいいかもしれません。「opera miniを利用の方は当サイトは非対応の為、別のブラウザをご利用ください。」と。

サンプル

基本的なHTMLの書き方

<div class="marquee">
<p>LIFE-IDEA</p>
</div>

とてもシンプルです。

基本的なCSSの書き方

.marquee p {
margin:0;
padding-left:724px; /*アニメーションの範囲*/
display:inline-block; 
white-space:nowrap;
animation-name:marquee; /*アニメーションのクラス名*/
animation-timing-function:linear;/*アニメーションのタイミング・進行割合の指定*/
animation-duration:10s; /*アニメーションの速度*/
animation-iteration-count:infinite;/*アニメーションの動作回数*/
}
@keyframes marquee {/*動作範囲(上級者向けの設定)*/
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

アニメーションの範囲のみ今回は724pxを指定していますがパーセント表示でも可能です。
基本的にCSS3アニメーションについて勉強するとわかりますが解説見てもよくわからない人は以下にサンプルコードを用意したのでご利用ください。
HTML上に書く場合は<style>(ここにCSSを書く)</style>を利用ください。

右から左へ

.marquee p {
margin:0; 
padding-left:724px; 
display:inline-block; 
white-space:nowrap;
animation-name:marquee; 
animation-timing-function:linear;
animation-duration:10s; 
animation-iteration-count:infinite;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

左から右へ

.marquee p {
margin:0; 
padding-left:724px; 
display:inline-block; 
white-space:nowrap;
animation-name:marquee; 
animation-timing-function:linear;
animation-duration:10s; 
animation-iteration-count:infinite;
animation-direction: reverse;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

「animation-direction: reverse;」を追加。

急ブレーキ？

.marquee p {
margin:0; 
padding-left:724px; 
display:inline-block; 
white-space:nowrap;
animation-name:marquee; 
animation-timing-function:ease;
animation-duration:10s; 
animation-iteration-count:infinite;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

オレンジ色の文字を変更することで急ブレーキかけたり別の不思議な動作を決めることができます。
指定できる動作は以下の通り。

動く範囲を制限する

.marquee p {
margin:0; 
padding-left:300px; 
display:inline-block; 
white-space:nowrap;
animation-name:marquee; 
animation-timing-function:linear;
animation-duration:10s; 
animation-iteration-count:infinite;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

オレンジ色の数字を変更することで範囲を決めることができます。
今回は半分にしてみました。

速度を変更したい

.marquee p{
margin:0; 
padding-left:724px; 
display:inline-block; 
white-space:nowrap;
animation-name:marquee; 
animation-timing-function:linear;
animation-duration:3s; 
animation-iteration-count:infinite;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

※流れる速度を速くした場合

オレンジ色の数字を変化させることで速度を変更できます。
数字が少ないほど流れる速度は速くなります。

行ったり戻ったり

.marquee p {
margin:0; 
padding-left:724px; 
display:inline-block; 
white-space:nowrap;
animation-name:marquee; 
animation-timing-function:linear;
animation-duration:10s; 
animation-iteration-count:infinite;
animation-direction: alternate;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

「animation-direction: alternate;」を追加。

回数を決める

.marquee p {
margin:0; 
padding-left:730px;
display:inline-block; 
white-space:nowrap;
animation-name:marquee; 
animation-timing-function:linear;
animation-duration:10s; 
animation-iteration-count:3;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}

オレンジ色の「３」という数字を変更することで何回回ったら止めるかを設定できます。
この場合3回回ったら止まります。
オレンジ色の「padding-left:730px;」の部分は表示させる範囲で通常より少し大きめサイズを指定することで止まるときに完全に見えなくなります。

最後に。

以上が電光掲示板のように横から文字を流す方法の紹介でした。
私自身、CSS3のanimationの勉強中な為、もしかしたらもっと良い方法があるかもしれません。

従来ではこのようなアニメーションはjavascriptを使うしかなく環境によって表示できないという難点がありましたが
今回はCSS3を使いjavascriptを無効にされても最新のブラウザなら環境が変わっても表示されるというメリットがありますね。

あなたのお役に立てますように。では。