swipejsのスライドショーでページめくりを変えて遊ぶ

はじめに。

Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvector,などを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。

１回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7

２回目「swipejsで画像のスライドショーを作成する」はこちら
http://qiita.com/isamua/items/5021c750b6e8383c82a6

２回目で作成したスライドショーのページめくりを変えてみましょう。

左右のページめくり

swipe engieではdefaultで、上下のswipeに対応していますが、pagingを指定することにより左右のページめくりを使うこともできます。
指定は、

    "paging": "leftToRight",

と追加するだけです。
pagingがドキュメント全体で指定が必要なのでroot部分で指定します。１つのswipeファイル内で複数のpagingを指定することはできません。

transition_leftToRight.swipe

{
    "paging": "leftToRight",
    "dimension":[600,600],
    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    { "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
                ]
            }
        }
    },
    "title":"photo gallery",
    "pages":[
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./2.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./3.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./4.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./5.jpg"} ]
        }
    ],
    "type":"net.swipe.swipe"
}

サンプルはこちらです。
http://www.swipejs.net/sample3/sample1.html

transitionの指定

ページをめくるときに表現をtransitionで指定します。
transitionは、fadeIn, replace, scrollの３種類があります。何も指定しない場合は、defaultのscrollとなります。
transitionはpage単位で指定でき、pageのtemplateで指定しておくことも可能です。pageのtemplateで指定すると、そのtemplateを使ったページ、全てで同じtransitionが設定されます。

fadeIn

fadeInは次のページfadeInして現れます。

transition_fadein.swipe

{
    "paging": "leftToRight",
    "dimension":[600,600],
    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    { "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
                ],
                "transition": "fadeIn"
            }
        }
    },
    "title":"photo gallery",
    "pages":[
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./2.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./3.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./4.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./5.jpg"} ]
        }
    ],
    "type":"net.swipe.swipe"
}

fadeInのサンプルはこちらです。
http://www.swipejs.net/sample3/sample2.html#0

replace

replaceはページを置き換えます。

transition1.swipe

{
    "dimension":[600,600],
    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    { "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
                ],
                "transition": "replace"
            }
        }
    },
    "title":"photo gallery",
    "pages":[
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./2.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./3.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./4.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./5.jpg"} ]
        }
    ],
    "type":"net.swipe.swipe"
    }

replaceのサンプルはこちらです。
http://www.swipejs.net/sample3/sample3.html#0

mix

scroll(default), fadeIn, replaceをすべて使ったサンプルはこちら。

transition.swipe

{
    "paging": "leftToRight",
    "dimension":[600,600],
    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    { "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
                ]
            }
        }
    },
    "title":"photo gallery",
    "pages":[
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./2.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./3.jpg"} ],
            "transition": "fadeIn"
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./4.jpg"} ],
            "transition": "replace"
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./5.jpg"} ]
        }
    ],
    "type":"net.swipe.swipe"
}

pagingやtransitionを返るだけでも遊べます。