forked from noyid/css3-animate-it
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
271 lines (221 loc) · 11.7 KB
/
index.php
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
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
<link rel="stylesheet" href="css/animations.css" type="text/css">
<!-- STUFF JUST FOR THIS TEMPLATE -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="example-assets/style.css" type="text/css">
</head>
<body>
<header class='mainHeader'>
<div class='container'>
<div class='animatedParent' data-sequence='500' >
<h1 class='animated growIn slower' data-id='1'>CSS3 Animate It</h1>
<h2 class='animated bounceInRight slower' data-id='2'>Because static content is boring!</h2>
<div class='buttons-inline animated bounceInLeft slower' data-id='3'><a class="btn btn-primary" href="examples.php">See Animation List</a></div>
<div class='buttons-inline animated bounceInRight slower' data-id='4'><a class='btn btn-default' href='https://github.com/Jack-McCourt/css3-animate-it/archive/master.zip'>Download!</a></div>
<div class='animated bounceInUp findMe' data-id='5'>Find me at <a target="_blank" href='http://jackonthe.net'>jackonthe.net</a></div>
</div>
</div>
</header>
<div class='container'>
<div class='animatedParent'>
<h2 class='animated growIn slowest'>Quick Start</h2>
</div>
<div class='animatedParent col-md-6' data-sequence='1000' >
<p class='animated bounceInLeft' data-id='1'>
Include <a href='js/css3-animated.js'>css3-animated.js</a> at the end of your file and <a href='css/animations.css'>animations.css</a> in the head.
</p>
<p class='animated bounceInLeft' data-id='2'>
Once you have done that you can just define <b>"animatedParent"</b> as the parent class which is what will trigger the child <b>class "animated"</b> to animate whichever animation is defined, here we are using <b>"bounceInDown"</b>.
</p>
<p class='animated bounceInLeft' data-id='3'>
<a href='examples.php'>Click here</a> to see an example of all the animations.
</p>
</div>
<div class='animatedParent col-md-6'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<div class='"); ?><span class='highlighter'><?php echo htmlspecialchars("animatedParent") ?></span><?php echo htmlspecialchars("'>") ?>
<?php echo htmlspecialchars("<h2 class='"); ?><span class='highlighter'><?php echo htmlspecialchars("animated bounceInDown"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
<?php echo htmlspecialchars("</div>"); ?>
</pre>
</div>
</div>
<div class='greyBackground'>
<div class='container' >
<div class='animatedParent' >
<h2 class='animated growIn slow'>Extra Functions</h2>
</div>
<!-- Sequencing -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>Sequencing</h3>
<div class='col-md-4'>
<p class='animated bounceInLeft slow'>
If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id".
</p>
</div>
<div class='animatedParent col-md-8'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<div class='animatedParent' "); ?><span class='highlighter'><?php echo htmlspecialchars("data-sequence='500'") ?></span><?php echo htmlspecialchars(">") ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown' "); ?><span class='highlighter'><?php echo htmlspecialchars("data-id='1'"); ?></span><?php echo htmlspecialchars(">It Works!</h2>"); ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown' "); ?><span class='highlighter'><?php echo htmlspecialchars("data-id='2'"); ?></span><?php echo htmlspecialchars(">This animation will start 500ms after</h2>"); ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown' "); ?><span class='highlighter'><?php echo htmlspecialchars("data-id='3'"); ?></span><?php echo htmlspecialchars(">This animation will start 500ms after</h2>"); ?>
<?php echo htmlspecialchars("</div>"); ?>
</pre>
</div>
</div>
<div class='animatedParent'>
<hr class='animated fadeIn slow' />
</div>
<!-- Offset -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>Offset</h3>
<div class='col-md-6'>
<p class='animated bounceInLeft slow'>
This will make the make the animation either start before or after it has entered the viewport by the specified ammount. So if you wanted to only start the animation after the user has scrolled 300px past it then setting an offset of -300px would achieve this.
</p>
</div>
<div class='animatedParent col-md-6'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<div class='animatedParent'"); ?><span class='highlighter'><?php echo htmlspecialchars("data-appear-top-offset='-300'") ?></span><?php echo htmlspecialchars(">") ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown'>It Works!</h2>"); ?>
<?php echo htmlspecialchars("</div>"); ?>
</pre>
</div>
</div>
<div class='animatedParent'>
<hr class='animated fadeIn slow' />
</div>
<!-- Animate Once -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>Animate Once</h3>
<div class='col-md-6'>
<p class='animated bounceInLeft slow'>
Adding this will make sure the item only animates once and will not reset when it leaves the viewport.
</p>
</div>
<div class='animatedParent col-md-6'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<div class='animatedParent "); ?><span class='highlighter'><?php echo htmlspecialchars("animateOnce") ?></span><?php echo htmlspecialchars("'>") ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown'>It Works!</h2>"); ?>
<?php echo htmlspecialchars("</div>"); ?>
</pre>
</div>
</div>
<div class='animatedParent'>
<hr class='animated fadeIn slow' />
</div>
<!-- Animate Once -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>Animation Speed</h3>
<div class='col-md-6'>
<p class='animated bounceInLeft slow'>
Currently you can define 4 speeds, the default which requires nothing then slow, slower and slowest.
</p>
</div>
<div class='animatedParent col-md-6'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<div class='animatedParent'"); ?><span class='highlighter'><?php echo htmlspecialchars("") ?></span><?php echo htmlspecialchars(">") ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown "); ?><span class='highlighter'><?php echo htmlspecialchars("slowest"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
<?php echo htmlspecialchars("</div>"); ?>
</pre>
</div>
</div>
<div class='animatedParent'>
<hr class='animated fadeIn slow' />
</div>
<!-- Delay -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>Delay (New)</h3>
<div class='col-md-6'>
<p class='animated bounceInLeft slow'>
You can now add individual delays to your animations if you don't want to do it with sequencing delays, please refer to the animations css file to see all the delays available.
</p>
</div>
<div class='animatedParent col-md-6'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<div class='animatedParent'"); ?><span class='highlighter'><?php echo htmlspecialchars("") ?></span><?php echo htmlspecialchars(">") ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown "); ?><span class='highlighter'><?php echo htmlspecialchars("delay-250"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
<?php echo htmlspecialchars("</div>"); ?>
</pre>
</div>
</div>
<div class='animatedParent'>
<hr class='animated fadeIn slow' />
</div>
<!-- On Click -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>On Click Toggle</h3>
<div class='col-md-6'>
<p class='animated bounceInLeft slow'>
You can now call the animations with an on click event. You can can define an out animation for transitioning out with this. <input type='button' class='btn btn-primary animatedClick' data-target='clickExample' value='Click me!'>
</p>
<p class='animated bounceInLeft slow'>
Please note that the target will only animate on view if you wrap it in an animatedParent class. If it is not in this then the animation will only trigger on click.
</p>
</div>
<div class='animatedParent col-md-6'>
<pre class='animated bounceInRight fadeOutDown slow clickExample'>
<?php echo htmlspecialchars("<input type='button' class='"); ?><span class='highlighter'><?php echo htmlspecialchars("animatedClick") ?></span><?php echo htmlspecialchars("'"); ?> <span class='highlighter'>data-target='clickExample'</span><?php echo htmlspecialchars(">"); ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown "); ?><span class='highlighter'><?php echo htmlspecialchars("clickExample"); ?></span> <span class='highlighter'><?php echo htmlspecialchars("fadeOutDown"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
</div>
</div>
<div class='animatedParent'>
<hr class='animated fadeIn slow' />
</div>
<!-- On Click Sequencing -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>On Click With Sequencing</h3>
<div class='col-md-5'>
<p class='animated bounceInLeft slow'>
You can now call the animations with an on click event. You can can define an out animation for transitioning out with this.
</p>
</div>
<div class='animatedParent col-md-7'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<input type='button' class='animatedClick' data-target='clickExample'"); ?> <span class='highlighter'>data-sequence='500'</span><?php echo htmlspecialchars(">"); ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown clickExample fadeOutDown' "); ?><span class='highlighter'>data-id='1'</span><?php echo htmlspecialchars(">It Works!</h2>"); ?>
<?php echo htmlspecialchars("<h2 class='animated bounceInDown clickExample fadeOutDown' "); ?><span class='highlighter'>data-id='2'</span><?php echo htmlspecialchars(">It Works!</h2>"); ?>
</pre>
</div>
</div>
<div class='animatedParent'>
<hr class='animated fadeIn slow' />
</div>
<!-- IE Fix -->
<div class='animatedParent row article'>
<h3 class='animated bounceInDown'>IE Fix</h3>
<div class='col-md-5'>
<p class='animated bounceInLeft slow'>
This is just a fix that will fix the elements not appearing on IE9 or less, please not that the animations will not work on IE9 or less.
<br /><br />
Place this below the animations.css link in the head of your file.
</p>
</div>
<div class='animatedParent col-md-7'>
<pre class='animated bounceInRight slow'>
<?php echo htmlspecialchars("<!--[if lte IE 9]>
<link href='/PATH/TO/FOLDER/css/animations-ie-fix.css' rel='stylesheet'>
<![endif]-->"); ?>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='animatedParent' data-sequence='1000'>
<footer class='animated growIn' data-id='1'>
<div class='container'>
<div class='row'>
<p class="col-md-10">©2014 All rights reserved. Designed by Jack McCourt at <b><a href='http://jackonthe.net' class='animated bounceInRight' data-id='2'>jackonthe.net</a></b></p>
</div>
</div>
</footer>
</div>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/css3-animate-it.js'></script>