vaclavbohac/index.html

## gistfile3.txt

      
    Raw
  

              gistfile3.txt
            
          
## 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>

## 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;
}
	<!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> © 2010
	</div>
	<!-- copy end -->

	</div>
	<!-- ground end -->

	</body>
	</html>
	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;
	}