Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 8871de69de
Chris Coyier
88 lines (60 sloc) 3.006 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>jQuery Circulate</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src=''></script>
<script type='text/javascript' src='js/jquery.easing.1.2.js'></script>
<script type='text/javascript' src='js/jquery.circulate.js'></script>
<script type='text/javascript' src='js/example.js'></script>
<img src="images/unicorn.png" alt="A Friggin Unicorn, yo." id="unicorn" />
<div id="page-wrap">
<img src="images/circulate.png" alt="Circulate" />
<div class="top-demo group">
<p>Requires the <a href="">jQuery Library</a> as well as the <a href="">Easing plugin</a>.</p>
<pre>&lt;script type='text/javascript' src=''>&lt;/script>
&lt;script type='text/javascript' src='js/jquery.easing.1.2.js'>&lt;/script>
&lt;script type='text/javascript' src='js/jquery.circulate.js'>&lt;/script></pre>
<h2>Usage / Options / Defaults</h2>
speed: 400, // Speed of each quarter segment of animation, 1000 = 1 second
height: 200, // Distance vertically to travel
width: 200, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: false, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
<h2>Stopping a loop</h2>
<p id="text-demo" class="group"c><span>C</span><span>R</span><span>A</span><span>Z</span><span>Y</span></p>
<button id="recurssive-button">Start</button>
<p>VERY BETA: <a href="/examples/">Full package (what you are looking at)</a></p>
<div id="sphere-area">
<img src="images/ball-orange.png" alt="ball" id="orange-ball" />
<img src="images/ball-blue.png" id="blue-ball" alt="" />
<img src="images/ball-green.png" id="green-ball" alt="" />
<p><a href="">&lt; Back to Article</a></p>
Jump to Line
Something went wrong with that request. Please try again.