transition.js/Demo-Multi-Element.html at master · mipaca/transition.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>

    <title>Demo Multi Element</title>
    <link rel="stylesheet" type="text/css" href="css/demo-multi-element.css" />
    <link rel="stylesheet" type="text/css" href="css/transition-animations.css" />

</head>
<body>

<div class="container">

    <div class="pt-wrapper demo1">
        <button class="pt-trigger btn" data-animation="50" data-goto="-1" >Next</button>
        <button class="pt-trigger btn" data-animation="51" data-goto="-2" style="left: 10px;" >Previous</button>
        <div class="pt-page pt-page-1">
            <h2>Page 1</h2>
        </div>
        <div class="pt-page pt-page-2">
            <h2>Page 2</h2>
        </div>
        <div class="pt-page pt-page-3">
            <h2>Page 3</h2>
        </div>
        <div class="pt-page pt-page-4">
            <h2>Page 4</h2>
        </div>
        <div class="pt-page pt-page-5">
            <h2>Page 5</h2>
        </div>
        <div class="pt-page pt-page-6">
            <h2>Page 6</h2>
        </div>
    </div>

    <div class="pt-wrapper demo2">

        <button class="pt-trigger btn" data-animation="50-51-52-53-54-55-56-57-58" data-goto="5">Goto 5 Random Animation</button>

        <button class="pt-trigger btn" data-animation="59-60-61-62-63-64-65-66-67" data-goto="-1" style="left: 10px;">Random Next Animation</button>

        <div class="pt-page pt-page-1">
            <h2>Page 1</h2>
        </div>
        <div class="pt-page pt-page-2">
            <h2>Page 2</h2>
        </div>
        <div class="pt-page pt-page-3">
            <h2>Page 3</h2>
        </div>
        <div class="pt-page pt-page-4">
            <h2>Page 4</h2>
        </div>
        <div class="pt-page pt-page-5">
            <h2>Page 5</h2>
        </div>
        <div class="pt-page pt-page-6">
            <h2>Page 6</h2>
        </div>

    </div>

</div>

<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/transition.js"></script>
<script>
    $(document).ready(function() {
        // initializing page transition.
        PageTransitions.init();
    });
</script>

</body>
</html>