Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@isamua

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

はじめに。

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を返るだけでも遊べます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?