Heute habe ich die tollste iPad App gesehen, von der mir versichert wurde, dass sie mit html5, css3 und Javascript geschrieben wurde ... der beste Teil der App war, dass sie perfekt eine Parallax Scroll erstellt haben ... Meine Frage ist ... wie ? ... Ich kann keine Dokumentation darüber finden, dass es möglich ist, auf iOS-Geräten eine Parallax-Schriftrolle zu erstellen ... wenn mir jemand einen Link oder Ratschläge dazu geben könnte, was am meisten geschätzt würde ... irgendjemand? ... liebe Grüße J
Wir haben kürzlich eine Website veröffentlicht, die Parallax Scrolling auf dem iPad durchführt. Es gibt ein bisschen eine Erklärung, und ein Video davon wird hier verwendet: Ссылка
und die Seite selbst, wenn Sie ein iPad zum Spielen haben:
Dafür haben wir einen JavaScript-Bibliothekscode geschrieben, den wir in naher Zukunft auf Open-Source-Basis suchen.
Die Grundidee besteht darin, einen Scroll-Container zu schreiben, der Berührungseingabe akzeptiert und Ihre x- und y-Positionen (wenn Sie zwei Dimensionen benötigen) Ihres Inhalts verfolgt. Um dies parallaxefähig zu machen, haben wir den besten Weg gefunden, die Delegierung zu einem Controller zu verwenden. Ich kann mich nicht an die genaue Syntax erinnern, die wir ohne
verwendet haben %Vor%Dann in der Steuerung, etwas in der Art:
%Vor%Dieses Delegiertenmuster wird stark von UIKit beeinflusst, da es meiner Ansicht nach eine sauberere Möglichkeit bietet, unterschiedliche Teile eines Systems über die Ereignisse eines anderen zu informieren. Ich finde, zu viel Event-Dispatching wird schwer zu pflegen, aber das ist Anthere Geschichte insgesamt.
Hoffe, das hilft ein bisschen.
Diese Seite zeigt ein ziemlich gutes Beispiel dafür, wie Parallax-Stil-Effekte auf die iOs wirken können Ссылка
Sie simulieren das Scrollen abhängig von der Art der Eingabe, die Sie geben. Sie scrollen nicht wirklich durch die Seite und animieren dann die verschiedenen Eigenschaften. Es liest die Berührungsereignisse, das Mausrad oder die eigene benutzerdefinierte Bildlaufleiste und sieht, wie viel Sie scrollen möchten. Der gesamte Inhalt der Seite befindet sich in einem Container. Wenn du ein Touch-Event machst, liest es nur, wie viel du auf der Seite bewegst.
Darüber hinaus verwenden sie eine Animationsschleife, um alles zu bewegen. Sie verwenden die window.requestAnimationFrame-Methode, um die Änderungen auf ihrer Seite zu optimieren, damit sie auf dem iPad und im Browser reibungslos funktioniert. Hier ist eine Seite mit einer Beschreibung davon:
Ссылка Der Browser kann gleichzeitige Animationen zusammen in einem einzigen optimieren Reflow- und Repaint-Zyklus, was zu einer höheren Wiedergabetreue führt. Zum Beispiel: JS-basierte Animationen, die mit CSS-Übergängen oder SVG synchronisiert sind SMIL. Außerdem, wenn Sie die Animationsschleife in einer Registerkarte ausführen, die dies nicht ist sichtbar, der Browser wird es nicht weiter laufen lassen, was weniger CPU, GPU, und Speicherverbrauch, was zu einer viel längeren Akkulaufzeit führt.
Außerdem haben sie ein benutzerdefiniertes Keyframe-Objekt erstellt, das darüber entscheidet, wie alles auf der Seite animiert wird. Ich sabbere über diese Einrichtung. Schade, es ist kein offener Rahmen. Sie können festlegen, wo der Effekt beginnt, wo er endet, die Beschleunigung usw. nur im Keyframe-Objekt, und sein Framework behandelt den gesamten Rest durch die Animationsschleife.
%Vor%Zusammenfassend glaube ich, dass die Kombination aus benutzerdefiniertem Scrollen und einer benutzerdefinierten Animationsschleife, die die Methode requestAnimationFrame verwendet, über die Parallaxenbeschränkung hinausgeht, die normalerweise mit iOS-Geräten verbunden ist.
Ich habe kürzlich Skrollr: Ссылка
überprüftDas Beispiel funktioniert hervorragend auf iOS und Desktop!
Mark Dalgleish, der stellar.js entwickelte, erklärte sehr gut Wie erreiche ich dies mithilfe von iScroll.js, um einen iOS-Bildlauf zu simulieren (YouTube-Video).
Ich bin auch dabei, dies zu tun. Schau dir stellar.js von Mark Dalgeish an. Es funktioniert wunderbar in den meisten Situationen. Wenn jemand andere Links oder Informationen hat, wäre es großartig zu hören.
Es verwendet Scrollbarkeit. Ich hoffe, dass Scrollarama auf einem iPad funktioniert, ähnlich wie stellar.js. Nun, das ist der Traum!
Hoffe das hilft bei der Suche.
Ich habe auf dieser Seite einen Artikel über Parallaxe gefunden, der großartig in ios funktioniert. Aber das unterstützt nur Touch-Gerät. Dies wird großartig sein, wenn jemand zusammenarbeitet, damit es sowohl auf dem Desktop als auch auf dem iOS-Gerät funktioniert. Ссылка
Im Moment ist das auf iOS-Geräten nicht möglich. iOS-Geräte frieren die DOM-Manipulation während des Bildlaufs ein und stellen sie in eine Warteschlange, damit sie beim Abschluss des Bildlaufs angewendet werden. so erhalten Sie bestenfalls klobige Animationen. nicht stören.
Eine Million Quadratmeter Kultur funktioniert wie ein Zauber auf Windows Phone, Windows mit Touchscreen, Standard-Scroll-Desktop , Android und iOS.
Sie haben eine benutzerdefinierte Version dieser Parallax Scroll-Bibliothek