-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathanimations.html
More file actions
259 lines (250 loc) · 11.3 KB
/
animations.html
File metadata and controls
259 lines (250 loc) · 11.3 KB
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vesperr one page site template with bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="assets/css/prettyPhoto.css" rel="stylesheet" />
<link href="assets/css/animate.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Roboto+Condensed:400,300,700" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/color/default.css" rel="stylesheet" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
<link rel="shortcut icon" href="ico/favicon.ico" />
<!-- =======================================================
Theme Name: Vesperr
Theme URL: https://bootstrapmade.com/vesperr-free-bootstrap-template/
Author: BootstrapMade.com
Author URL: https://bootstrapmade.com
======================================================= -->
</head>
<body>
<header>
<div id="topnav" class="navbar navbar-fixed-top default">
<div class="navbar-inner">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="assets/img/logo.png" alt="" />
</a>
</div>
<div class="navigation">
<nav>
<ul class="nav pull-right">
<li><a href="index.html#intro" class="external">Home</a></li>
<li><a href="index.html#about" class="external">About</a></li>
<li><a href="index.html#services" class="external">Services</a></li>
<li><a href="index.html#works" class="external">Works</a></li>
<li><a href="index.html#contact" class="external">Contact</a></li>
<li class="dropdown current">
<a href="#">Features <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="components.html" class="external">Components</a></li>
<li><a href="icons.html" class="external">Icons</a></li>
<li><a href="animations.html" class="external">56 Animations</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</header>
<section id="intro" class="inner">
<div class="container">
<div class="row">
<div class="span12">
<div class="inner-heading">
<h2><i class="icon-cogs"></i><strong>56</strong> Animations</h2>
</div>
</div>
</div>
</div>
</section>
<!-- section main content -->
<section id="maincontent" class="section demo">
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span12">
<h2>56 Animation effects</h2>
<p>
You put following animation into any elements such as div tag, button, image..etc. Just write the animation name as shown below as the class name and make sure you add <code>e_</code> before the animation name. For example to use <strong>"flash"</strong> animation you should write <code>.e_flash</code>
</p>
<p>
Just hover on each button to see how animation works.
</p>
</div>
</div>
<div class="row">
<div class="span4">
<h4 class="rheading">Attention seekers<span></span></h4>
<a href="#" class="btn btn-primary btn-large e_flash">flash</a>
<a href="#" class="btn btn-primary btn-large e_bounce">bounce</a>
<a href="#" class="btn btn-primary btn-large e_shake">shake</a>
<a href="#" class="btn btn-primary btn-large e_tada">tada</a>
<a href="#" class="btn btn-primary btn-large e_swing">swing</a>
<a href="#" class="btn btn-primary btn-large e_wobble">wobble</a>
<a href="#" class="btn btn-primary btn-large e_wiggle">wiggle</a>
<a href="#" class="btn btn-primary btn-large e_pulse">pulse</a>
</div>
<div class="span4">
<div class="rheading">
<span></span>
<h4>Flippers (currently Webkit, Firefox, & IE10 only)</h4>
</div>
<a href="#" class="btn btn-primary btn-large e_flip">flip</a>
<a href="#" class="btn btn-primary btn-large e_flipInX">flipInX</a>
<a href="#" class="btn btn-primary btn-large e_flipOutX">flipOutX</a>
<a href="#" class="btn btn-primary btn-large e_flipInY">flipInY</a>
<a href="#" class="btn btn-primary btn-large e_flipOutY">flipOutY</a>
</div>
<div class="span4">
<h4 class="rheading">Fading entrances<span></span></h4>
<a href="#" class="btn btn-primary btn-large e_fadeIn">fadeIn</a>
<a href="#" class="btn btn-primary btn-large e_fadeInUp">fadeInUp</a>
<a href="#" class="btn btn-primary btn-large e_fadeInDown">fadeInDown</a>
<a href="#" class="btn btn-primary btn-large e_fadeInLeft">fadeInLeft</a>
<a href="#" class="btn btn-primary btn-large e_fadeInRight">fadeInRight</a>
<a href="#" class="btn btn-primary btn-large e_fadeInUpBig">fadeInUpBig</a>
<a href="#" class="btn btn-primary btn-large e_fadeInDownBig">fadeInDownBig</a>
<a href="#" class="btn btn-primary btn-large e_fadeInLeftBig">fadeInLeftBig</a>
<a href="#" class="btn btn-primary btn-large e_fadeInRightBig">fadeInRightBig</a>
</div>
</div>
<div class="row">
<div class="span6">
<h4 class="rheading">Fading exits<span></span></h4>
<a href="#" class="btn btn-primary btn-large e_fadeOut">fadeOut</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutUp">fadeOutUp</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutDown">fadeOutDown</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutLeft">fadeOutLeft</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutRight">fadeOutRight</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutUpBig">fadeOutUpBig</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutDownBig">fadeOutDownBig</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutLeftBig">fadeOutLeftBig</a>
<a href="#" class="btn btn-primary btn-large e_fadeOutRightBig">fadeOutRightBig</a>
</div>
<div class="span6">
<div class="rheading">
<span></span>
<h4>Bouncing entrances</h4>
</div>
<a href="#" class="btn btn-primary btn-large e_bounceIn">bounceIn</a>
<a href="#" class="btn btn-primary btn-large e_bounceInDown">bounceInDown</a>
<a href="#" class="btn btn-primary btn-large e_bounceInUp">bounceInUp</a>
<a href="#" class="btn btn-primary btn-large e_bounceInLeft">bounceInLeft</a>
<a href="#" class="btn btn-primary btn-large e_bounceInRight">bounceInRight</a>
</div>
</div>
<div class="row">
<div class="span6">
<h4 class="rheading">Bouncing exits<span></span></h4>
<a href="#" class="btn btn-primary btn-large e_bounceOut">bounceOut</a>
<a href="#" class="btn btn-primary btn-large e_bounceOutDown">bounceOutDown</a>
<a href="#" class="btn btn-primary btn-large e_bounceOutUp">bounceOutUp</a>
<a href="#" class="btn btn-primary btn-large e_bounceOutLeft">bounceOutLeft</a>
<a href="#" class="btn btn-primary btn-large e_bounceOutRight">bounceOutRight</a>
</div>
<div class="span6">
<div class="rheading">
<span></span>
<h4>Rotating entrances</h4>
</div>
<a href="#" class="btn btn-primary btn-large e_rotateIn">rotateIn</a>
<a href="#" class="btn btn-primary btn-large e_rotateInDownLeft">rotateInDownLeft</a>
<a href="#" class="btn btn-primary btn-large e_rotateInDownRight">rotateInDownRight</a>
<a href="#" class="btn btn-primary btn-large e_rotateInUpLeft">rotateInUpLeft</a>
<a href="#" class="btn btn-primary btn-large e_rotateInUpRight">rotateInUpRight</a>
</div>
</div>
<div class="row">
<div class="span4">
<h4 class="rheading">Rotating exits<span></span></h4>
<a href="#" class="btn btn-primary btn-large e_rotateOut">rotateOut</a>
<a href="#" class="btn btn-primary btn-large e_rotateOutDownLeft">rotateOutDownLeft</a>
<a href="#" class="btn btn-primary btn-large e_rotateOutDownRight">rotateOutDownRight</a>
<a href="#" class="btn btn-primary btn-large e_rotateOutUpLeft">rotateOutUpLeft</a>
<a href="#" class="btn btn-primary btn-large e_rotateOutUpRight">rotateOutUpRight</a>
</div>
<div class="span4">
<div class="rheading">
<span></span>
<h4>Lightspeed</h4>
</div>
<a href="#" class="btn btn-primary btn-large e_lightSpeedIn">lightSpeedIn</a>
<a href="#" class="btn btn-primary btn-large e_lightSpeedOut">lightSpeedOut</a>
</div>
<div class="span4">
<div class="rheading">
<span></span>
<h4>Specials</h4>
</div>
<a href="#" class="btn btn-primary btn-large e_hinge">hinge</a>
<a href="#" class="btn btn-primary btn-large e_rollIn">rollIn</a>
<a href="#" class="btn btn-primary btn-large e_rollOut">rollOut</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section main content -->
<footer>
<div class="verybottom">
<div class="container">
<div class="row">
<div class="span12">
<div class="aligncenter">
<div class="logo">
<a class="brand" href="index.html">
<img src="assets/img/logo.png" alt="" />
</a>
</div>
<p>
© Vesperr labs Inc - All right reserved
</p>
<div class="credits">
<!--
All the links in the footer should remain intact.
You can delete the links only if you purchased the pro version.
Licensing information: https://bootstrapmade.com/license/
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Vesperr
-->
Created by <a href="https://bootstrapmade.com/">BootstrapMade.com</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<a href="#" class="scrollup"><i class="icon-chevron-up icon-square icon-48 active"></i></a>
<!-- Javascript Library Files -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/parallax/jquery.parallax-1.1.3.js"></script>
<script src="assets/js/nagging-menu.js"></script>
<script src="assets/js/jquery.nav.js"></script>
<script src="assets/js/prettyPhoto/jquery.prettyPhoto.js"></script>
<script src="assets/js/portfolio/jquery.quicksand.js"></script>
<script src="assets/js/portfolio/setting.js"></script>
<script src="assets/js/hover/jquery-hover-effect.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/animate.js"></script>
<!-- Template Custom Javascript File -->
<script src="assets/js/custom.js"></script>
</body>
</html>