Contenuti continui, scorrevoli, scorrevoli in tutte le direzioni

Question

Ho visto un effetto molto bello che mi piacerebbe provare e riprodurre per il mio progetto ma sto facendo fatica a vedere il modo migliore per ottenerlo sia in termini di prestazioni e operare senza soluzione di continuità.

L'effetto è continuo/looping del contenuto che può essere scrollato e spostato in qualsiasi direzione all'infinito e sembra essere completamente continuo. Può essere visto sul pluripremiato Leap: Second website di Android qui: http://leapsecond2015.com/.

Posso pensare ad un paio di modi per raggiungere questo obiettivo; uno è clonando il corpo contenuti e ripetere una volta in tutte le direzioni al caricamento della pagina e, quando scorrere/stroncato, aggiungere contenuti più clonato nel senso che l'utente si sta muovendo in.

La cosa che don capisco con questo metodo è la performance, come devo ancora usare. clone() in uno qualsiasi dei miei progetti. Diciamo che l'utente scorresse continuamente per 5 minuti, solo per divertimento, e clonato 10.000 volte: quali sono gli aspetti negativi della clonazione di così tanti contenuti?

Un altro metodo che ho visto era il ripristino della barra di scorrimento all'inizio quando l'utente ha raggiunto la fine del contenuto. Un po 'come questa demo:

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>

Ancora una volta, faccio fatica a vedere come questo dovrebbe funzionare senza problemi quando ho aggiunto la funzionalità di scorrimento orizzontale ad esso pure, ma sembra grande in verticale.

Mi piacerebbe sapere quale di questi metodi potrebbe funzionare meglio o, se nessuno di loro è adatto, si prega di consigli su come Android ha raggiunto il loro Leap: Secondo sito web o suggerire un nuovo metodo.

Ho avuto un discreto Google sull'argomento, ma sono stato inondato dagli articoli "scrollati di inchiostro" e ho colpito un muro di mattoni. Ho dato un'occhiata all'ispezione degli elementi su Firefox e penso di essere giunto alla conclusione che non stavano clonando e aggiungendo ma forse mi sbagliavo.

Answer 1

Per cominciare, è possibile ottenere uno sfondo infinitamente scrolling con costi molto poco processore utilizzando uno sfondo CSS ripetute e una piccola quantità di javascript:

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; 
 
}

come si può vedi, la finestra non scorre affatto all'infinito. Invece la finestra (solo 3600px x 3600px) continua a correggere la propria posizione, quindi solo appare come se fosse infinitamente scrollata.

Aggiunta del contenuto è un po 'più complesso, ma finché il modello di elementi ripete (prevedibilmente) in 2 dimensioni, lo stesso principio può essere impiegato: usando scrollBy() prendere le barre di scorrimento indietro ad una finestra posizione precedente sembra identico a quello che l'utente sta per entrare.

Per altri scenari complessi che coinvolgono una distribuzione più casuale di elementi, piuttosto che cloning elementi, sarebbe tentati per sostituire gli elementi già esistenti utilizzando insertBefore(); tale che un elemento che è (diciamo) 300px sotto la finestra e 900px verso destra del viewport viene spostato, quindi ora è 600px sopra il viewport e 300px a sinistra del viewport.

Ciò consentirà un movimento apparentemente infinito in tutte e quattro le direzioni (e una distribuzione casuale di elementi attraverso quel campo apparentemente infinito), senza aumentare il numero di elementi nel documento.

Answer 2

Sembra http://leapsecond2015.com/ utilizza http://www.pixijs.com/ che gestisce le prestazioni di caricamento di una quantità "infinita" di immagini/articoli

Answer 3

C'è voluto un po ', ma credo di avere finalmente scoperto la maggior parte dei metodi di Android utilizzati per questo effetto cool.

Come @Kootsj ha gentilmente sottolineato, il Leap: il secondo sito web utilizza PIXI-js - un webGL/canvas, libreria di rendering 2D, utilizzata principalmente per i giochi. Dopo aver esaminato le librerie alternative, è possibile utilizzare qualsiasi motore di gioco/rendering per ottenere lo stesso risultato.

Utilizzano la libreria di rendering per disegnare le singole immagini sulla loro area di disegno in un layout intelligente simile a una griglia. Quindi usano PIXI per animare/trasformare la tela su scroll, mouse, touch e trascinare gli eventi - per la massima fluidità immagino.

Guardando in PIXI di più, è possibile eseguire il 'caching della tela' e 'buffering della scena'. Sapendo questo, immagino che stiano memorizzando nella cache/clonando la scheda immagine e incollandola in qualche modo nelle direzioni in cui l'utente sta eseguendo lo scolling/panning, ma poiché è "memorizzata nella cache" o "bufferizzata", funziona estremamente bene. Non sono ancora al 100% come ottengono la funzionalità di panning inifity ma sembra che questo potrebbe essere vicino.

La loro sceneggiatura è composta da 20.500 righe di Javscript e ricorda quasi l'architettura di un gioco. Ci vorrà uno sforzo serio per ottenere un effetto simile con le prestazioni corrispondenti, ma ci proverò.

Se apprendo qualcosa di più su questa funzione o se trovo un esempio funzionante, aggiornerò questa risposta con i miei risultati.