I want to repeat an image on a website infinetly. The purpose of this website is only to show this image with an illusion of infinity. This means that my website should not have a start nor an end. It should scroll infinetly on the x and y axis. Or at least give the illusion of that. The image is precisely constructed so that if appending it n times, the transition is seamless.
So I've got a little experience with unity and have designed game levels, where the background repeats if the end of the image was reached.
My idea was to do the same with html, css and javascript. So this is what I've got so far:
HTML
<body>
<img src="weitsicht.png">
<img src="weitsicht.png">
<img src="weitsicht.png">
<script src="scripts.js" type="application/javascript"></script>
</body>
JavsScript
window.onscroll = function(ev) {
// if reached bottom of page scroll back to the 1/3 to the top (second image) to give the illusion of infinity
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.scrollTo(window.scrollX, window.innerHeight / 3);
}
// if reached top of page, scroll down to next image to give illusion of infinity
if ((window.scrollY) < 1) {
window.scrollTo(window.scrollX, window.innerHeight);
}
};
I haven't used css so far, but I'm open to use whatever it needs.
With my current work it doesn't appear to be infinitely, the scrolls aren't "smooth" and depending on the image size and screen size I have to resize the images manually.
Another solution I tried was this:
CSS
html {
width: 100000px;
height: 100000px;
background: url('weitsicht.png') repeat;
background-size: cover;
}
But this is neither dynamic, nor infinite.
How can I change my solution to create an illusion of infinty?