Continuous, looping, scrollbarer Inhalt in alle Richtungen

Question

Ich habe einen sehr schönen Effekt gesehen, den ich gerne für mein eigenes Projekt reproduzieren würde, aber ich habe Mühe, den besten Weg zu finden, dies sowohl in Bezug auf die Leistung zu erreichen und absolut nahtlos zu arbeiten.

Der Effekt ist ein Continuous/Looping-Inhalt, der endlos in jeder Richtung gescrollt und geschwenkt werden kann und vollkommen nahtlos erscheint. Es kann auf Androids preisgekrönter Leap: Second Website hier gesehen werden: http://leapsecond2015.com/.

Ich kann mir ein paar Wege vorstellen, dies zu erreichen; ist durch den Inhalt Körper Klonen und es einmal in alle Richtungen auf Seite laden und wiederholen, wenn gescrollt/verrissen, mehr geklonte Inhalt in Richtung hinzufügen, die Benutzer in bewegt.

Das, was ich don verstehe mit dieser Methode nicht die Leistung, wie ich sie noch benutzen muss. clone() in einem meiner Projekte. Nehmen wir an, der Benutzer scrollte kontinuierlich fünf Minuten lang, nur zum Spaß, und klonte 10.000 Mal - was sind die Nachteile des Klonens von so viel Inhalt?

Eine andere Methode, die ich gesehen habe, war das Zurücksetzen der Bildlaufleiste an den Anfang, wenn der Benutzer das Ende des Inhalts erreicht. Ein bisschen wie dieses Beispiel:

var bgHeight = 1600; // pixel height of background image 
 

 
$(document).ready(function() { 
 
    $('body').height(bgHeight + $(window).height()); 
 
    $(window).scroll(function() { 
 
     if ($(window).scrollTop() >= ($('body').height() - $(window).height())) { 
 
      $(window).scrollTop(1); 
 
     } 
 
     else if ($(window).scrollTop() == 0) { 
 
      $(window).scrollTop($('body').height() - $(window).height() -1); 
 
     }  
 
    }); 
 
}); 
 
$(window).r

body { 
 
    height: 1600px; 
 
    background-image: url(""); 
 
    background-p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Wieder kämpfen ich zu sehen, wie diese nahtlos funktionieren würde, wenn ich das horizontale Scrollen Funktionalität, es so gut aufgenommen, sondern sieht vertikal groß.

Ich würde gerne wissen, welche dieser Methoden würde besser funktionieren oder, wenn keine von ihnen geeignet sind, bitte beraten, wie Android es auf ihrer Leap: Second Website erreicht haben oder eine neue Methode vorschlagen.

Ich hatte eine anständige Google zu dem Thema, aber stattdessen mit 'inifinte Scrolling' Artikel überflutet und habe eine Mauer getroffen. Ich habe mir die Element-Inspektion von Firefox angeschaut und ich glaube, ich kam zu dem Schluss, dass sie nicht klonten und anhängten, aber vielleicht lag ich falsch.

Answer 1

mit zu starten, Sie mithilfe eines CSS wiederholt Hintergrund und eine sehr kleine Menge von Javascript ein unendlich Scrollen Hintergrund mit sehr wenig Prozessor Kosten erreichen kann:

window.scroll(1800,1800); 
 

 
function resetWindow() { 
 

 
    if (window.pageXOffset < 900) { 
 
    window.scrollBy(900,0); 
 
    } 
 

 
    if (window.pageXOffset > 2700) { 
 
    window.scrollBy(-900,0); 
 
    } 
 

 
    if (window.pageYOffset < 900) { 
 
    window.scrollBy(0,900); 
 
    } 
 

 
    if (window.pageYOffset > 2700) { 
 
    window.scrollBy(0,-900); 
 
    } 
 
} 
 

 
window.addEventListener('scroll',resetWindow,false);

body { 
 
width: 3600px; 
 
height: 3600px; 
 
background-image: url('http://1-background.com/images/stars-1/star-space-tile.jpg'); 
 
background-size: 300px 300px; 
 
background-repeat: repeat; 
 
}

Wie können Sie Sehen Sie, das Fenster scrollt nicht unendlich. Stattdessen korrigiert das Fenster (nur 3600px x 3600px) seine eigene Position, so dass es nur aussieht, als würde es unendlich gescrollt werden.

Inhalt Hinzufügen ist etwas komplexer, aber solange das Muster der Elemente Repeats (vorhersagbar) in 2 Dimensionen kann das gleiche Prinzip angewendet werden: scrollBy() unter Verwendung der Bildlaufleisten nehmen zurück zu einem früheren Darstellungsfeld-Position das sieht identisch mit dem aus, den der Benutzer gerade betreten möchte.

Für komplexere Szenarien eine zufällige Verteilung von Elementen beteiligt, anstatt cloning Elemente, würde ich insertBefore();, so dass ein Element mit bereits vorhandenen Elementen zu ersetzen versucht sein, die (beispielsweise) 300px unter dem Ansichtsfenster und 900px nach rechts des Ansichtsfensters wird verschoben, so dass sich jetzt 600px über dem Ansichtsfenster und 300px auf der linken Seite des Ansichtsfensters befindet.

Dies ermöglicht eine scheinbar unendliche Bewegung in alle vier Richtungen (und eine zufällige Verteilung von Elementen über dieses scheinbar unendliche Feld), ohne die Anzahl der Elemente im Dokument zu erhöhen.

Answer 2

Es sieht aus wie http://leapsecond2015.com/http://www.pixijs.com/ verwendet, die die Leistung des Ladens eine „unendliche“ Anzahl der Bilder/Artikels Griffe

Answer 3

Es dauerte eine Weile, aber ich denke, ich habe endlich die meist Android Methoden entdecken für diesen coolen Effekt verwendet.

Wie @Kootsj freundlicherweise darauf hingewiesen, verwendet die Leap: Second Website PIXI-js - eine WebGL/Canvas, 2-D-Rendering-Bibliothek, in erster Linie für Spiele verwendet. Nach dem Betrachten alternativer Bibliotheken könnte jede der Spiel-/Rendering-Engines verwendet werden, um das gleiche Ergebnis zu erzielen.

Sie verwenden die Rendering-Bibliothek, um die einzelnen Bilder in einem intelligenten, gitterähnlichen Layout auf ihre Leinwand zu zeichnen. Dann verwenden sie PIXI, um die Leinwand bei Scroll-, Maus-, Touch- und Drag-Events zu animieren/zu transformieren - für die ultimative Geschmeidigkeit, denke ich.

Wenn Sie mehr in PIXI sehen, ist 'Canvas Caching' und 'Szenenpufferung' möglich. Wenn ich das wüsste, würde ich mir vorstellen, dass sie das Bildboard zwischenspeichern/klonen und es irgendwie in die Richtungen einfügen, in die der Benutzer scollt/pinnt, aber weil es zwischengespeichert oder gepuffert ist, funktioniert es sehr gut. Ich bin immer noch nicht zu 100%, wie sie die Inifity-Panning-Funktion erreichen, aber es scheint, als könnte das nah sein.

Ihr Skript besteht aus 20.500 Zeilen Javscript und ähnelt ziemlich der Architektur eines Spiels. Es wird einige ernsthafte Anstrengungen erfordern, um einen ähnlichen Effekt mit passender Leistung zu erreichen, aber es wird versuchen.

Wenn ich mehr über diese Funktion oder ein funktionierendes Beispiel erfahre, werde ich diese Antwort mit meinen Ergebnissen aktualisieren.