失われし「marquee」タグを再現する[hMarquee]でテキストの横スクロールを実装!

Ads by Google

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

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

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

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

hMarquee デモ : http://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]をオススメするかもしれません……。

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google