Skip to content

Instantly share code, notes, and snippets.

@JustinWinthers

JustinWinthers/JSBully-css-shake-tutorial.html

Last active August 29, 2015 13:57
Show Gist options
  • Save JustinWinthers/9522603 to your computer and use it in GitHub Desktop.
Save JustinWinthers/9522603 to your computer and use it in GitHub Desktop.
Download ZIP
Example from my blog JavaScriptBully.org using the CSS Shake Library. Please do not point to my libraries on my JavaScriptBully server. If you copy this gist, download your own versions.
Raw
JSBully-css-shake-tutorial.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Description" content="Test app">
<title>JavaScriptBully CSS Shake Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.css">
<link rel="stylesheet" href="//javascriptbully.org/assets/css/prism.css">
<link rel="stylesheet" href="//javascriptbully.org/assets/css/shake.min.css" type="text/css" >
<style>
body {
width:50%;
margin-top: 50px;
margin-left: 25%
}
</style>
</head>
<body>
<style>
/* I'm only putting this inside my body because it's just a demo
please don't think this is good practice
*/
.odd {
background-color: #e4f2f0;
}
table{
border-spacing: 0px;
}
.logo {width: 175px; margin-top:25px; margin-bottom: 15px}
pre {
border-color: darkgray;
border-width: 2px;
border-style: solid
}
</style>
<div ng-app="myApp" class="row" ng-controller="Controller">
<div class="large-4 columns">
<table ng-mouseout="shakeClass=null">
<tbody>
<tr class="odd"><td ng-mouseover="shake('')"><b>:hover to shake it</b></td><tr>
<tr><td ng-mouseover="shake('shake-slow')">shake slow</td><tr>
<tr class="odd"><td ng-mouseover="shake('shake-hard')">shake hard</td><tr>
<tr><td ng-mouseover="shake('shake-little')">shake little</td><tr>
<tr class="odd"><td ng-mouseover="shake('shake-horizontal')">shake horizontal</td><tr>
<tr><td ng-mouseover="shake('shake-vertical')">shake vertical</td><tr>
<tr class="odd"><td ng-mouseover="shake('shake-opacity')">shake opacity</td><tr>
<tr><td ng-mouseover="shake('shake-rotate')">shake rotate</td><tr>
<tr class="odd"><td ng-mouseover="shake('shake-crazy')">shake crazy</td><tr>
</tbody>
</table>
</div>
<div class="large-7 columns">
<img class="shake {{shakeClass}} " src="//javascriptbully.org/assets/img/jsbully-logo.png" />
<pre class="shake {{shakeClass}} language-markup"><code id="code">{{shakeCode}}</code>
</pre>
</div>
<div class="large-1 columns"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/js/vendor/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/js/foundation.min.js"></script>
<script src="//javascriptbully.org/assets/js/prism.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
'use strict';
$(document).foundation();
angular.module('myApp', [], undefined, 'Dev');
angular.module('myApp')
.factory('tokenize',function(){
return function (token){
if (!token) token=':hover to make shake it yo/'
return ('&lt;div class="shake ' + token + '"&gt;' + '&lt;/div&gt;')
}
})
.factory('setCodeElement',function(tokenize){
var el;
return function( token ){
//because the Prism library creates an object that sits in the page, the element's html
//had to be refreshed as two way binding won't work in this case to dynamically change
//the text that's in the code element and being transformed by Prism.
el = angular.element('#code');
el.html( tokenize(token) );
//eventually I'll turn the Prism library into a Provider
Prism.highlightElement(el[0]);
}
})
.controller('Controller',function ($scope, setCodeElement){
setCodeElement( $scope.shakeClass );
$scope.shake = function( shakeClass ){
$scope.shakeClass = shakeClass + ' shake-constant';
setCodeElement( $scope.shakeClass );
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment