-
Notifications
You must be signed in to change notification settings - Fork 65
/
index.html
83 lines (79 loc) · 5.87 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bouncy Ball - Compare Web Animation Techniques</title>
<meta name="description" content="Bouncy Ball compares web animation techniques by showing how to bounce a ball with each one." />
<meta name="keywords" content="bouncy ball,web animation techniques,vanilla-js animation example,css animation example,Canvas animation example,jQuery animation example,GreenSock animation example,Velocity animation example,Web Animations API animation example,P5 animation example,SMIL animation example,mo.js animation example,React animation example,D3 animation example,Animated Gif animation example,Video animation example,Matter.js animation example,WebGL animation example,Flash animation example,Popmotion animation example,Lottie animation example" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="site/favicon.ico" type="image/x-icon">
<link rel="icon" href="site/favicon.ico" type="image/x-icon">
<meta property="og:title" content="Bouncy Ball - Compare Web Animation Techniques" />
<meta property="og:description" content="Bouncy Ball compares web animation techniques by showing how to bounce a ball with each one." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://sparkbox.github.io/bouncy-ball" />
<meta property="og:image" content="https://sparkbox.github.io/bouncy-ball/site/images/graphic.png" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400|Source+Code+Pro|Ubuntu:500" rel="stylesheet">
<link rel="stylesheet" href="site/css/styles.css">
</head>
<body class="no-focus">
<header class="header">
<h1 class="title">Bouncy Ball</h1>
<p class="description">Compare web animation techniques by showing how to bounce a ball with each one.</p>
<a href="https://github.com/sparkbox/bouncy-ball" title="See the code on Github" style="position: absolute; top: 0; right: 0; border: 0; padding: 0.5rem">
<svg width="36" height="36" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/>
</svg>
</a>
</header>
<div class="selection-bar">
<a href="#vanilla-js" id="vanilla-js" class="nav-button button-vanillajs">Vanilla JS</a>
<a href="#css" id="css" class="nav-button button-css">CSS</a>
<a href="#css-step" id="css-step" class="nav-button button-cssstep">CSS (step)</a>
<a href="#canvas" id="canvas" class="nav-button button-canvas">Canvas</a>
<a href="#jquery" id="jquery" class="nav-button button-jquery">jQuery</a>
<a href="#greensock" id="greensock" class="nav-button button-greensock">GreenSock</a>
<a href="#velocity" id="velocity" class="nav-button button-velocity">Velocity</a>
<a href="#web-animations-api" id="web-animations-api" class="nav-button button-webanimations">Web Animations API</a>
<a href="#p5" id="p5" class="nav-button button-p5">P5.js</a>
<a href="#smil" id="smil" class="nav-button button-smil">SMIL</a>
<a href="#mojs" id="mojs" class="nav-button button-mojs">mo.js</a>
<a href="#anime" id="anime" class="nav-button button-anime">anime.js</a>
<a href="#react" id="react" class="nav-button button-react">React</a>
<a href="#d3" id="d3" class="nav-button button-d3">D3</a>
<a href="#animated-gif" id="animated-gif" class="nav-button button-gif">Animated Gif</a>
<a href="#video" id="video" class="nav-button button-video">Video</a>
<a href="#matter-js" id="matter-js" class="nav-button button-matterjs">Matter.js</a>
<a href="#webgl" id="webgl" class="nav-button button-webgl">WebGL</a>
<a href="#webgpu" id="webgpu" class="nav-button button-webgpu">WebGPU</a>
<a href="#flash" id="flash" class="nav-button button-flash">Flash</a>
<a href="#popmotion" id="popmotion" class="nav-button button-popmotion">Popmotion</a>
<a href="#lottie" id="lottie" class="nav-button button-lottie">Lottie</a>
<a href="#motion-one" id="motion-one" class="nav-button button-motion">Motion One</a>
</div>
<div class="panes">
<div class="docs-toggle">
<button class="docs-toggle-link button-link" id="toggle">about
<span class="demo-name">Vanilla JS</span>
</button>
</div>
<div class="pane docs-pane">
<div class="docs-pane-content"></div>
</div>
<div class="pane preview-pane">
<p class="unsupported" style="display: none">This technique is not supported in your browser.
<a href="#" id="learn" class="unsupported-details">Learn more</a>.</p>
<iframe class="demo-frame" src="examples/vanilla-js/index.html" name="bouncy ball demo" title="bouncy ball demo" frameborder="1" scrolling="no"></iframe>
</div>
<div class="pane source-pane">
<div class="prism-show-language"></div>
<pre><code class="language-javascript"></code></pre>
</div>
</div>
<div class="credit">
<span>Made by your friends at
<a class="credit-link" href="https://twitter.com/hearsparkbox">@hearsparkbox</a>.</span>
</div>
<script type="module" src="site/js/index.js"></script>
</body>
</html>