文字を面白く魅せたい!という方にピッタリなのではないでしょうか?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>
関連記事:






