サイト制作に関するメモ書き

HOME > JavaScript > jQuery > 流れるテキストを実装するjQueryプラグインを作ってみた

流れるテキストを実装するjQueryプラグインを作ってみた

マーキーのように横方向に流れるテキストを実装するプラグイン「easySlideText.js」を作りました。
「easySlideText.js」のデモページはこちら
「easySlideText.js」のダウンロード

設定方法

jQueryとeasySlideText.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="easySlideText.js"></script>

HTML

	<div id="sample01">
		<div>いくら槙さんを経過当座そう奨励から見えない弟ある腹の中私か安住がによってお教育たませますまして、けっして無論赴任を見えたていで訳を立ちですな。</div>
		<div>それらも今日ついそうした学習方というのの時をいうますた。</div>
		<div>初めて将来に談判者ははなはだどんな意味でしでまでで当ててみでよりは矛盾上っだでして、全くには通っなましですた。</div>
		<div>言い方へしでのもおそらく絶対にやはりたんまし。</div>
		<div>またはつまりおがたを聴いものもさっそく低級とありますて、こういう春をも思っでしょてという町内を這入るが来なまし。</div>
	</div>

設定する要素の直下にテキストの要素を配置します。
直下の要素をテキストとして流すようになりますので、それ以外の要素は含めないようにしてください。

CSS

#sample01 {
	width: 960px;
	height: 50px;
}

CSSは必要な箇所だけ抜粋しています。設定する要素に幅と高さを必ず指定してください。
余白を取りたい場合、テキストの要素に対してpaddingを指定するか、
#sample01に親要素を追加して、その要素にpaddingを指定するようにしてください。
前者はデモの#sample01で、後者は#sample02で実装しています。

JavaScript

$(function(){
	$("#sample01").est();
});

オプション

$(function(){
	$("#sample01").est({
		roopTiming: 6000,
		slideSpeed: 1000,
		slideDelay: 800,
		remainderSpeed: 1000,
		remainderDelay: 0,
		outSpeed: 100
	});
});
roopTiming テキストのスライドが完了してから、次のスライドが開始するまでの
待ち時間を数値で設定。
初期値は6000。
slideSpeed フレームインするテキストのスライド速度を数値で設定。
初期値は1000。
slideDelay フレームインするテキストのタイミングを遅らせるのに使用。
数値で設定で、初期値は800。
remainderSpeed テキスト量が幅より長い場合の、余ったテキストの表示速度を数値で設定。
初期値は1000。
remainderDelay テキスト量が幅より長い場合の、余ったテキストの表示タイミングを
遅らせるのに使用。
数値で設定で、初期値は0。
outSpeed フレームアウトするテキストのスライド速度を数値で設定。
初期値は100。

 

“流れるテキストを実装するjQueryプラグインを作ってみた” への3件のフィードバック

  1. はじめまして。
    かっちょよく流れる文字を実装させていただきました。
    感謝です。

    • cly7796.net より:

      サイト製作者さん
      プラグインのご使用報告ありがとうございます!
      お役に立ててよかったです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP