LoginSignup
1

More than 5 years have passed since last update.

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

Posted at

はじめに。

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

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

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

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

左右のページめくり

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

"paging": "leftToRight",

と追加するだけです。
pagingがドキュメント全体で指定が必要なのでroot部分で指定します。1つの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の3種類があります。何も指定しない場合は、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を返るだけでも遊べます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1