Come eseguire lo scroll di parallasse su un dispositivo iOS

Question

Oggi ho visto l'applicazione ipad più incredibile che mi è stata assicurata è stata scritta usando html5, css3 e javascript ... la parte migliore dell'app era che avevano perfettamente creato una pergamena di parallasse. .. La mia domanda è ... come? ... Non riesco a trovare alcuna documentazione su di esso essendo possibile creare un scroll di parallasse su dispositivi iOS ... se qualcuno potrebbe darmi un link o qualche consiglio su come farlo sarebbe più apprezzato ... qualcuno? ... cordiali saluti J

Answer 1

sto anche cercando di farlo. Dai un'occhiata a stellar.js di Mark Dalgeish. Funziona meravigliosamente nella maggior parte delle situazioni. Se qualcuno ha altri link o informazioni sarebbe bello sentirlo.

http://markdalgleish.com/projects/stellar.js/demos/ios.html

utilizza scrollabilità. Spero di far funzionare scrollarama su un iPad in qualche modo come fa stellar.js. Bene, questo è il sogno!

Spero che questo aiuti la tua ricerca.

Answer 2

al momento, non è possibile su dispositivi iOS. I dispositivi iOS bloccano la manipolazione del DOM durante lo scorrimento, mettendoli in coda per applicarli al termine dello scorrimento. quindi otterrai al meglio animazioni pesanti. non preoccuparti

Answer 3

Recentemente abbiamo pubblicato un sito che esegue lo scrolling parallasse su iPad. C'è un po 'di una spiegazione, e un video di esso in uso qui: http://www.aerian.com/portfolio/one-potato/one-potato-html5-website

e il sito stesso se si dispone di un iPad con cui giocare:

• http://one-potato.co.uk

Per fare questo, abbiamo scritto qualche codice di libreria JavaScript che stiamo cercando di open-source nel prossimo futuro.

L'idea di base è scrivere un contenitore di scorrimento che accetta l'immissione del tocco e tiene traccia delle posizioni x e y (se sono necessarie due dimensioni) del contenuto. Per renderlo compatibile con la parallasse, abbiamo trovato che il modo migliore è usare la delega a un controller di sorta. Non riesco a ricordare la sintassi esatta abbiamo usato senza guardare

container.on('touchmove', function(e) { 
    //get our offset 
    var offset = <some value>; //e.g. { x : 0, y : -1300 } 
    var easing = 'ease-out'; 

    self.delegate.scrollViewDidScrollToOffsetWithAnimation(self, offset, easing); 
}); 

Poi nel controller, qualcosa di simile:

var scrollView = new ScrollView($('#container')); 

var controller = { 
    scrollViewDidScrollToOffsetWithAnimation : function(scrollView, offset, easing) { 
     //here you need to respond to offset, by changing some css properties of your parallax elements: 
     parallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.8)'); 
     anotherParallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.1)'); 
    } 
} 

scrollView.setDelegate(controller); 

Questo modello delegato è fortemente influenzato dal UIKit come mi sento fornisce un pulitore modo di informare parti disparate di un sistema di eventi di un altro. Trovo che l'uso di troppo dispendio di eventi sia difficile da mantenere, ma questa è un'altra storia.

Spero che questo aiuti un po '.

Answer 4

Questo sito mostra un buon esempio di come effetti di stile di parallasse possono lavorare su iOS https://victoriabeckham.landrover.com/INT

Sono simulando lo scorrimento a seconda del tipo di ingresso si stanno dando. In realtà non stai scorrendo la pagina e quindi animando le varie proprietà. Sta leggendo gli eventi touch, la rotellina del mouse o la loro barra di scorrimento personalizzata e vedendo quanto vuoi scorrere. Tutto il contenuto della pagina è in un contenitore. In questo modo quando stai facendo un evento touch, stai solo leggendo quanto ti stai muovendo sulla pagina.

Inoltre, stanno utilizzando un ciclo di animazione per far muovere tutto. Stanno utilizzando il metodo window.requestAnimationFrame per ottimizzare le modifiche nella loro pagina in modo che funzioni senza problemi su iPad e nel browser. Ecco una pagina con la descrizione di esso:

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ Il browser in grado di ottimizzare le animazioni concorrenti insieme in un unico reflow e riverniciare ciclo, che porta ad una maggiore fedeltà l'animazione. Per esempio , animazioni basate su JS sincronizzate con transizioni CSS o SVG SMIL. Inoltre, se stai eseguendo il ciclo dell'animazione in una scheda che non è visibile a , il browser non la manterrà in esecuzione, il che significa meno CPU, GPU, e utilizzo della memoria, con conseguente maggiore durata della batteria.

Inoltre, hanno creato un oggetto keyframe personalizzato che deciderà su come tutto è animato nella pagina. Sto sbavando su questo set up. Peccato che non sia un framework aperto. Puoi impostare dove inizia l'effetto, dove finisce, l'andamento, ecc. Solo nell'oggetto keyframe, e il loro framework gestirà tutto il resto attraverso il ciclo dell'animazione.

{ 
    selector: '#outro2 > .content2', 
    startAt: outroStart+500, 
    endAt: outroStart+1000, 
    onEndAnimate:function(anim) {}, 
    keyframes: [ 
     { 
      position: 0, 
      properties: { 
       "margin-top": 650 
      } 

     }, 
     { 
      position: 1, 
      ease: TWEEN.Easing.Sinusoidal.EaseOut, 
      properties: { 
       "margin-top": 650 
      } 
     } 
    ] 
}, 

In sintesi, ritengo la combinazione di scorrimento attuato personalizzato, e un ciclo di animazione personalizzato utilizzando il metodo requestAnimationFrame ottenere oltre il limite di parallasse normalmente associati con i dispositivi iOS.

Answer 5

Mark Dalgleish che ha sviluppato stellar.js ha spiegato molto bene how to achieve this using iScroll.js to simulate an iOS scroll (video di YouTube).

Answer 6

Ho recentemente controllato fuori Skrollr: http://prinzhorn.github.com/skrollr/

L'esempio funziona alla grande su iOS e desktop!

Answer 7

Ho trovato questo sito con un articolo sulla parallasse che funziona benissimo in iOS. Ma questo supporta solo il dispositivo touch. Sarà fantastico se qualcuno si unirà per farlo funzionare su entrambi i dispositivi desktop e ios. http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/

Answer 8

Dai un'occhiata a questo sito: http://www.shindiristudio.com/demo/?item=Portal_Wordpress

Essa può dare qualche informazione su come è fatto.

Answer 9

One Million Square Feet of Culture funziona come un fascino su Windows Phone, Windows con touch screen, desktop scroll standard, Android e iOS.

Hanno una versione personalizzata di questo parallax scrolling library