Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
music
.gitignore
.htaccess
README.md
example-page.html
index.html

README.md

harlem-shake -> CSS3, jQuery plugin

Usage:

First include CSS and scripts:

<head>
...
<link rel="stylesheet" type="text/css" href="css/jquery.harlem-shake-1.0.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.harlem-shake-1.0.js"></script>
...
</head>

Music (harlem-shake.ogg) must be in music/harlem-shake.ogg (in next version this will be configurable)

jquery.harlem-shake-1.0.js searches for music/harlem-shake.ogg (relative path)

Then you can trigger plugin on click or on page load, but I don't recommend on page load because most people don't like autoplayed sounds on webpage

<script>
	$(function() {

		$('.start').click(function() {
			//just add elements you want to animate
			$('.example, .header1, .header2, .header').harlemShake();
		});

		$('.stop').click(function() {
			//you can stop harlem shake with 'stop' option
			$('.example, .header1, .header2, .header').harlemShake('stop');
		});
	});
</script>

You can set additional options in data attribute if you use HTML5:

<div class="harlem-shake-element" data-pivot="true" data-animation="flash" data-animation-speed="fast">
	flash
</div>

In example above I used data animation "flash" and animation will be "fast".

Pivot (first dancer): You can set pivot with data-pivot="true". Pivot should be only one and my recommendation is to use animation "rotateHalf".

Data animation speed can be "slow" or "fast": data-animation-speed="fast|slow"

Data animation has following options (most are taken from animate.css):

  • rotate
  • rotateHalf
  • scale
  • jump
  • flash
  • shake
  • bounce
  • tada
  • swing
  • wobble
  • wiggle
  • pulse
  • flip
  • flipInX
  • flipOutX
  • flipInY
  • flipOutY
  • fadeIn

Live example on http://hromnik.com/web/harlem-shake/example-page.html