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

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

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

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

20151104_01.jpg

DEMO

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

次に、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;
    });
});

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

関連記事

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)