pixivの小説のように左右へのページめくりをjQueryでつくってみる。

投稿日：2015/11/03 ｜最終更新：2015/11/04
JavaScript/jQuery
pixiv, 小説, 縦書き

この記事で紹介したTipsは、現在使用できない可能性があります。
更新された情報はこちらの記事をご参照ください。

pixivのように、小説を縦書き表示する際、左右にページめくりをつけて１ページずつスクロールして表示してみます。

まずはページめくり用の素材を用意します。
左にページをめくるための画像↓
ページめくり用画像
と、右にページをめくるための画像↓

次に、HTMLを用意します。

    <button id="honbun_next"><img src="./arrow_next.png" alt="次のページへ" title="次のページへ"></button>
    <div id="honbun" class="gothic">
        <p>小説本文をここに入れて下さい。</p>
    </div>
    <button id="honbun_prev"><img class="opacity03" src="./arrow_prev.png" alt="前のページへ" title="前のページへ"></button>

このように、小説本文を挿入するブロックを、ページめくり用のボタンで挟みます。
本文読み込み時は本文用のdiv要素は一番最初にスクロールされているはずなので、右へページを送るボタンは一番薄く表示しておくためのクラスを指定しておきます。
これらのボタンには、カーソルをあてたときに濃く表示する予定でいます。

CSSは下記のように記述します。

#honbun{
    height: 24em;
    overflow: auto;
    margin: 30px 1.5%;
    width: 86%;
    float: left;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    /writing-mode: tb-rl;
    _writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;            /* IE用      */
    -moz-writing-mode: vertical-rl;     /* firefox用 */
    -webkit-writing-mode: vertical-rl;  /* chrome用  */
    -o-writing-mode: vertical-rl;       /* opera用   */
}
#honbun_prev, #honbun_next{
    margin-top: 20em;
    width: 5%;
    height: 50px;
    text-align: center;
    border: 0;
    float: left;
    opacity: 0.5;
    background-color: #fff;
}
#honbun_prev:hover, #honbun_next:hover{opacity: 1; cursor: pointer;}
.opacity03{opacity: 0.3;}

あとは、実際にページを送る機能をjQueryで実装します。

$(function(){
    // 左へのページ送りボタン
    $("#honbun_next").click(function(){
        var speed = 400; // ミリ秒
        var widthH = $("#honbun").width();
        var hereH = $("#honbun").scrollLeft();
        var position = hereH - widthH;
        $('#honbun').animate({scrollLeft:position}, speed, 'swing');
        return false;
    })
    // 右へのページ送りボタン
    $("#honbun_prev").click(function(){
        var speed = 400; // ミリ秒
        var widthH = $("#honbun").width();
        var hereH = $("#honbun").scrollLeft();
        var position = hereH + widthH;
        $('#honbun').animate({scrollLeft:position}, speed, 'swing');
        return false;
    })
    // 本文のブロック内でスクロールした時に各ボタンの濃さを変化させる
    $("#honbun").scroll(function () {
        var hereH = $("#honbun").scrollLeft();
        var widthHarea = document.getElementById("honbun").scrollWidth;
        var widthH = widthH = $("#honbun").width();
        if (hereH == 0) {
            //ブロックの先頭で右へページを送るボタンを一番薄くする
            $('#honbun_prev img').addClass('opacity03');
        } else if ((hereH - widthH) * -1 == widthHarea) {
            //ブロックの最後で左へページを送るボタンを一番薄くする
            $('#honbun_next img').addClass('opacity03');
        } else {
            //その他の場合はページ送りのボタンを通常通り表示する
            $('#honbun_next img').removeClass('opacity03');
            $('#honbun_prev img').removeClass('opacity03');
        }
        return false;
    });
});

以上のようにすると、ボタンをおした時にページをめくることができます。