A friend asked me to check this website: endless.horse.
When the page loaded, I saw a picture of a horse like this:
When I scrolled down with the mouse wheel, I noticed the scrolling was producing endlessly long horse legs.
Since I am not a DHTML expert, I went ahead and looked at the source code of the website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
endless.horse
Colleen Josephson and Kyle Miller, 2015
Created during the West Coast Stupid Shit No One Needs & Terrible Ideas Hackathon
-->
<head>
<meta name="hooooooooooooooooooooooooooooooooooooooooooooooooooooooooorse"
http-equiv="Content-Type" content="text/html; charset=UTF-8;
Author: Colleen Josephson" />
<title>hooooooooooooooooooooooooooooooooooooooooooooooooooooooooorse</title>
<link rel="shortcut icon" href="favicon.png" />
<meta name=viewport content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="/jquery.jscroll.js"></script>
<style type="text/css">
pre { margin: 0; }
.centered { width: 380px; margin: 0 auto 0 auto; }
h1 { text-align: center; }
</style>
<script type="text/javascript">
$(function () {
$('#horse').jscroll({
padding: 2000,
loadingHtml: ''
});
});
</script>
</head>
<body>
<div id="horse" class="centered" style="padding-top: 222px">
<pre> ,
_,,)\.~,,._
(()` ``)\))),,_
| \ ''((\)))),,_ ____
|6` | ''((\())) "-.____.-" `-.-,
| .'\ ''))))' \)))
| | `. '' ((((
\, _) \/ |))))
`' | (((((
\ | ))))))
`| | ,\ /((((((
| / `-.______.< \ | )))))
| | / `. \ \ ((((
| / \ | `.\ | (((
\ | | | )| | ))
| | | | || | '</pre>
<a href="legs.html"></a>
</div>
</body>
</html>
Basically, two things to notice. The first is that there’s page scroll handler that gets installed using the jScroll library (written on top of jQuery):
$(function () {
$('#horse').jscroll({
padding: 2000,
loadingHtml: ''
});
});
So what basically happens is that when you scroll, the contents of legs.html are loaded and appended to the current document.
If we look at the source code of legs.html, we see the legs text and then a self-reference to the same page which will be loaded when you scroll again. Hence the endless horse legs:
<pre id="segment"> | | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || | </pre>
<a href="legs.html"></a>
Checkout the jQuery in Action book:
You might also like: