Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

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

About

CSS3, jQuery plugin

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.