I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

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

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

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;
    });
});

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

関連記事

記事移動

関連記事

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

jQueryで特定のパラメータの値を取得する関数

jQueryで特定のパラメータの値を取得する関数

jQueryでページ内リンクをスムーススクロールさせる方法

jQueryでページ内リンクをスムーススクロールさせる方法

必ず使うページ上部に戻るスムーススクロール用jQuery

必ず使うページ上部に戻るスムーススクロール用jQuery

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

Comment Form

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

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed