Meine Frage bezieht sich auf eine Antwort des Benutzers ByteHamster hier: Wie erstelle ich JavaScript / HTML5 Spinner Liste mit Bildern? in der Antwort gibt er ein Beispiel, wie man eine scrollende Animation mit HTML, CSS und Javascript erstellt. Die Animation ermöglicht dem Benutzer, durch die Nummern zu blättern, indem er über oder unter der ausgewählten Nummer auf dem Bildschirm klickt, und die ausgewählte Nummer wird in einem Div unter der Animation angezeigt.
Ich habe mich gefragt, ob es möglich ist, etwas Ähnliches zu tun, aber anstatt ein Bild auf und ab zu bewegen, kann es in ein Zahlenrad verwandelt werden? Damit meine ich, dass im obigen Beispiel das Scrollen in einer Richtung stoppt, sobald die Zahl 0 erreicht. Ich frage mich, ob es möglich ist, ein Rad zu erstellen, wo ein Benutzer es ständig von oben nach unten oder von unten nach oben drehen kann wenn sie es wollten. Würde dies die Verwendung von 3D interaktiver Animationssoftware erfordern?
Ich habe diese Frage gesehen: HTML5 / CSS3 - wie man "endlosen" rotierenden Hintergrund - 360 Grad Panorama macht, aber ich bin unsicher, ob die Antworten auf mein Projekt anwendbar sind, da sie nicht interaktiv scheinen.
Da die Antwort von ByteHamster über 3 Jahre alt ist, habe ich mich gefragt, ob es eine bessere Möglichkeit gibt, diesen Effekt mit einer HTML5-Animation zu erzielen? Und habe ich recht, dass das Javascript im Beispiel es auf einigen Geräten / Browsern, die Javascript nicht aktiviert haben, nicht funktioniert? Wäre ein HTML5-Ansatz der beste Weg, um sicherzustellen, dass der Effekt auf den meisten Geräten / Browsern funktioniert?
Hier ist, was ich aus den bereitgestellten Informationen zusammengestellt habe ... funktioniert mit dem Mausrad, wischen und klicken Sie auf die oberen und unteren Zahlen. Unendlich wie gewünscht natürlich. Kein besonderer perspektivischer Stil (noch), aber ich dachte, es sah ziemlich anständig aus. Könnte natürlich noch eine Option sein. Ich habe das Plugin, mit dem ich verlinkt habe, nicht in den Kommentaren oder requestAnimationFrame verwendet, aber jQuery animate() ist ein ziemlich gutes Werkzeug dafür. Die Bibliothek hat eine großartige Cross-Browser-Unterstützung (das ist ihre Stärke), sie benötigt lediglich einen Link, damit JavaScript ausgeführt werden kann. Sie könnten ein CDN verwenden, diese Version funktioniert auch für IE8-:
Für die beste Cross-Browser-Unterstützung bei der Verwendung des Mausrads wurde dieses Plugin hinzugefügt:
%Vor%Nur ein einfaches Elternteil und Styling mit Spannen für jede Zahl, ein paar vorangestellt im Falle eines Anstiegs.
Ziemlich einfach, animiert die Bildlaufposition nach oben oder unten und hängt dann die erste oder letzte Nummer abhängig von der Richtung an oder vor. Die Dauer der Animation kann hier eingestellt werden:
%Vor% Aktualisiert - nachdem ich einige neue Erkenntnisse erhalten habe, zum Beispiel das Ereignis touchend , das immer auf das ursprüngliche Element feuert, habe ich den Code überholt. Außerdem hat es jetzt einen Sprite-Hintergrund, der proportional zur Größe der Zahlen bleibt. Verbesserte auch die Gesamtlogik und entfernte einen verschachtelten Listener-Glitch.
Ein weiterer Grund für diese Änderung ist das Einfügen einer Demo, die mehrere Ticker erlaubt (und die Nummern voreinstellt). Da ich sogar darüber hinaus gegangen bin (Hinzufügen von Direct-Response-Funktionalität), dachte ich, es wäre eine gute Idee, den minimalen Arbeitscode auch hier zu belassen:
Die Zahlen werden automatisch ausgefüllt, sodass Sie das Markup nicht schreiben müssen. Reagiert auch auf das Ziehen mit der Maus.
Die neueste Entwicklung des Skripts finden Sie hier:
codepen.io/Shikkediel/pen/avVJdG
Endgültiges Update - eine 3D-Version, die transition anstelle von jQuery .animate verwendet. Das Rad besteht aus einzeln gedrehten Elementen um die x-Achse und erzeugt ein im Grunde unendliches Zehneck, ohne dass Elemente vorangestellt oder angehängt werden müssen:
copepen.io/Shikkediel/pen/qpjGyq
Die Cogs sind "flickbar", so dass sie mit der Geschwindigkeit fortschreiten, die der Benutzer ihnen gibt - und dann beim Klicken wieder anhalten. Sie reagieren auch viel schneller auf Mausrad-Ereignisse als die ursprüngliche Demo. Beide Gründe, warum ich Klickereignisse im Gegensatz zu den früheren Skripts weggelassen habe. Die Browser-Unterstützung ist auch ein wenig eingeschränkter, aber trotzdem gut - ich habe extra versucht, IE10 + kompatibel zu machen.
Tags und Links javascript html css animation html5