流れるテキストを実装する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
	});
});