jQueryで文字を面白くみせる方法

文字を面白く魅せたい!という方にピッタリなのではないでしょうか?jQueryでタイプライター風に表示できるプラグインがあったので、実践してみました。

sample:jQueryで文字をタイプライター風に表示
配布元:MakeMineATriple
※実際のコードは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでタイプライター風に文字を表示する:美Deブ</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="js/jquery.newsTicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var options = {
        newsList: ".news",//どのul要素に適用するかの指定、別にclassでもOK
        startDelay: 10,//何秒後に動作を開始するか
        tickerRate: 80 ,//次の文字までの速さ
        loopDelay: 3000 ,//次の表示開始までの秒数
        placeHolder1: " ■",//表示する前の文字(even)
        placeHolder2: "◇"//表示する前の文字(odd)
    }
    $().newsTicker(options);
});
</script>
<style type="text/css">
body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
	background: #ECECEC;
}
#contents {
	margin:100px auto;
	padding:0;
	height: 500px;
	width: 500px;
	font-size:48px;
}
#contents li{
	list-style: none;
}
</style>
</head>
<body>
<div id="contents">
<ul class="news"><!--Script4行目と連動-->
    <li>事件はローカルで起きてるんじゃない!サーバーで起きてんだ!</li>
    <li>ulのclassのliのテキストがタイプライター風に表示されています。</li>
    <li><a href="http://www.vi-de-bu.com/sample/sample17.html">リンクもできました!</a></li>
</ul>
</div>
</body>
</html>

関連記事:

  1. jQuery Counter Pluginをつかってみる
  2. カヤックサイトで使用している CSS3テクニック
This entry was posted in 知って得するweb情報 and tagged . Bookmark the permalink.

コメントをどうぞ

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">