パラパラと川柳が一文字づつ表示されていくjavascript【縦書き、デバイステキスト】
html
htmlはこんな感じです。川柳を埋め込む<li>タグを空で入れてます。気になる方は、jsで<li>を書き出してください。
<div id="senryu"> <div class="inner"> <div id="senryutitle"> <h2>日替わり川柳</h2> <p>川柳をランダムで紹介しています</p> </div><!-- / #senryutitle --> </div><!-- / .inner --> <div id="daily"> <ul> <li id="line01"></li> <li id="line02"></li> <li id="line03"></li> <li id="name"></li> </ul> </div><!-- / #daily --> <p id="tosite"><a href="#">もっと川柳を見る</a></p> </div><!-- / #senryu -->
csv
今回は川柳のデータを、CSVの別ファイルとして持っている例です。
htmlの<li>の数分、あらかじめ区切ったcsvを用意しましょう。
川柳はサンプルとして「第10回あなたが選ぶオタク川柳大賞｜インターリンク」のものを数点入れています。
1,バレンタイン(笑),花火大会(笑),クリスマス(笑),ノーツ 2,ンゴゴンゴ,ンゴゴンゴゴゴ,ゴゴゴゴゴ,のんちゃん 3,部屋の中,積ん読積みゲー,積みフィギュア,入り江わに
css
writing-modeプロパティで縦書きが実現できますが、firefoxが未対応です。
writing-modeプロパティの縦書きを指定しなくても、1行の幅を設定することでなんとか近いところまではたどり着けるんですが、
- ベースラインが微妙で違和感
- 「ー」などは回転させないといけないなどcsv内でspan追加などの処理が必要
- フォントサイズを変えられると壊滅
と、writing-mode指定なしだとかなりキツい。
<pre>#senryu { }
#senryu .inner { }
#senryu #senryutitle { position:relative; }
#senryu h2 { }
#senryu p { display:none; }
#senryu #daily { padding:20px 15px; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; color:#009fe7; position:relative; }
#senryu #daily ul { }
#senryu #daily ul li { width:28px; height:200px; float:none!important; font-size:28px; color:#009fe7; font-weight:bold; margin-bottom:0px; text-align:center; text-indent:0!important;
writing-mode: tb-rl; /* IE独自仕様 */
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl; }
#senryu #daily ul li#line01 { position:absolute; right:40px; top:40px; }
#senryu #daily ul li#line02 { position:absolute; right:75px; top:100px; }
#senryu #daily ul li#line03 { position:absolute; right:110px; top:200px; }
#senryu #daily ul li#name { width:24px; text-align:center; font-size:24px; position:absolute; left:30px; top:300px; }
#senryu #tosite { display:block; position:absolute; top:450px; left:auto; bottom:auto; right:-45px; width:186px; height:157px; opacity:0; }
#senryu #tosite img { width:0%; height:0%; z-index:10; }
javascript
1文字づつ表示させるのに以下のライブラリを使用。
csvの取得にはこちらを使用しました。
- jquery.csv.js
$.get('list.csv', function (data) {
// csvを配列に
var csv = $.csv()(data);
// csvデータからランダムに1行を選択、川柳の1〜3行、名前に分ける
var csvline = Math.floor( Math.random() * csv.length );
var line01 = csv[csvline][1];
var line02 = csv[csvline][2];
var line03 = csv[csvline][3];
var line04 = csv[csvline][4];
// htmlに追加 この時点ではcssで非表示
$("#line01").append(line01);
$("#line02").append(line02);
$("#line03").append(line03);
$("#name").append(line04);
// 順に表示
$("#senryu .inner").delay(2000).hide(0, function() {
// 最初に表示していたタイトル画像を非表示
$("#senryu").addClass("hide");
// ランダム表示divの表示、1行目、2行目、3行目、名前、もっとみるの表示
$("#daily").show();
$("#line01").css({opacity:1}).lettering().animateLetters({opacity:0},{opacity:1},{randomOrder:false,time:2000,reset:false},function() {
$("#line02").css({opacity:1}).lettering().animateLetters({opacity:0},{opacity:1},{randomOrder:false,time:3000,reset:false},function() {
$("#line03").css({opacity:1}).lettering().animateLetters({opacity:0},{opacity:1},{randomOrder:false,time:3000,reset:false},function() {
$("#name").css({opacity:1}).lettering().animateLetters({opacity:0},{opacity:1},{randomOrder:false,time:600,reset:false},function() {
$('#tosite').animate({ opacity: 1 }, 400 );
$('#tosite img').animate({ width: "100%",height: "100%" }, 400 );
});
});
});
});
});
});
縦書きってまだちょっとハードル高いかも
まだ全ブラウザ対応ではないので、気軽に使えるものではなさそう。
上記のほか、縦書きに対応させたいなら以下のようなjsライブラリもあるようです。