brevity/index.html at master · curthusting/brevity · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <title>Brevity</title>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
        <link href='css/brevity.css' rel='stylesheet' type='text/css'>
        <link href='css/animate.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="warning">
            <h1>Something went wrong</h1>
            <h3>Put clever message here</h3>
        </div>
        <div class="container" id="brevity">
            <div class="collection">
                <div class="deck">
                    <!-- fullscreen background imge with animated elements -->
                    <div class="slide">

                        <img class="bg-image" src="http://placehold.it/1600x900&text=Fullscreen+background+image">

                        <h1>Slide 1 - Deck 1</h1>
                        <h4 class="animated delay1000 slideInLeft">animations</h4>
                        <h4 class="animated delay1500 slideInRight">and easings</h4>
                        <h4 class="animated delay2000 bounceInUp">and delays</h4>
                        <h4 class="animated delay2500 bounceInDown">oh my...</h4>

                    </div>

                    <!-- more animated elements -->
                    <div class="slide">

                        <h1>Slide 1 - Deck 2</h1>
                        <h4 class="animated delay1000 rotateInUpLeft">more</h4>
                        <h4 class="animated delay1250 rotateInUpRight">animations</h4>
                        <h4 class="animated delay1750 rollIn">just for fun!</h4>

                    </div>

                    <!-- just for fun -->
                    <div class="slide">

                        <h1>Slide 1 - Deck 3</h1>
                        <img class="full animated delay1500 flipInY" src="http://placehold.it/1400x400&text=Full+width+image">
                        <h4 class="animated delay3000 fadeInDownBig">sure, any element can be animated</h4>

                    </div>

                    <div class="slide"><h1>Slide 1 - Deck 4</h1></div>
                    <div class="slide"><h1>Slide 1 - Deck 5</h1></div>
                </div>
                <div class="deck">
                    <div class="slide"><h1>Slide 2 - Deck 1</h1></div>
                    <div class="slide"><h1>Slide 2 - Deck 2</h1></div>
                    <div class="slide"><h1>Slide 2 - Deck 3</h1></div>
                    <div class="slide"><h1>Slide 2 - Deck 4</h1></div>
                    <div class="slide"><h1>Slide 2 - Deck 5</h1></div>
                    <div class="slide"><h1>Slide 2 - Deck 6</h1></div>
                </div>
                <div class="deck">
                    <div class="slide"><h1>Slide 3 - Deck 1</h1></div>
                    <div class="slide"><h1>Slide 3 - Deck 2</h1></div>
                    <div class="slide"><h1>Slide 3 - Deck 3</h1></div>
                </div>
                <div class="deck">
                    <div class="slide"><h1>Slide 4 - Deck 1</h1></div>
                    <div class="slide"><h1>Slide 4 - Deck 2</h1></div>
                    <div class="slide"><h1>Slide 4 - Deck 3</h1></div>
                    <div class="slide"><h1>Slide 4 - Deck 4</h1></div>
                </div>
            </div>

            <nav class="nav bottom">
                <div class="wrapper">
                    <a class="nav-prev">
                        <span class="prev-next-button left"></span>
                        <span class="prev-next-button up"></span>
                        <b>Previous</b>
                    </a>
                    <a class="nav-next">
                        <span class="prev-next-button down"></span>
                        <span class="prev-next-button right"></span>
                        <b>Next</b>
                    </a>
                </div>
            </nav>

        </div>
    </body>
<script src='js/brevity.js'></script>
<script>

// pure JS implementation
var el = document.getElementById('brevity');
window.Brevity = new Brevity( el, {
    // want to see whats happening?
    debug : false,

    // how fast do we want the transitions
    ratio : 3,

    // do we want to slide to the next deck
    // when the last slide of the previous deck is active
    continuous : true,

    // which events should we implement
    // touch : false, // only use false here if you want to disable touch
    mouse : false,
    keyboard : true,

    // want to over write the default starting slide & deck?
    // startDeck: 2,
    // startSlide: 3,
});

</script>