Skip to content

Instantly share code, notes, and snippets.

@vaclavbohac

vaclavbohac/index.html

Created May 20, 2010 12:59
Show Gist options
  • Save vaclavbohac/407536 to your computer and use it in GitHub Desktop.
Save vaclavbohac/407536 to your computer and use it in GitHub Desktop.
Download ZIP
Sheep counter with jquery
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sheep counter</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Nobile' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/footerPos.js"></script>
<script type="text/javascript" src="js/spritely.js"></script>
<script type="text/javascript">
var Sheep = {};
Sheep.setEl = function (el) {
if (typeof el === 'object') {
this.el = el;
}
}
Sheep.getEl = function () {
if (typeof this.el === 'object') {
return this.el;
}
return {};
}
Sheep.fly = function (callback) {
this.getBack();
var height, width;
height = $(document).height();
width = $(document).width();
this.topOrig = this.el.css('top');
this.el.stop(true, true)
.animate({left: width + 'px'}, {queue: false, duration: 5000})
.animate({top: 100 + 'px'}, {duration: 2300, easing: 'swing'})
.animate({top: 360 + 'px'}, {duration: 2700, easing: 'linear', complete: callback});
}
Sheep.getBack = function () {
$('#sheep').stop(true, true).css({left: '0px', top: '360px'});
}
var raiseCounter = function () {
var i = parseInt($('#counter span').text());
$('#counter span').text(i += 1);
}
$(document).ready(function () {
$('#clouds').pan({
fps: 30,
speed: 2,
dir: 'left'
});
var el = $('<div id="sheep">');
Sheep.setEl(el);
$('#wrapper').append(Sheep.getEl());
Sheep.fly(raiseCounter);
window.setInterval(function () {
Sheep.fly(raiseCounter);
}, 5000);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="clouds">
</div>
<!-- clouds end -->
<div id="counter">
<span>1</span>
</div>
<!-- counter end -->
</div>
<!-- wrapper end -->
<div id="ground">
<div id="copy">
Created by <a href="http://wop.vlcovice.net">Václav Boháč</a> &copy; 2010
</div>
<!-- copy end -->
</div>
<!-- ground end -->
</body>
</html>
Raw
style.css
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {
margin:0;
padding:0;
text-align:left;
}
body {
background: #aedfe5 url(../img/sky.png) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a {
color: #fff;
text-decoration: underline;
}
#wrapper {
overflow: hidden;
}
#sheep {
top: 300px;
background: #fff;
width: 100px;
height: 100px;
position: fixed;
}
#clouds {
height: 360px;
background: transparent url(../img/cloud.png) 305px 102px repeat-x;
}
#counter {
color: #fff;
font-family: 'Nobile', arial, serif;
font-size: 150px;
text-align: center;
}
#ground {
background: url(../img/hill.png) bottom repeat-x;
height: 100px;
width: 100%;
}
#copy {
margin-right: 50px;
padding-top: 50px;
text-align: right;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment