テキストが横に流れていくアレ＝「ティッカー」スクリプト

2015年02月08日｜カテゴリー： WEB制作技術

こんにちは。新潟ホームページ制作【マザーシップ】です。

「テキストが横に流れていくアレ」についてご紹介します。業界用語(?)で「ティッカー」と呼ぶらしいです。

１０年くらい前に流行したあと一度廃れた気がするこのティッカーですが、スマホ対応のサイトが増えるとともに、省スペースで「重要なお知らせ」を目立たせつつ見せたいという目的で実装の依頼が増えてきています。

簡単に実装するなら <marquee>タグですが

昔は<marquee＞タグでOKでしたよね。ガラケーサイトを制作するときにもよく使っていたような気がします。

<marquee>文字</marquee>

簡単な記述で実装できますし、ネットスケープでは動作しないとありますが、最近の大抵のブラウザでは動作するようです（最新のIE,クローム,サファリ,Firefox,Operaなどで確認できています）

しかし、「HTML５で廃止されるタグ」という点が個人的には気になっており、今後制作するホームページでは使わないほうが良いのかなぁと思っています。

CSS3のマーキーモジュール

HTML５で廃止された<marquee>タグのかわりにCSS３に「マーキーモジュール」なるものが登場しました。

<p style="width:600px; overflow:marquee; marquee-style:scroll">文字</p>

みたいな感じで実装します。

ただ、こちらは動作するブラウザが少なすぎて、実用は厳しいです。

jQueryを使った実装　

今はjQueryを使った実装が一般的なようです。

私がよく使っているのは、coolcarousels。

下の画像をクリックすると、デモをご覧いただくことが可能です。

#09 News ticker effect by scrolling a definition list

何がいいかというと、汎用性の高さ。１つのjsファイルで次のようなカルーセルを一緒に実装できちゃうところが気に入っています。

#02 Fluid full window width carousel with truncated previous and next images

#23 Continuously scrolling carousel immediately stopping onMouseOver

GitHubからスクリプトをダウンロード後、jquery.carouFredSel-6.2.1-packed.jsファイルを任意の場所にアップロードし、HTMLファイルの<head>タグ内に読み込ませて、

<script type='text/javascript' src='http://yoursite.jp/アップロードしたフォルダ/jquery.carouFredSel-6.2.1-packed.js'></script>

デモページにあるHTMLタグ、Jsタグ、CSSタグを参考にいろいろと書き込めばOKです。

ティッカーの場合、なるべくシンプルにすると下記のような記述になります。

HTML

<div id="wrapper">
 <div class="first">
 <dl id="ticker-1">
 <dt>見出し</dt><dd>テキスト</dd>
 <dt>見出し</dt><dd>テキスト</dd> 
 </dl>
</div>
</div>

jQuery(function() {
 var _scroll = {
 delay: 1000,
 easing: 'linear',
 items: 1,
 duration: 0.07,
 timeoutDuration: 0,
 pauseOnHover: 'immediate'
 };
jQuery('#ticker-1').carouFredSel({
 width: 1000,
 align: false,
 items: {
 width: 'variable',
 height: 35,
 visible: 1
 },
 scroll: _scroll
 });
});

CSS

#wrapper > div {
 width: 100%;
 height: 30px;
 padding: 15px 0;
 overflow: hidden;
}
#wrapper dl {
 display: block;
 margin: 0;
}
#wrapper dt, #wrapper dd {
 display: block;
 float: left;
 margin: 0 10px;
 padding: 5px 10px;
}
#wrapper dt {
 background-color: #f66;
 color: #fff;
}
#wrapper dd {
 color: #333;
 margin-right: 50px;
}

HTMLのdtタグとddタグ内のテキストはAdvance Custom Fieldsなどを駆使して、更新しやすくカスタムすることをおすすめします。

管理画面