Nicht, dass ich davon weiß. Der "Genie" -Effekt ist eine Verzerrung, die mit CSS nicht erreicht werden kann: CSS-Transformationen (einschließlich des Matrixfilters von IE) ermöglichen eine Größenanpassung auf beiden Achsen, Rotation und Scherung. WebKit gibt Ihnen zusätzlich lineare Perspektiven. Kurvige Verzerrungen wie Genie können mit diesen Werkzeugen nicht reproduziert werden.
Um dies in JavaScript zu tun, müssten Sie das Bild (oder ein anderes Element, wenn Sie wirklich ambitioniert sind) in eine Zeile pro Pixel aufteilen und horizontal mit einer CSS-Transformation komprimieren. Es wäre schrecklich ineffizient zu rendern und würde wahrscheinlich ruckartig und flickerig aussehen und auch unangenehm aliased.
Ich habe es geschafft, diesen Effekt mit JS + CSS zu reproduzieren ... es ist noch nicht fertig, aber hier ist eine Vorschau der Animation in Aktion:
Von Hakans Implementierung inspiriert, schrieb ich meine Version der Genie Effect-Überblendungsbibliothek.
Sehen Sie sich Ссылка
anund Ссылка für eine Demo.
Es funktioniert in jedem Browser einschließlich mobil (nicht immer reibungslos auf Firefox). Es unterstützt Genie Effect Übergänge in jeder Richtung (oben, unten, links, rechts). Es funktioniert auch, wenn das HTML-Zielelement ein Kind eines Containers ist, der automatisch oder versteckt überläuft. Es ist Bibliothek Agnostiker selbst, aber ich habe auch ein Convenience-jQuery-Plugin geschrieben. Und wenn Sie auch die html2canvas-Bibliothek in Ihr Projekt einbinden, können Sie mit dem Plugin HTML-Elemente mit Genie-Effekt animieren (ausführliches Beispiel hier: Ссылка <) / a>)
Die einzige Voraussetzung für den Browser ist, dass er CSS-Übergänge unterstützen muss. Es ist eine reine Javascript + CSS Lösung.
Es kann mit reiner CSS-Transformation gemacht werden, ist aber viel einfacher mit SASS. Die allgemeine Idee ist, dass Sie ein Rechteck glatt in ein Dreieck umwandeln möchten (so dass es halbwegs trapezförmig ist). Das Problem dabei ist, dass jede lineare Transformation ein Rechteck in ein Parallelogramm verwandelt (ein Viereck mit allen Seiten parallel) und wir ein Dreieck wollen. Dies bedeutet, dass wir eine nichtlineare Transformation benötigen. Die gute Nachricht ist, dass Sie nichtlineare Transformationen durchführen können, indem Sie vorgeben, dass dies Transformationen in 3D sind, und dann das Rechteck in den 2D-Bildschirmbereich projizieren. Denken Sie an einen loooong Bürgersteig - es sieht wie ein Dreieck aus. Also wollen wir das Rechteck drehen und es sehr lang machen.
Die Transformationen für den ersten und letzten Keyframe der Animation sind sehr einfach: Der erste hat eine Identitätstransformation und der letzte hat
%Vor%die einzige interessante Spalte ist die letzte, die besagt, dass die Entfernung vom Betrachter 10 "für Pixel in der obersten Zeile und unten 10-9 = 1 für die untersten Pixel sein sollte.
Das Problem liegt bei Zwischenbildern, da der von Browsern verwendete Standard-Interpolationsalgorithmus versucht, Matrizen als Zusammensetzung elementarer Operationen wie Rotationen und Übersetzungen zu interpretieren und dann jede Operation unabhängig voneinander zu interpolieren. Und da unsere letzte Transformation Rotation um 90 in Kombination mit unendlicher Dehnung ähnelt, wird Interpolation versuchen, Rotation und Dehnung gleichzeitig durchzuführen, was irgendwie seltsam aussieht, da eine dieser Bewegungen "kreisförmig" ist, während die andere "linear" und die Geschwindigkeit der Zwei stimmen nicht überein.
Um dies auszugleichen, kann man viele Zwischenbilder erzeugen und dafür benutze ich SASS. Das Endergebnis ist hier: Ссылка
Und das meiste Lob für diese Lösung sollte an den Autor Ссылка gehen, der mich überzeugt hat, dass dies möglich ist. Beachten Sie auch, dass es möglicherweise viele verschiedene Transformationen gibt, die ein gegebenes Rechteck in ein gegebenes Dreieck transformieren, die sich nur in der Art unterscheiden, in der ihre Innenräume abgebildet werden - vielleicht ist meine Lösung nicht die beste in dieser Hinsicht.
Tags und Links javascript language-agnostic jquery animation