-
Notifications
You must be signed in to change notification settings - Fork 65
/
Copy pathclick-hover.html
213 lines (185 loc) · 11.7 KB
/
click-hover.html
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
<!DOCTYPE html>
<!-- Animations v1.4, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/ -->
<!--[if lt IE 7 ]><html class="no-js ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie ie9" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
<!-- Meta Data -->
<title>Animations</title>
<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, maximum-scale=1, user-scalable=no">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<!-- Stylesheets -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/normalize.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/animations.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/style.min.css" rel="stylesheet" type="text/css" media="all" />
<!-- HTML5 SHIV -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<header id="header">
<div class="container">
<div class="animate" data-anim-type="bounceIn" data-anim-delay="200"><a href="index.html" target="_self" id="logo"><img src="http://luvuu.com/wp-content/uploads/2013/10/Mila-Kunis-300x300.png" alt="Animations Logo" /></a></div>
<p class="animate bm-remove" data-anim-type="bounceIn" data-anim-delay="400"><a href="index.html" target="_blank" id="logo-title">Animations</a></p>
<p class="animate" data-anim-type="bounceIn" data-anim-delay="600" id="description"><a href="https://github.com/joemottershaw/animations/" target="_self">View On GitHub</a></p>
<span id="facebook" class="social-icon animate" data-anim-type="zoomIn" data-anim-delay="800"><a href="#" target="_self"><i class="fa fa-facebook fa-fw"></i></a></span>
<span id="twitter" class="social-icon animate" data-anim-type="zoomIn" data-anim-delay="900"><a href="#" target="_self"><i class="fa fa-twitter fa-fw"></i></a></span>
<span id="google-plus" class="social-icon animate" data-anim-type="zoomIn" data-anim-delay="1000"><a href="#" target="_self"><i class="fa fa-google-plus fa-fw"></i></a></span>
<span id="pinterest" class="social-icon animate" data-anim-type="zoomIn" data-anim-delay="1100"><a href="#" target="_self"><i class="fa fa-pinterest fa-fw"></i></a></span>
<span id="rss" class="social-icon animate" data-anim-type="zoomIn" data-anim-delay="1200"><a href="#" target="_self"><i class="fa fa-rss fa-fw"></i></a></span>
</div>
</header>
<!-- No JavaScript -->
<noscript>
<div class="container text-center">
<div id="no-script">
<p class="bm-smaller"><strong>JavaScript Disabled</strong></p>
<p class="bm-smaller">Certain features of this site may not function correctly without JavaScript enabled</p>
<p class="bm-remove"><a href="http://enable-javascript.com/" target="_blank">Find out how to enable JavaScript in your browser</a></p>
</div>
</div>
</noscript>
<!-- Content -->
<main class="clearfix" role="main">
<article class="content odd first">
<div class="container bm-remove">
<div class="one-whole bm-remove">
<h1 class="clearfix">
<span class="float-left">
<span id="click-once-header">Click (Once)</span>
<span id="click-infinite-header" style="display: none;">Click (Infinite)</span>
</span>
<span class="float-right cursor-pointer" onclick="toggleClick();">Toggle Type</span>
</h1>
<div id="click-once-buttons">
<button class="w-small h-small" onclick="animateOnce('#logo', 'flash');">Flash</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'strobe');">Strobe</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'shakeH');">Shake H</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'shakeV');">Shake V</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'bounce');">Bounce</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'tada');">Tada</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'wave');">Wave</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'spinCW');">Spin CW</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'spinCCW');">Spin CCW</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'slingshotCW');">Slingshot CW</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'slingshotCCW');">Slingshot CCW</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'wobble');">Wobble</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'pulse');">Pulse</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'pulsate');">Pulsate</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'heartbeat');">Heartbeat</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'panic');">Panic</button>
<button class="w-small h-small" onclick="animateOnce('#logo', 'random');">Random</button>
</div>
<div id="click-infinite-buttons" style="display: none;">
<button class="w-small h-small" onclick="animateInfinite('#logo', 'flash');">Flash</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'strobe');">Strobe</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'shakeH');">Shake H</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'shakeV');">Shake V</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'bounce');">Bounce</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'tada');">Tada</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'wave');">Wave</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'spinCW');">Spin CW</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'spinCCW');">Spin CCW</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'slingshotCW');">Slingshot CW</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'slingshotCCW');">Slingshot CCW</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'wobble');">Wobble</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'pulse');">Pulse</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'pulsate');">Pulsate</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'heartbeat');">Heartbeat</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'panic');">Panic</button>
<button class="w-small h-small" onclick="animateInfinite('#logo', 'random');">Random</button>
</div>
</div>
</div>
</article>
<article class="content even">
<div class="container bm-remove">
<div class="one-whole bm-remove">
<h1 class="clearfix">
<span class="float-left">
<span id="hover-once-header">Hover (Once)</span>
<span id="hover-infinite-header" style="display: none;">Hover (Infinite)</span>
</span>
<span class="float-right cursor-pointer" onclick="toggleHover();">Toggle Type</span>
</h1>
<div id="hover-once-buttons">
<button class="w-small h-small hover-flash">Flash</button>
<button class="w-small h-small hover-strobe">Strobe</button>
<button class="w-small h-small hover-shakeH">Shake H</button>
<button class="w-small h-small hover-shakeV">Shake V</button>
<button class="w-small h-small hover-bounce">Bounce</button>
<button class="w-small h-small hover-tada">Tada</button>
<button class="w-small h-small hover-wave">Wave</button>
<button class="w-small h-small hover-spinCW">Spin CW</button>
<button class="w-small h-small hover-spinCCW">Spin CCW</button>
<button class="w-small h-small hover-slingshotCW">Slingshot CW</button>
<button class="w-small h-small hover-slingshotCCW">Slingshot CCW</button>
<button class="w-small h-small hover-wobble">Wobble</button>
<button class="w-small h-small hover-pulse">Pulse</button>
<button class="w-small h-small hover-pulsate">Pulsate</button>
<button class="w-small h-small hover-heartbeat">Heartbeat</button>
<button class="w-small h-small hover-panic">Panic</button>
</div>
<div id="hover-infinite-buttons" style="display: none;">
<button class="w-small h-small hover-flash infinite">Flash</button>
<button class="w-small h-small hover-strobe infinite">Strobe</button>
<button class="w-small h-small hover-shakeH infinite">Shake H</button>
<button class="w-small h-small hover-shakeV infinite">Shake V</button>
<button class="w-small h-small hover-bounce infinite">Bounce</button>
<button class="w-small h-small hover-tada infinite">Tada</button>
<button class="w-small h-small hover-wave infinite">Wave</button>
<button class="w-small h-small hover-spinCW infinite">Spin CW</button>
<button class="w-small h-small hover-spinCCW infinite">Spin CCW</button>
<button class="w-small h-small hover-slingshotCW infinite">Slingshot CW</button>
<button class="w-small h-small hover-slingshotCCW infinite">Slingshot CCW</button>
<button class="w-small h-small hover-wobble infinite">Wobble</button>
<button class="w-small h-small hover-pulse infinite">Pulse</button>
<button class="w-small h-small hover-pulsate infinite">Pulsate</button>
<button class="w-small h-small hover-heartbeat infinite">Heartbeat</button>
<button class="w-small h-small hover-panic infinite">Panic</button>
</div>
</div>
</div>
</article>
</main>
<!-- Footer -->
<section class="content">
<div class="container bm-remove text-right">
<p>
Animations, Copyright 2014<br>
<a href="https://github.com/joemottershaw/" target="_blank">https://github.com/joemottershaw/</a>
</p>
<p><a href="#" target="_self" class="scroll-to-top">SCROLL TO TOP</a></p>
</div>
</section>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="assets/js/smoothscroll.js" type="text/javascript"></script>
<script src="assets/js/visible.min.js" type="text/javascript"></script>
<script src="assets/js/animations.min.js" type="text/javascript"></script>
<script src="assets/js/backbone.js" type="text/javascript"></script>
<script>
function toggleClick() {
$('#click-once-header, #click-infinite-header, #click-once-buttons, #click-infinite-buttons').toggle();
animateEnd('#logo');
}
function toggleHover() {
$('#hover-once-header, #hover-infinite-header, #hover-once-buttons, #hover-infinite-buttons').toggle();
}
</script>
</body>
</html>