-
Notifications
You must be signed in to change notification settings - Fork 7
/
demo.html
74 lines (67 loc) · 2.77 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS3 Animation Keyframe Events</title>
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cssanimation.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cssanimation.jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#container').click(function(event) {
var pre = "Webkit Moz O ms",
support = false,
elem = this;
$(pre.split(" ")).each(function(i, p){
support = support || elem.style[p+'AnimationName'] !== undefined;
});
if(!support)
alert("This demo requires a browser that supports CSS3 Animations");
else
{
// Use the non-jQuery form
// CSSAnimation.trigger($('#animate').get(0), 'boxrotate', 3000);
// Use the jQuery Plugin
$('#animate').cssanimation('boxrotate', 3000);
}
})
$('#animate').bind('cssAnimationKeyframe', function(event){
var text = "";
switch(event.originalEvent.keyText) {
case '0%':
text = "down ↓"; break;
case '25%':
text = "right →"; break;
case '50%':
text = "up ↑"; break;
case '75%':
text = "left ←"; break;
case '100%':
text = ""; break;
};
$('#text').html(text);
});
});
</script>
</head>
<body>
<section id="container">
<div id="animate"></div>
<div id="text">click me</div>
</section>
<section id="blurb">
<h1>Keyframe Events for CSS3 Animations</h1>
<p>CSS3 Animations are great but the current implementation doesn't trigger Javascript Events for each Keyframe <em>(<a href="http://blog.joelambert.co.uk/2011/05/17/keyframe-events-for-css3-animations/">see here for more information</a>)</em>.</p>
<p>The <code>CSSAnimation</code> object provides the events the browser vendors left out! This allows you to bind event handlers to <code>cssAnimationKeyframe</code> events and perform any additional code that needs to happen at each keyframe.</p>
<p class="note">Note: This won't work as well on Mobile Webkit until <code>webkitRequestAnimationFrame()</code> is implemented!</p>
</section>
<footer>
<p>CSSAnimation.js © Copyright 2011 Joe Lambert. All Rights Reserved. Follow me on Twitter <a href="http://www.twitter.com/joelambert">@joelambert</a></p>
<img src="css/img/html5.png" alt="HTML5" width="35px" />
</footer>
</body>
</html>