Comment construire la parallaxe défilement sur un appareil iOS

Ce site montre un assez bon exemple de la façon dont la parallaxe des effets de style peut travailler sur l'iOs https://victoriabeckham.landrover.com/INT

Ils simulent le défilement selon le type d'entrée que vous donnez. Vous n'êtes pas en train de faire défiler la page, puis d'animer les différentes propriétés. C'est à lire dans le tactile, molette de la souris, ou de leurs habitudes de boulangerie barre de défilement et de voir combien vous êtes désireux de les faire défiler. Tout le contenu de la page est dans un récipient. De cette façon, lorsque vous faites un événement tactile, c'est juste de la lecture de la façon dont beaucoup vous déplacer sur la page.

Sur le dessus de qui ils sont à l'aide d'une boucle d'animation pour tout faire bouger. Ils sont en utilisant la fenêtre.requestAnimationFrame méthode afin d'optimiser les changements dans leur page de sorte qu'il fonctionne sur l'iPad et dans le navigateur. Voici une page avec une description de celui-ci:

http://paulirish.com/2011/requestanimationframe-for-smart-animating/
Le navigateur peut optimiser les animations simultanées en un seul
redistribution et repeindre cycle, conduisant à une plus grande fidélité de l'animation. Pour
exemple, JS animations synchronisées avec les transitions CSS et SVG
SMIL. De Plus, si vous êtes en cours d'exécution de la boucle d'animation dans un onglet qui n'est pas
visible, le navigateur ne sera pas le garder en cours d'exécution, ce qui signifie moins de CPU, GPU,
et l'utilisation de la mémoire, conduisant à beaucoup plus de vie de la batterie.

En plus de cela, ils ont construit une image-clé personnalisé objet qui décidera de la manière dont le tout est animé sur la page. Je suis baver sur ce jeu. Dommage qu'il n'est pas un cadre ouvert. Vous pouvez définir l'endroit où l'effet commence, où elle se termine, l'assouplissement, etc. juste dans l'image-clé de l'objet, et leur structure se chargera de tout le reste au travers de la boucle d'animation.

{
    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
            }
        }
    ]
},

En résumé, je crois que la combinaison personnalisée de mise en œuvre de défilement, et une animation personnalisée boucle à l'aide de la requestAnimationFrame méthode get au-delà de la parallaxe limitation normalement associés avec les appareils iOS.

OriginalL'auteur Greg Tatum

Marque Dalgleish, qui a développé stellar.js explique vraiment bien comment obtenir cette aide iScroll.js pour simuler un iOS de défilement (vidéo YouTube).

OriginalL'auteur Khoa

J'ai trouvé ce site un article sur la parallaxe que l'excellent travail dans ios. Mais, qui ne supportent que la touche de l'appareil. Ce sera formidable si quelqu'un se combinent pour le faire fonctionner sur des ordinateurs de bureau et les appareils sous ios. http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/

OriginalL'auteur user2985924

à l'heure actuelle, il n'est pas possible sur les appareils iOS. les appareils iOS gel de manipulation du DOM au cours de défilement, de file d'attente à appliquer quand le livre se termine. vous aurez donc chunky animations au mieux. ne vous embêtez pas.

OriginalL'auteur deweydb