forked from tylergaw/css-shaky-animation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (62 loc) · 2.91 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Shaky Animation</title>
<meta name="description" content="Tyler Gaw is a Web Designer in Brooklyn, New York">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/general-styles.css">
<link rel="stylesheet" href="./css/shaky-animation.css">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24386968-1']);
_gaq.push(['_setDomainName', '.tylergaw.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="http://use.typekit.com/ogb2ajt.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div>
<div class="stage">
<div class="title">
<p>
Shaky Animation <i>using css</i>
</p>
</div>
<div class="description">
<p>
Another <i>semi-useless</i> experiment
</p>
</div>
<div class="credits">
<p>
from <a href="http://twitter.com/thegaw">@thegaw</a>
<a href="http://tylergaw.com/projects">Lab</a>
</p>
</div>
</div>
</div>
<footer role="contentinfo">
<p>
<strike>I'm not sure if it has a name</strike>,
[<a href="https://twitter.com/darrenhoyt/status/242263397926838273">Darren</a>
let me know that the name is <a href="http://en.wikipedia.org/wiki/Squigglevision">Squigglevision</a>]
but I've always loved the shaky
animation style of a lot of cartoons. The epic
<a href="http://youtu.be/MuOvqeABHvQ">Rejected</a> is a good example.
Here I'm using a CSS animation technique <a href="http://lab.tylergaw.com/css-animated-sprites/">i've used before</a>
to interpolate between frames of text that are slightly different
to accomplish that shaky style in the browser. The images are svg
so they should be nice and crisp at any size or ppi.
<br><a href="https://github.com/tylergaw/css-shaky-animation">Source on Github</a>
<br><a href="http://tylergaw.com/projects">More crud like this</a>
</p>
</footer>
</body>
</html>