In meinem vorherigen Tutorial habe ich Ihnen gezeigt, wie Sie mit CSS 3D-Transformationen ein isometrisches Rasterlayout erstellen. Es war ziemlich herausfordernd, da einige Browser wie Firefox etwas unterschiedliche Ansätze haben, wie sie Elemente auf einer dreidimensionalen Ebene rendern.
In diesem Lernprogramm werden 3D-Transformationen weiter erforscht, indem ein 3D-Parallax-Rollover-Effekt erstellt wird, der von der Benutzeroberfläche von Apple TV inspiriert ist. Wir werden Envato Elements weiterhin als Inspiration für unsere Inhalte verwenden. Hier arbeiten wir an:
Bewegen Sie den Mauszeiger über das Miniaturbild und bewegen Sie den Mauszeiger. Die Miniaturansicht lehnt sich an die Cursorposition und die Bewegungsrichtung an.
Perspektive: eine Grundierung
Als Menschen ist unsere Sicht bis zum verschwindenden Horizont begrenzt, und unser binokulares Sehen schafft das, was wir als wahrnehmen Perspektive. Die Perspektive hilft uns, ein Objekt als weiter entfernt zu interpretieren, anstatt es einfach zu verkleinern.
Das isometrische Raster aus dem vorherigen Tutorial berücksichtigt nicht die "Perspektive". Die Rastergröße (Höhe und Breite) wird tatsächlich beibehalten. In Wirklichkeit sollten wir sehen, dass die äußerste Seite des Gitters aufgrund der Perspektive schrumpft.
In CSS können Sie der 3D-Transformation eine Perspektive hinzufügen Perspektive() Funktion. Das ist es wert, darauf hingewiesen zu werden Perspektive() muss vor anderen Transformationsfunktionen wie z drehen() und Übersetzen() damit es wirksam wird. Es erfordert auch einen Wert, der den Sichtabstand relativ zum Element definiert. ob das Element aus der Ferne oder aus der Nähe betrachtet werden soll.
So rendern wir eine 3D-Ebene mit CSS. Nun wollen wir sehen, wie wir dies anwenden können, um eine Parallaxe-Effekt. Wir fangen mit dem HTML an:
Das HTML-Markup
Wenn Sie unserem vorherigen Tutorial genau gefolgt sind, werden Sie feststellen, dass das HTML-Markup sehr ähnlich ist. Hier haben wir eine div mit einer Klasse von ItemCard Umbenennung des Namens, des Bildes und des Links, der auf eines der Elemente in Envato Elements zeigt.
Schriftarten
Herbert Lemuel
August10
Fügen Sie das obige HTML-Markup von oben nach unten hinzu.
Das CSS
Wir beginnen mit dem Hinzufügen einiger Reset-Stile, die in diesem Fall die Größenanpassung des Elements auf setzen Border-Box, entferne das Zahl Elementrand und machen das Bild flüssig.
html Box-Sizing: Border-Box; *, *: before, *: after Box-Sizing: erben; Zahl Marge: 0; img max-width: 100%; Höhe: Auto;
Nachdem dies erledigt ist, fügen wir der Version einige Stile hinzu ItemCard. Jenseits der ästhetischen Regeln wie Grenzradius und Box Schatten, Wir definieren das Element Übergang und Transformation einschließlich der Perspektive() Funktion.
Für weitere Informationen zu was Kubik-Bezier () Hier ist der Kurs von Guy Routledge:
Cubic Bezier-Funktionen in unserem Coffee Break-Kurs
Eine Möglichkeit, der Animation im Web ein bisschen mehr Leben und etwas mehr Persönlichkeit einzuhauchen, ist das Experimentieren mit verschiedenen Einstellungen der Beschleunigung. In diesem Kaffee…
Metastile
Als nächstes fügen wir Stile hinzu ItemCard untergeordnete Elemente; den Artikelnamen, den Namen des Artikelautors und den Elementtyp. In ähnlicher Weise definieren die Stile Sichtbarkeit, Position, Größe, Übergänge und Transformationen dieser Elemente.
Fügen Sie die folgenden Stile hinzu, um die untergeordneten Elemente von zu erstellen ItemCard und das .ItemCard__summary entspricht der dreidimensionalen Darstellung.
/ ** * 3D-Elemente für die Nachkommen erhalten * / .ItemCard, .ItemCard__summary transform-style: preserve-3d; Sicht nach hinten: versteckt;
Schweben
Das ItemCard Hover-Statusstile definieren die Box Schatten auch die Z Achse einiger untergeordneter Elemente:
An diesem Punkt haben Sie etwas, das dem folgenden ähnelt:
Anfangsstile und Hover-Statusstile
Parallax-Effekt mit jQuery
Wir werden hier etwas jQuery nutzen, stellen Sie also sicher, dass Sie irgendwo in Ihrem Dokument auf jQuery verweisen. Fügen Sie in CodePen https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js als externen JavaScript-Pfad hinzu.
Der Parallax-Effekt wird durch zwei jQuery-Events angewendet mousemove und Mouseout. Das mousemove Das Ereignis wird ausgelöst, wenn sich der Cursor über dem Zielelement befindet. in diesem Fall,.ItemCard. Das Mouseout Wird ausgelöst, wenn sich der Mauszeiger bereits außerhalb des Zielelements befindet.
$ (document) .on ("mousemove", ".ItemCard", function (Ereignis) ) .on ("mouseout", ".ItemCard", function () );
Während der mousemove In diesem Fall rufen wir die Koordinaten des Mauszeigers ab, bestimmen die ItemCard Rotation, und wenden Sie diese Zahlen an, indem Sie Inline-Stile hinzufügen. Während der Mouseout Bei diesem Event entfernen wir den Inline-Stil, so dass die ItemCard kehrt in seine Ausgangsposition zurück.
$ (document) .on ("mousemove", ".ItemCard", Funktion (Ereignis) / ** * Die Hälfte der 'ItemCard'-Breite * @type integer * / var halfW = (this.clientWidth / 2) ; / ** * Hälfte der 'ItemCard'-Höhe * @type Ganzzahl * / var halfH = (this.clientHeight / 2); / ** * Mauszeiger X-Koordinate * @type Ganzzahl * / var coorX = (halfW - (event.pageX - this.offsetLeft)); / ** * Y-Koordinate des Mauszeigers * @type integer * / var coorY = (halfH - (event.pageY - this.offsetTop)); / ** * X Rotationsgrad von 'ItemCard' * @type integer * / var degX = ((coorY / halfH) * 10) + 'deg'; // maximaler Grad = 10 / ** * Y Rotationsgrad von 'ItemCard '* @type integer * / var degY = ((coorX / halfW) * -10) +' deg '; // maximaler Grad = 10 / ** * Fügen Sie die Inline-Styles * / $ (this) .css hinzu ('transform', function () return 'perspektive (600px) translate3d (0, -2px, 0) Maßstab (1.1) rotateX (' + degX + ') rotateY (' + degY + ')';) .children ('.ItemCard__summary') .css ('transform', function () return 'Perspektive (600px) translate3d (0, 0, 0) drehenX ('+ degX +') drehenY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", function () / ** * Entfernen Sie die Inline-Styles * / $ (this) .removeAttr ('style') .children ('.ItemCard__summary') .removeAttr ( 'style'););
Und das ist ein Wrap.
Einpacken
In diesem Tutorial haben wir gelernt, wie Sie mit 3D-Transformationen einen von Apple TV inspirierten 3D-Parallaxe-Effekt erstellen können.
Denken Sie daran, dass dieser Effekt auf berührungsfähigen Geräten nicht gut funktioniert. Daher müssen Sie eine Art Rückfall in Betracht ziehen, möglicherweise mit Touch-Ereignissen, um den Parallaxe-Effekt zu replizieren. Ich werde das auf den Tisch legen, damit Sie es in Angriff nehmen können!
Accentsconagua
Share
Schriftarten
Anfangsstile und Hover-Statusstile
