流れる文字を表示する方法は今でも<MARQUEE>が一番簡単なのか・・・
を以前紹介しました。
本日は、流れる文字について実装する方法をいくつか紹介したいと思います。重要なお知らせや目立たせたい情報などリンク付きで動かす際に活用できる内容ですのでぜひ、使ってみてください。
流れる文字を省スペースで表示する方法
楽天のショップオブイヤー2013年が少し前に発表されましたが、入賞したショップの中にも流れる文字で案内を表示したり画像を動かしているショップもたくさんあります。
楽天ショップオブザイヤー2013のジュエリー・アクセサリーのジャンル大賞
いいものあるよ。アクアジュエリー
ヘッダーメニュー下の発送目安の部分で文字を流して表示してます。ページを表示した際に動いている部分がこの部分だけなので思わず目は行きますよね。
楽天ショップオブザイヤー2013の米のジャンル大賞
ハーベストシーズン
こちらもヘッダー上に期間限定の案内などの情報を文字を流して表示しています。思わず内容読んでしまいますね。
文字を流す一番簡単な方法＜MARQUEE＞マーキータグ
文字を流す方法としては、javascript(jquery)、CSSなど色々な方法が考えられますが、一番簡単な方法としては＜MARQUEE＞マーキータグではないでしょうか。一昔前に、流行した方法でこれを多用した何とも恐ろしいページをよく見かけたのも記憶に新しいところです。
サンプルソース ＜MARQUEE＞を使用 sample1.html
流す文字
スクロール方向、移動速度など指定出来るオプションも実は、色々とあります。
詳しくは、＜MARQUEE＞－HTMLタグリファレンスを参照ください。
【動作サンプル】
＜MARQUEE＞で画像を流すことも可能
楽天ショップオブザイヤー2013のおもちゃ・ホビーのジャンル受賞
フェスティバルプラザ
さきほどの例では、文字を流していましたが、同様の方法で画像を流すことも可能です。
＜MARQUEE＞ ～ ＜/MARQUEE＞の中にリンク付きの画像を記述してやればOKです。
ただHTML5では、＜MARQUEE＞タグは廃止される予定なので今後は使用を控えた方が良いかと思います。
現在のところIE、Chorome、FireFox等のシェアの多いブラウザでは動作はしていますが、対応していないブラウザ、今後の各ブラウザのバージョンアップによっては動作しなくなる可能性もあります。
非常に簡単に実装出来るので、まだまだ使われているのだと思います。scriptやcssを使う方法が一番良いのでしょうが、少しハードルがあがりますよね。
CSSで文字を流す方法
CSSのみでmarqueeを実装する方法もあります。
<style type="text/css">
.CSSMarquee {
max-width: 600px;
padding: 1em 0;
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: left;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color:#000;
font-weight: bold;
}
.CSSMarquee p:after {
content: "";
white-space: nowrap;
}
.CSSMarquee p {
margin: 0;
padding-left: 100%;
display: inline-block;
white-space: nowrap;
-webkit-animation-name:marqueeRL;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marqueeRL;
-moz-animation-timing-function:linear;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marqueeRL;
-ms-animation-timing-function:linear;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marqueeRL;
-o-animation-timing-function:linear;
-o-animation-duration:10s;
-o-animation-iteration-count:infinite;
animation-name:marqueeRL;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@-webkit-keyframes marqueeRL {
from {-webkit-transform:translate(0);} to {-webkit-transform:translate(-100%);}
}
@-moz-keyframes marqueeRL {
from {-moz-transform:translate(0);} to {-moz-transform:translate(-100%);}
}
@-ms-keyframes marqueeRL {
from {-ms-transform:translate(0);} to {-ms-transform:translate(-100%);}
}
@-o-keyframes marqueeRL {
from {-o-transform:translate(0);} to {-o-transform:translate(-100%);}
}
@keyframes marqueeRL {
from {transform:translate(0);} to {transform:translate(-100%);}
}
</style>
<div class="CSSMarquee"><p>CSSのみでを使ってmarquee（マーキー）を実装しています。</p></div>
文字の移動速度を変更するには、animation-duration:10s 記述の10s部分を変更します。ブラウザごとの記述があるため、何箇所か変更する必要があります。5sにすると速くなります。15sにすると遅くなります。CSSさえ1度記述しておけば、すぐに実装できるので簡単といえば簡単ですかね。
【動作サンプル】
javascriptを使って文字を流す方法
次にjavascriptを使って同様に文字を流す方法を紹介したいと思います。
サンプルソース sample2.html
＜head＞ ＜/head＞ ＜body onload="msg_scroll();"＞
コピペする場合は、＜＞が全角になっている部分があるので注意してください。
＜head＞内にjavascriptを定義しています。
speedの値を変更すれば、流れる速度が変わります。
＜body＞のonload時に定義したjavascriptを呼び出しています。
この方法はinput部品のテキストボックスの値を随時入れ替えて文字が流れているように見せる方法になります。
【動作サンプル】
jqueryを使って文字を流す方法
まずは、プラグインをダウンロードしてください。
The Silky Smooth Marquee
上記サイトからダウンロードすることが出来ます。
ファイル名をjquery.marquee.jsとして保存します。
また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。
サンプルソース sample2.html
<script src="jquery.min.js"></script>
<script src="jquery.marquee.js"></script>
<script>
$(function () {
$('p.ticker').marquee();
});
</script>jqueryのプラグインを使って流れる文字
1、2行目で必要なファイルを読み込んでいます。
(サンプルは同一フォルダ内にファイルを配置の状態)
3～7行目で処理を実行しています。p.tickerの部分が指定するタグ.クラス名ということになります。
比較的、実装もシンプルな感じで出来そうですね。
【動作サンプル】
結局＜MARQUEE＞タグって簡単だよね・・・
何種類か文字を流す方法を見てきましたが、＜MARQUEE＞ってあまり知識のない人でも簡単に動きを実装出来るってところが今でも使われている理由なんでしょうね。別ファイルも不要だし、タグ書くだけで動きを付けれるのは大きいなと思います。
上でも書きましたが、HTML5では、＜MARQUEE＞タグは廃止される予定なので今後は使用を控えた方が良いのは確かですが、こうも簡単に動きを実装出来るなら、それを理解した上で部分的に使うのもありかなと感じます。
【同様にテキストでのお知らせに使えそうな仕組み】
Your Message