Endless Horse is a website fun project. A horse that is made with ASCII art is shown in the middle of a website. If you scroll the webpage, you will see the horse’s infinite leg.
This Endless Horse is not an important feature, but you can use it for fun.
CONTENTS
How to create Endless Horse?
If you are a programmer, or you want to build a website where you want to add this endless horse, you can easily build it by using jQuery and a little bit of CSS. So let’s check the code first. After that, I will explain each step.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Endless horse demo - codehasbug.com</title>
<style>
html,body {
height: 100%;
}
.wrapper{
display: grid;
place-items: center;
height: 100%;
margin-top: 34%;
}
.horse{
position: relative;
width: 350px;
}
pre {
margin: -16px;
white-space: break-spaces;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Endless Horse Demo</p>
<div class="horse">
<pre>
,
_,,)\.~,,._
(()` ``)\))),,_
| \ ''((\)))),,_ ____
|6` | ''((\())) "-.____.-" `-.-,
| .'\ ''))))' \)))
| | `. '' ((((
\, _) \/ |))))
`' | (((((
\ | ))))))
`| | ,\ /((((((
| / `-.______.< \ | )))))
| | / `. \ \ ((((
| / \ | `.\ | (((
\ | | | )| | ))
| | | | || | '
</pre>
<pre id="leg">
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
| | | | || |
</pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).scroll(function () {
// End of the document reached?
if ($(document).height() - $(this).height() == $(this).scrollTop()) {
$("#leg").clone().appendTo(".horse");
}
});
</script>
</body>
</html>Here I have created a wrapper that will wrap all the elements. Also, set the display property to display:grid; so that, it will center the endless horse.
I also set the margin to 34% so it will display at the bottom of the page. Inside the wrapper, I added one div element i.e. horse.
Now draw a horse using ASCII or you can use my code and paste it inside <pre> tag. To show exactly the same ASCII art, when the HTML page is shown in the browser, we put the code in the <pre> tag.
I also create a <pre> tag with an id “leg”. Inside it, I have pasted the “leg” part of the horse.
Now comes the main part of making Endless Horse. The main trick is, in our script we have added a condition i.e. if we reach the end of the page, our script will automatically clone the <pre> tag that contains the leg by using jQuery clone() function and append to horse class div element.
$(window).scroll(function () {
// End of the document reached?
if ($(document).height() - $(this).height() == $(this).scrollTop()) {
$("#leg").clone().appendTo(".horse");
}
});Is the endless horse really endless?
Yes, it is. You can’t stop this Endless Horse’s leg until your browser crashes or your laptop runs out of battery.
How do you get to the bottom of the endless horse?
It is not possible to see the bottom of the endless horse. This is because, whenever you reach the bottom of that page, our script will add another leg block. So it is endless unless you modify the code.
