<!DOCTYPE html>
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* HarlemShake is a package that 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
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Harlem-shake-HTML-elements
**************************************************************/
-->
<html>
<head>
<link rel="stylesheet" href="./harlemshakes.css"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#controls
{
width: 100px;
position: absolute;
border: 3px solid black;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div style='width: 1000px; margin-left: auto; margin-right: auto;'>
<h1 id='heading' style='width: 300px; text-align: center; background-color: red;'>Website heading</h1>
<div id='text' style='width: 800px;'>
<p id='test2'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam elit. Duis sollicitudin, tellus eu porttitor fermentum, dolor libero malesuada eros, accumsan tempor dolor libero quis leo. Phasellus interdum vehicula dignissim. Cras iaculis cursus neque id pretium. Aliquam feugiat suscipit condimentum. Maecenas non sollicitudin enim. Mauris neque nisl, consectetur et aliquet non, mollis quis urna. Nunc condimentum faucibus massa, in tempus leo eleifend sit amet. Ut ultrices quam lacus. Integer id tellus in quam commodo porttitor ut nec tortor.</p>
<p id='test'><a href='#'>Some link</a></p>
<p id='test1'>Praesent et justo neque, non tincidunt neque. Duis molestie mauris ut velit cursus eget imperdiet turpis viverra. In dapibus ipsum diam, sed gravida erat. Nunc vulputate venenatis magna, non faucibus nisi tincidunt at. Pellentesque eu eleifend leo. Vivamus eros enim, elementum nec laoreet sed, tempus semper lacus. Morbi imperdiet dolor a ligula suscipit adipiscing. Morbi sed sapien et mauris commodo tempus et vitae velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis ipsum, eleifend in tristique nec, adipiscing non tellus. Etiam non scelerisque diam. Maecenas tristique posuere dictum.</p>
<p id='test3'>Etiam adipiscing libero nec ligula suscipit bibendum. Phasellus in augue quis mauris pulvinar varius et id neque. Pellentesque risus justo, cursus sed tristique ac, gravida et felis. Cras et augue sed lectus ullamcorper sollicitudin vel eget magna. Praesent et turpis quam, nec sollicitudin purus. Quisque porta, metus a egestas condimentum, nibh dolor varius nisi, sit amet feugiat lorem nunc a tortor. Curabitur viverra rutrum dolor. Mauris eget nibh non lacus elementum commodo id vel quam. Praesent eget nisi eu mi porttitor fermentum.</p>
<p id='test4'>Fusce quis leo sagittis quam scelerisque tempor. Praesent posuere pretium tempus. Donec mattis condimentum dolor non pellentesque. Nullam a egestas nisi. Quisque nec nibh quis sem vulputate posuere. Maecenas est leo, pellentesque sed cursus et, dignissim a magna. Sed commodo augue dapibus sem placerat ac accumsan urna convallis. Nulla augue orci, auctor et tempor a, fringilla eu leo. Donec ut leo nec augue adipiscing dignissim.</p>
<p id='test5'>Sed ac nibh risus, non malesuada nisl. Maecenas id justo neque. Vivamus tincidunt quam ac nisl sollicitudin a auctor enim convallis. Nam eget lorem eget turpis aliquet varius at eu nunc. Sed ut ante dui. Sed elementum vulputate tellus vitae laoreet. Nullam sodales ornare arcu, vitae tempor leo placerat quis.</p>
<p id='test6'>Vivamus posuere luctus dignissim. Donec iaculis ultricies magna non sagittis. Duis semper felis ac neque suscipit a porta lorem tempor. Nunc lacinia vestibulum ligula eu varius. In volutpat ipsum at felis lobortis mattis volutpat dui ultricies. Etiam nec elit ut odio feugiat pulvinar sed id metus. Nullam suscipit feugiat nunc a tempor. Vestibulum posuere, eros in sollicitudin dapibus, leo urna gravida odio, eu vestibulum arcu leo in urna. Ut sit amet iaculis mi. Sed hendrerit ullamcorper turpis, ac sodales dolor consequat eu. Nunc ut turpis turpis, ut condimentum justo. Quisque imperdiet urna non leo luctus et aliquet nulla iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae ultrices nunc.</p>
<p id='test7'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam elit. Duis sollicitudin, tellus eu porttitor fermentum, dolor libero malesuada eros, accumsan tempor dolor libero quis leo. Phasellus interdum vehicula dignissim. Cras iaculis cursus neque id pretium. Aliquam feugiat suscipit condimentum. Maecenas non sollicitudin enim. Mauris neque nisl, consectetur et aliquet non, mollis quis urna. Nunc condimentum faucibus massa, in tempus leo eleifend sit amet. Ut ultrices quam lacus. Integer id tellus in quam commodo porttitor ut nec tortor.</p>
</div>
</div>
<!--<div id='controls'>
<p><button onclick='shake.stop()'>Stop</button></p>
</div>-->
<script type="text/javascript" src="./harlemshake.packed.js" ></script>
<script type="text/javascript">
//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 = 6000
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"
});
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
