Skip to content

Instantly share code, notes, and snippets.

@paulkoegel

paulkoegel/index.html

Created October 2, 2014 10:24
Show Gist options
  • Save paulkoegel/0d1d1aaaad4fc224527d to your computer and use it in GitHub Desktop.
Save paulkoegel/0d1d1aaaad4fc224527d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.frame-container {
background: black;
}
.frame {
background-image: url(https://i.ytimg.com/sb/sd4bqmP_460/storyboard3_L1/M0.jpg?sigh=2TsSoVovA9AcwTvi4T8kVilj8Mc);
width: 80px;
height: 45px;
float: left;
background-position: 160px 0;
}
#storyboard {
}
</style>
</head>
<body>
<div id="debug"></div>
<div id='frame-container'>
</div>
<img id='storyboard' src="https://i.ytimg.com/sb/sd4bqmP_460/storyboard3_L1/M0.jpg?sigh=2TsSoVovA9AcwTvi4T8kVilj8Mc">
<script id="jsbin-javascript">
$(document).ready(function() {
var frameWidth = 80.0,
frameHeight = 45.0,
storyBoardWidth = $('#storyboard').width(),
storyBoardHeight = $('#storyboard').height(),
columns = storyBoardWidth / frameWidth,
rows = storyBoardHeight / frameHeight,
totalFrames = columns * rows;
_(rows).times(function(r) {
_(columns).times(function(c){
$('#frame-container').append('<div class="frame" style="background-position: ' + c*framewidth + 'px ' + r*frameHeight + 'px"></div>');
});
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//jashkenas.github.io/underscore/underscore-min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="debug"></div>
<div id='frame-container'>
</div>
<img id='storyboard' src="https://i.ytimg.com/sb/sd4bqmP_460/storyboard3_L1/M0.jpg?sigh=2TsSoVovA9AcwTvi4T8kVilj8Mc">
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.frame-container {
background: black;
}
.frame {
background-image: url(https://i.ytimg.com/sb/sd4bqmP_460/storyboard3_L1/M0.jpg?sigh=2TsSoVovA9AcwTvi4T8kVilj8Mc);
width: 80px;
height: 45px;
float: left;
background-position: 160px 0;
}
#storyboard {
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {
var frameWidth = 80.0,
frameHeight = 45.0,
storyBoardWidth = $('#storyboard').width(),
storyBoardHeight = $('#storyboard').height(),
columns = storyBoardWidth / frameWidth,
rows = storyBoardHeight / frameHeight,
totalFrames = columns * rows;
_(rows).times(function(r) {
_(columns).times(function(c){
$('#frame-container').append('<div class="frame" style="background-position: ' + c*framewidth + 'px ' + r*frameHeight + 'px"></div>');
});
});
});</script></body>
</html>
Raw
jsbin.kasutokozaze.css
.frame-container {
background: black;
}
.frame {
background-image: url(https://i.ytimg.com/sb/sd4bqmP_460/storyboard3_L1/M0.jpg?sigh=2TsSoVovA9AcwTvi4T8kVilj8Mc);
width: 80px;
height: 45px;
float: left;
background-position: 160px 0;
}
#storyboard {
}
Raw
jsbin.kasutokozaze.js
$(document).ready(function() {
var frameWidth = 80.0,
frameHeight = 45.0,
storyBoardWidth = $('#storyboard').width(),
storyBoardHeight = $('#storyboard').height(),
columns = storyBoardWidth / frameWidth,
rows = storyBoardHeight / frameHeight,
totalFrames = columns * rows;
_(rows).times(function(r) {
_(columns).times(function(c){
$('#frame-container').append('<div class="frame" style="background-position: ' + c*framewidth + 'px ' + r*frameHeight + 'px"></div>');
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment