Quiero repetir una imagen en un sitio web infinitamente. El propósito de este sitio web es solo mostrar esta imagen con una ilusión de infinito. Esto significa que mi sitio web no debe tener un principio ni un final. Debería desplazarse infinitamente en los ejes x e y. O al menos dar la ilusión de eso. La imagen se construye con precisión para que, si se agrega n veces, la transición sea perfecta.
Así que tengo un poco de experiencia con Unity y he diseñado niveles de juego, donde el fondo se repite si se llega al final de la imagen.
Mi idea era hacer lo mismo con html, css y javascript. Así que esto es lo que tengo hasta ahora:
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); } };No he usado css hasta ahora, pero estoy abierto a usar lo que sea necesario.
Con mi trabajo actual, no parece ser infinito, los desplazamientos no son "suaves" y, según el tamaño de la imagen y el tamaño de la pantalla, tengo que cambiar el tamaño de las imágenes manualmente.
Otra solución que probé fue esta:
CSS
html { width: 100000px; height: 100000px; background: url('weitsicht.png') repeat; background-size: cover; }Pero esto no es ni dinámico, ni infinito.
¿Cómo puedo cambiar mi solución para crear una ilusión de infinito?