Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Harlem shake HTML elements

HarlemShake class brings popular meme to your website. It allows you to shake HTML elements using CSS keyframe animations in Harlem Shake style, providing up to 9 different shake styles

Package contains harlemshake.js, harlemshake.packed.js (packed javascript), harlemshakes.css (with animation definitions) and example file: example.html to demonstrate class functionality.

Contents

Download

Example codes

//add first elements
var shake = new HarlemShake("test", {
		startAfter: 0,
		shakeStyle: "shake",
		applyToChild: false
});
//add other elements for later shake after 4 seconds
var offset = 4000
shake.add("test1",{
	startAfter: offset,
	shakeStyle: "flash"
});
shake.add("test2",{
	startAfter: offset,
	shakeStyle: "bounce"
});
shake.add("test3",{
	startAfter: offset,
	shakeStyle: "tada"
});
shake.add("test4",{
	startAfter: offset,
	shakeStyle: "swing"
});
shake.add("test5",{
	startAfter: offset,
	shakeStyle: "wobble"
});
shake.add("test6",{
	startAfter: offset,
	shakeStyle: "pulse"
});
shake.add("test7",{
	startAfter: offset,
	shakeStyle: "flip"
});
shake.add("heading",{
	startAfter: offset,
	shakeStyle: "rotate"
});

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew HarlemShake(id, config);
DescriptionAdd first HarlemShake HTML object
Input parameters

string or HTML element id - id of element or HTML element itself

json config - Json structure with configuration properties

  • string shakeStyle - name of the shake style (default: 'shake'). Possible values:
    • shake
    • flash
    • bounce
    • tada
    • swing
    • wobble
    • pulse
    • flip
    • rotate
  • int startAfter - amount of time in miliseconds after which to start to shake (default: 0)
  • bool applyToChild - if you are providing container element, set this to true to apply shale to all children (default: false)
Example input
//add first elements
var shake = new HarlemShake("test", {
		startAfter: 0,
		shakeStyle: "shake",
		applyToChild: false
});

Add delayed shakers

Back to method list

Method nameadd(id, config)
DescriptionAdd elements which shake will be delayed
Input parameters

string or HTML element id - id of element or HTML element itself

json config - Json structure with configuration properties

  • string shakeStyle - name of the shake style (default: 'shake'). Possible values:
    • shake
    • flash
    • bounce
    • tada
    • swing
    • wobble
    • pulse
    • flip
    • rotate
  • int startAfter - amount of time in miliseconds after which to start to shake (default: 4 seconds)
  • bool applyToChild - if you are providing container element, set this to true to apply shale to all children (default: false)
Example input
shake.add("test_later",{
	startAfter: 4000,
	shakeStyle: "flip"
});

Remove shake

Back to method list

Method nameremove(id)
DescriptionRemove shake from provided element
Input parameters

string or HTML element id - id of element or HTML element itself

Stop shaking

Back to method list

Method namestop()
DescriptionStops harlem shake for all provided elements

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus