新参のウェブデザイナーの方々には馴染みがないかもしれませんが、過去、HTMLの「marquee」タグが流行した時代がありました。

既に廃止されたこのタグは、テキストを横スクロールさせるために用いられていました。
いま、これと同じ挙動を実現するにはCSS3やjQueryを使うことになりますが、今日ご紹介する［hMarquee］もその解決策の１つ。

実際にどんな動きをするのか？

まずはサンプルをご覧ください。

hMarquee デモ : https://on-ze.com/demo/jquery-hmarquee/

［hMarquee］の実装方法

最初に必要なファイルをダウンロードします。
下記GitHubにダウンロードリンクが用意されていますので、そこから入手しましょう。

GitHub : https://github.com/ttionya/hMarquee

この［hMarquee.js］は jQuery または Zepto に依存します。
サーバーにアップロードする際はどちらかのライブラリを先に読み込んでおきましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="hMarquee.min.js"></script>

続いてテキストを横スクロールさせるための親要素のボックスを作ります。

<div class="marquee"></div>

テキスト部分はJavaScriptで指定。
初期設定も含めると、具体的には次のようなコードになります。

<script>
var listStr = ['This is one.', 'This is two.', 'This is three', 'This is four.', 'This is five', 'This is six.', 'This is seven.', 'This is eight.'];

$.hMarquee.marquee({
	el: $('#m-marquee'),
	externalClass: 'marquee',
	list: listStr,
});
<script>

さらに細かく設定することも可能です。詳しくは GitHub からどうぞ。

GitHub : https://github.com/ttionya/hMarquee

補足ですが、CSSを使って同じような挙動を実装することも可能です。
以前コチラ↓の記事で紹介していましたね。

【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。

CSSのみで実装するか、今回の［hMarquee］を利用するか、どちらを使うかは完全に好みの問題になってくるかもしれません。
しかしイロイロとカスタマイズが効くので、個人的には［hMarquee］をオススメするかもしれません……。

実装は簡単なので、迷っている方はぜひご自身の手で試してみてください。