Skip to content

Instantly share code, notes, and snippets.

@Largo

Largo/index.html

Forked from anonymous/index.html
Created January 22, 2016 14:59
Show Gist options
  • Save Largo/5ac74b01b5334a7dfabc to your computer and use it in GitHub Desktop.
Save Largo/5ac74b01b5334a7dfabc to your computer and use it in GitHub Desktop.
Download ZIP
Whole lot of shaking going on // source http://jsbin.com/hitabi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Whole lot of shaking going on</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" />
<style id="jsbin-css">
.box {
font-size: 15px;
width: 40%;
height: 60px;
margin: 0 auto;
font-color: #3e3e3e;
background-color: rgba(255, 255, 255, 0.5);
z-index:5034;
margin: auto;
border-radius: 5px;
padding: 20px;
text-align: center;
}
body {
/* background-color: orangered; */
background-color: #3e3e3e;
font-family: 'Roboto', sans-serif;
}
iframe {
display: block;
position: absolute;
height: 100%;
width: 70%;
top: 0;
bottom: 0;
left: 15%;
z-index: -999;
overflow: hidden;
}
</style>
</head>
<body>
<iframe src="http://www.youtube-nocookie.com/embed/8yRdDnrB5kM?autoplay=1&loop=1&playlist=8yRdDnrB5kM&showinfo=0&controls=0" frameborder="0"
allowfullscreen></iframe>
<div class="box"><h1>Whole lot of shakin goin' on</h1></div>
<!-- <button>Start</button> -->
<script id="jsbin-javascript">
$(function( ){
$('button').click(function() {
$('.box').toggleClass('animated shake'); /*$('.box').removeClass('animated shake').addClass('animated shake'); */
});
$('.box').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
/*$('.box').removeClass('animated shake'); */
});
var timeout = function() {
$("iframe").toggleClass('animated shake');
setTimeout(function() { timeout(); }, 1500);
};
timeout();
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>Whole lot of shaking going on</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" />
</head>
<body>
<iframe src="//www.youtube-nocookie.com/embed/8yRdDnrB5kM?autoplay=1&loop=1&playlist=8yRdDnrB5kM&showinfo=0&controls=0" frameborder="0"
allowfullscreen></iframe>
<div class="box"><h1>Whole lot of shakin goin' on</h1></div>
<\!-- <button>Start</button> -->
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.box {
font-size: 15px;
width: 40%;
height: 60px;
margin: 0 auto;
font-color: #3e3e3e;
background-color: rgba(255, 255, 255, 0.5);
z-index:5034;
margin: auto;
border-radius: 5px;
padding: 20px;
text-align: center;
}
body {
/* background-color: orangered; */
background-color: #3e3e3e;
font-family: 'Roboto', sans-serif;
}
iframe {
display: block;
position: absolute;
height: 100%;
width: 70%;
top: 0;
bottom: 0;
left: 15%;
z-index: -999;
overflow: hidden;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function( ){
$('button').click(function() {
$('.box').toggleClass('animated shake'); /*$('.box').removeClass('animated shake').addClass('animated shake'); */
});
$('.box').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
/*$('.box').removeClass('animated shake'); */
});
var timeout = function() {
$("iframe").toggleClass('animated shake');
setTimeout(function() { timeout(); }, 1500);
};
timeout();
});
</script></body>
</html>
Raw
jsbin.hitabi.css
.box {
font-size: 15px;
width: 40%;
height: 60px;
margin: 0 auto;
font-color: #3e3e3e;
background-color: rgba(255, 255, 255, 0.5);
z-index:5034;
margin: auto;
border-radius: 5px;
padding: 20px;
text-align: center;
}
body {
/* background-color: orangered; */
background-color: #3e3e3e;
font-family: 'Roboto', sans-serif;
}
iframe {
display: block;
position: absolute;
height: 100%;
width: 70%;
top: 0;
bottom: 0;
left: 15%;
z-index: -999;
overflow: hidden;
}
Raw
jsbin.hitabi.js
$(function( ){
$('button').click(function() {
$('.box').toggleClass('animated shake'); /*$('.box').removeClass('animated shake').addClass('animated shake'); */
});
$('.box').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
/*$('.box').removeClass('animated shake'); */
});
var timeout = function() {
$("iframe").toggleClass('animated shake');
setTimeout(function() { timeout(); }, 1500);
};
timeout();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment