HTML and CSS Reference
In-Depth Information
Figure 5-16. Moving an object in a loop using a cubic Bezier curve
Since the code for this example is essentially the same as in
Example 5-12
(besides the
four points), we have highlighted in bold the changed code in
Example 5-13
. We have
done this to show you that—with relatively simple changes—you can create dramatic
animation effects using cubic Bezier curves.
Example 5-13. Bezier curve loop
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX13: Bezier Curve Loop </title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var bullseye;
function eventWindowLoaded() {
bullseye = new Image();
bullseye.src = "bullseye.png"
bullseye.onload = eventAssetsLoaded;
