transition.js/Demo-Single-Page.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
<!DOCTYPE html>
<html>

<head>
    <title>Page Transition Example</title>
    <link rel="stylesheet" href="css/transition-animations.css"/>
    <link rel="stylesheet" href="css/demo-single-page.css"/>
</head>

<body>

<div class="pt-wrapper">
    <div class="pt-trigger-container">
        <button class="pt-trigger" data-animation="1" data-goto="-1">Go to next page</button>
        <button class="pt-trigger" data-animation="2" data-goto="-2">Go to previous page</button>
        <button class="pt-trigger" data-animation="59-60-61-62-63-64-65-66-67" data-goto="-1">Next page - random anims</button>
        <button class="pt-trigger" data-animation="50-51-52-53-54-55-56-57-58" data-goto="-2">Previous page - random anims</button>
        <button class="pt-trigger" data-animation="50" data-goto="1">Go to page 1</button>
        <button class="pt-trigger" data-animation="51" data-goto="2">Go to page 2</button>
        <button class="pt-trigger" data-animation="52" data-goto="3">Go to page 3</button>
        <button class="pt-trigger" data-animation="53" data-goto="4">Go to page 4</button>
        <button class="pt-trigger" data-animation="58" data-goto="5">Go to page 5</button>
        <button class="pt-trigger" data-animation="59-60-61-62-63-64-65-66-67" data-goto="6">Go to page 6</button>

    </div>

    <!--All Pages-->

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

</div>


<div class="pt-message">
    <p>Your browser does not support CSS animations.</p>
</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>