Parallax erklärt: Lerne, interaktive Webseiten mit JavaScript zu erstellen

1. Gründe für diesen Kurs: Parallax ist genial 3D-Effekt, den Sie in Tonnen von Websites, Spielen und Apps sehen können. Es ist eine Interaktionsfreude und es zieht Menschen wie verrückt an. In dieser Klasse werde ich Ihnen zeigen, wie Sie Ihre eigene Parallax-Erfahrung mit JavaScript codieren können. Es mag wie Voodoo und dunkle Magie erscheinen, aber es ist eigentlich ziemlich einfach und sehr lohnend. Mein Name ist Rich Armstrong und ich mache die Dinge seit 2006 mit Code bewegen. In dieser Klasse gehen wir Schritt für Schritt durch geweihte Parallaxe erlebt durch Reaktion auf die Mausbewegung und Dokumente scrollen Ereignisse. Der Kurs ist vollgepackt mit theoretischen und praktischen Videos und am Ende werden Sie in der Lage sein, Ihre Freunde zu überraschen und Leben und Magie in Ihre Web-Projekte zu bringen. Ich entwerfe die Klasse für jemanden, der sich zurechtfindet, HTML, CSS und JavaScript. Stark daran interessiert, einige Parallaxen-Interaktionen zu erzeugen. Wir sehen uns im nächsten Video. 2. Parallax erklärt: Also, was genau ist der Parallaxe-Effekt? Wenn Sie diesen Begriff bereits gehört haben, was in den Sinn kommen kann, ist eine Website, die Dinge bewegen sich mit unterschiedlichen Geschwindigkeiten, während Sie scrollen. Dies ist ein guter Ausgangspunkt. Der Parallax-Effekt ist wirklich eine Illusion der Tiefe, die auftritt, wenn sich zwei oder mehr Objekte mit unterschiedlichen, aber verwandten Geschwindigkeiten bewegen, so dass wir glauben, dass es einen Abstand zwischen ihnen gibt, dass es Tiefe gibt. Ein Wörterbuch definiert Parallaxe als scheinbare Verschiebung eines beobachteten Objekts aufgrund der Veränderung der Position des Beobachters. Ich fügte die Betonung hinzu. Im wirklichen Leben, wenn wir uns bewegen, scheint sich alles um uns herum zu bewegen und alles mit unterschiedlichen Geschwindigkeiten. Denken Sie darüber nach, wenn Sie aus einem Fenster und einem Auto oder einem Zug schauen, oder sogar Ihren Kopf bewegen oder herumlaufen, können Sie sehen, wie sich die Dinge um Sie herum bewegen? Sie werden sehen, dass sich die Dinge, die weiter entfernt sind einer langsameren Geschwindigkeit bewegen und die Dinge, die näher sind. Natürlich sind wir es, die sich bewegen. Das mag Ihnen ziemlich offensichtlich erscheinen. Die Frage ist also, wie können wir das in einer digitalen Welt replizieren, wenn unsere Bildschirme tatsächlich flach ohne Tiefe sind? Nun, wir müssen eine Illusion der Tiefe schaffen. Wir müssen die Menschen glauben lassen, dass es Tiefe gibt, wo es keine gibt. Wir werden Illusionisten und Zauberer sein. Das ist ziemlich cool, oder? Um die Parallaxen-Illusion auf einfache Weise zu erzeugen. Wir könnten die Dinge mit unterschiedlichen Geschwindigkeiten bewegen. Das ist, was Animation bietet, aber es hat nichts mit dem Beobachter zu tun. Es wird nicht vom Benutzer gesteuert. Es ist nicht interaktiv. Wo der Parallax-Effekt wirklich lebendig wird, ist, wenn sich die Elemente basierend auf den Bewegungen eines Benutzers bewegen, wie wenn sie scrollen oder wenn sie ihre Maus bewegen oder wenn sie ihr Telefon neigen, und das ist, was wir in diese Klasse. 3. So funktioniert dieser Kurs: Es gibt zwei Teile in dieser Klasse, wirklich. Die parallaxe Seite der Dinge und die codierende Seite der Dinge. Wir werden diese beiden Welten zusammen zerquetschen. Sie können diese Klasse nehmen und sie auf jede Programmiersprache anwenden, die Sie mögen, aber wir werden es in HTML, CSS und JavaScript tun. - Warum? Weil es super zugänglich ist, es super Spaß, und Sie können einige Dinge wirklich schnell mit ihm machen. Dies bedeutet, dass wir viele HTML-, CSS- und JavaScript-Themen abdecken und wie sie miteinander in Beziehung stehen, was für das Interaktionsdesign im Web von grundlegender Bedeutung ist. In dieser Klasse gibt es drei wichtige Dinge, die wir behandeln werden. Die erste ist, was ich gerne nenne, Eingänge. Wir werden lernen, wie man die Bewegung des Benutzers verfolgt und damit informiert, wie sich unsere Objekte auf unserem Bildschirm bewegen. Die zweite ist, was ich gerne nenne, Ausgänge. Hier lernen wir zu manipulieren, wie sich unsere Objekte auf Basis unserer Eingaben bewegen. Der dritte ist, dass wir über Parallaxe lernen werden, was wir bereits getan haben. Aber wir werden auch lernen, wie man die Ein- und Ausgänge verwendet, um ein interaktives Parallax-Erlebnis zu schaffen . Was wirklich wichtig ist, ist, dass Sie lernen, wie Sie diese Parallax-Erfahrungen basierend auf Theorie machen und nicht nur durch Kopieren von Code. Wir werden alles in dieser Klasse von Hand codieren und wenn Sie es ernst meinen, am besten zu lernen, würde ich vorschlagen, dass Sie Ihren eigenen Code schreiben, während Sie gehen. Ich lerne am besten, indem das Video anhalte, wenn ich versuche, mich mit dem zu befassen, was sie gerade gesagt haben oder wenn ich etwas verstehen will. Schreiben Sie Ihren eigenen Code, probieren Sie Dinge aus, brechen Sie Dinge und probieren Sie sogar Dinge aus, bevor ich zu ihnen komme. Schrei, wenn du nichts verstehst oder wenn du irgendwelche Fragen hast. Ich werde einen Online-Dienst namens CodePen verwenden, um all meine Codierung in dieser Klasse durchzuführen. Ich lehre gerne damit, weil wir das HTML, das CSS und das JavaScript an einem Ort sehen können und die Vorschau neu lädt, wenn ich tippe. Ich empfehle, dass Sie es auch verwenden. Es ist kostenlos, es ist einfach, neue Stifte zu erstellen, von bestehenden abweichen mit der Fork-Funktionalität, und weil es bereits online ist, ist es wirklich einfach zu teilen. Was bedeutet, wenn Sie irgendwelche Probleme haben, können Sie einfach die URL mit mir teilen und es bedeutet auch , dass Sie Ihre tolle Arbeit mit anderen Studenten, mit Ihrer Mutter und mit anderen teilen können . Das einzige, was Sie mit der kostenlosen Version von CodePen nicht tun können, ist das Hochladen von Bildern, aber das kann leicht überwunden werden und ich werde Ihnen zeigen, wie es später in der Klasse geht. Wenn Sie Ihren Code jedoch mit Ihrem Code-Editor auf Ihren Computer schreiben möchten, ist das total cool. Ich würde empfehlen, Sublime Text zu verwenden, es ist meine Favoriten oder Visual Studio Code, es wird von Microsoft gemacht. Ich würde GitHub auch verwenden, um Ihren Code und GitHub Pages für die Freigabe zu sichern . Das ist frei. Wenn Sie eine eigene Website haben, können Sie diese auch dort hochladen. Also lasst uns los, wir werden eine Menge Spaß haben. 4. Input und Output: Was sind Ein- und Ausgänge? Ich möchte Eingaben als Dinge sehen, die verfolgt und reagiert werden können. Dann sehe ich gerne eine Ausgabe als etwas, das wir kontrollieren können. In einer Welt der Codierung hilft es, wenn eine Eingabe einen Bereich hat. Es bedeutet, dass wir es viel einfacher verfolgen und dann entsprechend reagieren können. Denken Sie an ein Ofenzifferblatt. Es hat einen Minimal- und einen Maximalwert oder einen Start- und Endwert. Diese Werte entsprechen einem Temperaturbereich. Mit Code können wir Objekteigenschaften basierend auf einer Eingabe ändern. Diejenigen, die am meisten Spaß und am realistischsten sind, sind diejenigen, die der Benutzer am meisten Kontrolle hat. In dieser Klasse werden wir mit der Maus Position des Benutzers arbeiten und Dokumente scrollen Position, wie unsere Benutzer Eingaben. Dann werden wir die Position des Objekts basierend auf dieser Eingabe ändern. 5. Mausbewegung erfassen: Lasst uns anfangen. Was wir in diesem Video tun werden, ist am Ende mit zwei Eingabewerten, die wir verwenden können, um unsere Ausgangswerte zu verbinden. Sie werden Bruchwerte sein, die die X- und Y-Position der Maus vermitteln. Wir verwenden Bruchwerte, weil es einfacher wird , unsere zukünftigen Ausgabewerte mit zu verbinden. Um einen Bruchwert zu erhalten, müssen wir die aktuelle Position der Maus erhalten und sie mit ihrer maximalen Position vergleichen. Ich arbeite vorerst mit der X-Position, aber das gleiche gilt für die Y-Position. Die maximale Position ist in diesem Fall die Fensterbreite. Alles, was wir tun müssen, ist die aktuelle Mausposition durch die maximale Position zu teilen. Es ist eine ziemlich einfache Berechnung. Dies setzt jedoch voraus, dass wir die Maus vom Anfang des Fensters bis zum Ende des Fensters verfolgen möchten . Was ist, wenn Sie die Mausposition von 100 Pixeln von links bis 200 Pixel von rechts verfolgen möchten? Wie berechnen wir dann den Bruchwert? Lassen Sie uns ein paar Werte aufschreiben. Wir möchten, dass der Bruchwert Null ist, wenn die Position der Maus bei 100 Pixel und der Bruchwert eins sein, wenn die Maus Position ist , ist, dass die Fensterbreite -200 Pixel. Wir müssen den Wert zwischen dem Ende und den Startwerten berechnen. Wir können dies tun, indem wir den Startwert vom Endwert subtrahieren , den wir unseren Eingabebereich aufrufen und dann, wenn wir unsere aktuelle Mausposition erhalten, können wir den Startwert von ihm subtrahieren, um den Startpositionswert zu negieren. Dies bedeutet, dass, wenn die Position unserer Maus 100 Pixel beträgt, sie tatsächlich Null in unserer Berechnung sein wird. Jetzt vergleichen wir diesen Wert mit unserem Bereich, um einen genauen Bruchwert zu erhalten. Mit dieser Berechnung erhalten wir immer den richtigen Bruchwert. Die Berechnung ist jetzt etwas anders als vorher, aber wir können diese Berechnung auch verwenden, wenn wir von der linken Seite des Fensters ganz nach rechts verfolgen wollen . Vielleicht fragen Sie jetzt, was passiert, wenn die Mausposition zwischen Null und 100 Pixel liegt? Welche Art von Bruchwert werden wir dann bekommen? Wir werden negative Werte erhalten, und wenn die Mausposition über den Eingaben Endwert liegt, dann wird der Bruchwert, den wir erhalten, größer als eins sein. Diese Werte werden später wirklich wichtig sein, aber im Moment könnten wir die Bruchwerte auf Werte zwischen Null und eins mit ein wenig Code beschränken . Wenn Sie einen Moment brauchen, um diese Berechnungen zu verdauen, würde ich vorschlagen, das Video hier anzuhalten und einen Stift und Papier zu bekommen und es selbst auszuarbeiten. Es macht einen Unterschied, wenn man es wirklich versteht. Das ist die Input-Theorie. Nun, lassen Sie es uns in Code implementieren. Wir haben bisher kein HTML, und das ist großartig. Wir werden ein wenig gegen Ende des Videos schreiben und ich habe ein bisschen CSS, das ich auf den Körper angewendet habe. Es hat eine Hintergrundfarbe und es hat eine Marge von Null. Wir werden auch nicht zu viel CSS schreiben, also werden wir das vorerst schließen. Lassen Sie uns anfangen, etwas JavaScript zu schreiben. Ich werde eine Variable namens input erstellen, wo ich alle meine Eingabeinformationen einrichten werde und das wird ein Objekt sein und innerhalb dieses Objekts werden wir sagen, es gibt ein MouseX-Objekt und MouseY-Objekt. Dies enthält alle Informationen für MouseX und für MouseY. Ich werde nur in erster Linie mit MouseX arbeiten und dann am Ende des Videos werde ich alles aktualisieren, um mit MouseY zu arbeiten. Wir haben unsere Startposition, wir werden das nur auf Null setzen. Wir haben unsere Endposition, die die Breite unseres Bildschirms oder die Breite unseres Fensters sein wird. Also werde ich window.innerwidth sagen und dann werde ich meinen aktuellen Wert anfänglich auf Null setzen und dann muss ich auch meinen Bereich einfügen, und ich muss meinen Bruchwert eingeben. Ich werde dies außerhalb dieser ersten Einrichtung tun , damit wir es auch später aktualisieren können. Input.mouseX.Range = Input.mouseX.end - Input.mouseX.start. Der Bereich des MouseX ist gleich dem Ende des MouseX minus dem Start des MouseX , der in diesem Fall buchstäblich nur der Endwert ist. Dies sieht sehr ähnlich wie diese anfängliche Berechnung aus, aber wir werden die Start- und Endposition aktualisieren, was den Bereich viel nützlicher macht. Dann können wir unseren Bruchwert berechnen, aber unser Bruchwert wird nicht viel nützen, es sei denn, wir können tatsächlich die aktuelle X- und Y-Position unserer Maus berechnen. Wie machen wir das in JavaScript? Nun, wir haben diese Dinge, die Ereignis-Listener genannt werden, und wir können sie zu einer Reihe von verschiedenen Objekten hinzufügen. Eines der Objekte, zu denen wir einen Ereignis-Listener hinzufügen können, ist das Fenster. Ich werde sagen, window.addEvent-Listener und diese Funktion akzeptiert eine Reihe von verschiedenen Argumenten oder Informationen, die wir daran übergeben können. Das erste, was wir daran weitergeben können, ist die Art von Ereignissen, die wir hören wollen. Ich werde für die Maus bewegen Ereignisse hören und dann, was ich hier übergeben möchte , ist, was zu tun ist, wenn die Maus bewegt Ereignisse auftritt und das ist eine Funktion. Wenn die Maus bewegt Ereignisse eintritt, führen Sie den Code innerhalb dieser Funktion und im Moment schreiben wir einfach console.log und wir werden nur sicherstellen, dass wir alles richtig buchstabieren und wir werden sagen: „Working“. Dann öffnen wir unsere Konsole, die CodePen-Konsole ist, und wir bewegen unsere Maus um und wir sehen, dass die Konsole eine Reihe von funktionierenden Nachrichten hat, die durch kommen. Das bedeutet, dass es funktioniert, was fantastisch ist. Nun, ich möchte dieses Stück Code hier nicht aufhalten , weil dies eine anonyme Funktion ist, es bedeutet, dass wir nicht außerhalb der Mausbewegungsereignisse darauf zugreifen können. Ich könnte das schneiden und ich werde dieses Stück Code in einer Variablen speichern, die Handle Mouse Move genannt wird. Sie können es auch innerhalb einer benannten Funktion speichern. Ich mag es, Dinge innerhalb von Variablen zu speichern. Ich werde es dort einfügen. Das bedeutet, dass ich das kopieren und einfügen kann und das bedeutet, dass, wenn die Maus verschiebt Ereignisse auftritt, was die ganze Zeit passiert, diese Variable aufruft, die dann diesen Code ausführt. Fantastisch. Wenn wir die Konsole löschen und wir bewegen unsere Maus nur um zu überprüfen, dass es in der Tat funktioniert. Nun, das nächste, was wir erreichen müssen, da wir den X-Wert der Maus oder den Y-Wert der Maus erhalten müssen . Wie machen wir das? Nun, in JavaScript erhalten wir dieses Ereignisobjekt, das an unsere Funktion übergeben wird. Du könntest das nennen, was immer du willst. Manche Leute gehen für E, Manche Leute gehen für EV. Wenn du es wirklich wolltest, könntest du es Bob nennen. Ich mag Ereignisse, weil es genau beschrieben hat, was es ist. Anstatt zu protokollieren, zu arbeiten, werde ich mein Ereignis und dann mein Ereignisobjekt protokollieren. Der Grund, warum ich ein Ereignis in der Zeichenfolge habe, ist, dass ich jederzeit genau weiß, was ich protokolliere. Wenn Sie in Ihrem Code eine Reihe von Konsolenprotokollen haben und keinen Indikator dafür haben, was es ist, kann es wirklich verwirrend werden. Lassen Sie unsere Konsole löschen und bewegen Sie die Maus um. CodePen wird sagen, dass das Protokoll übersprungen wurde. Es wird besagt, dass es zu groß für ihre Konsole und Sie stattdessen die Browser-Konsole verwenden müssen. Konsole von CodePen ist nicht so mächtig. Also werden wir müssen Chrome-Konsole stattdessen verwenden. Also gehen wir zu View Developer und dann gehen wir für JavaScript-Konsole und lassen Sie uns einfach unsere Konsole ein wenig nach unten bewegen, so dass wir unsere Maus hier oben bewegen können. Sie werden sehen, dass, wie Sie in der Chrome-Konsole nach unten scrollen, es gibt eine Reihe mehr Ereignisse kommen durch. Mal sehen, was dieses Ereignisobjekt ist. Ist eine Reihe von Schlüsseln und Werten hier. Lassen Sie uns das einfach ein bisschen höher machen, so und wir haben LayerX, Layery, wir haben Client X, Client X. Wir haben auch Offset X Offset Y, PageX, PageY. Alle diese sehen wirklich gut aus X und Y. Wir haben auch eine Reihe von anderen Informationen aber ich bin am meisten interessiert an diesen X- und Y-Werten. Ich möchte, dass Sie sich eines davon aussuchen und sehen, ob es funktioniert. Ich werde für Client X und Client Y gehen, oder vielleicht PageX und PageY. Sie sehen im Moment alle sehr ähnlich aus. Lassen Sie uns dies schließen und lassen Sie uns event.ClientsX protokollieren und stellen Sie sicher, dass es dorthin geht. Löschen Sie hier unsere Konsole und bewegen Sie sich herum und wir bekommen einige Werte, die wirklich vielversprechend aussieht. Wenn Sie also den ganzen Weg nach links gehen, sollten wir eine Null erwarten, was es ist und wenn wir den ganzen Weg nach rechts gehen, sollten wir eine ziemlich große Zahl erwarten, 572. Jetzt können wir überprüfen, ob dies tatsächlich der Wert ist, indem window.innerwidth einfügen, die undefiniert ist, und das liegt daran, dass wir Breite mit einem großen I, 573 geschrieben haben. Das ist ein bisschen verdächtig, findest du nicht? Nun, jetzt werden wir damit arbeiten, es ist ziemlich gut. Jetzt haben wir unsere ClientX, was bedeutet, dass wir tatsächlich gehen und unsere Input.mouseX.current aktualisieren können , was unserer event.clientX entspricht. Es bedeutet, dass wir auch unseren Bruchwert aktualisieren können. Also input.mouseX.fraction gleich. Können Sie sich erinnern, was unsere Berechnung dafür war? Nun, es ist unsere Input.mouseX.Current minus den Startwert. Wir werden das in ein paar Klammern stecken, damit es zuerst funktioniert. Wir werden das dann durch die Input.mouseX.Range teilen. Dies ist ein ziemlich langes Stück Code. Das ist nur, weil wir übermäßig ausführlich darüber sind, sagen wir input.mouseX.current. Das ist nur so, dass ihr wisst, was mit all diesen Werten zu jeder Zeit los ist. Wir haben unseren aktuellen Wert, wir haben unseren Bruchwert. Nun, mal sehen, ob das wirklich funktioniert. Lassen Sie uns unseren Bruchwert und input.mouseX.fraction ausloggen. Lasst uns das ein bisschen größer machen. Wir gehen von links nach rechts. Das ist seltsam, dass es auf 1,36 geht. Was ist hier los? Nun, Sie haben vielleicht gesehen, dass ich die Größe meines Bildschirms etwas geändert habe. Ich hätte immer bei Null angefangen. Aber abhängig von meiner Bildschirmbreite kann es zu einem Wert kommen, der viel größer als eins ist. Was ist eigentlich hier los? Schauen wir uns das an. Wir speichern zunächst unseren Endwert innerhalb unseres Objekts. Es wird nicht aktualisiert, wenn die Größe des Bildschirms oder des Fensters geändert wird. Wir müssen diesen Wert aktualisieren, damit wir einige andere Werte aktualisieren können , damit es uns einen genauen Bruchwert geben kann. Wie machen wir das? Nun, dieses Stück Code hier. Ich werde es kopieren und einfügen. Anstatt auf ein mousemove-Ereignis zu hören, werde ich auf ein resize-Ereignis hören. Anstatt dann die HandleMouseMove-Funktion aufzurufen, rufe ich die handleResize-Funktion auf. Also var HandlereSize und dies wird eine Funktion speichern. Innerhalb dieser Funktion werden wir unseren Code Input.mouseX.end gleich aktualisieren, und es wird genau das gleiche wie unser Anfangswert sein. Da gehen wir. Da unser Endwert aktualisiert wird, müssen wir auch unseren Bereichswert aktualisieren, da er den Endwert nutzt. Das sollte damit umgehen. Mal sehen, ob es funktioniert. Um unsere Konsole zu löschen, gehen Sie von links nach rechts. Es kommt fast zu einem. 0,998, es ist fast eins. Wir werden damit arbeiten. Wenn wir die Größe unseres Browsers 0-99 ändern, funktionieren die Dinge definitiv. Was wir jetzt tun müssen, ist, dass wir überprüfen müssen, dass, wenn unser Startwert bei 100 und einem anderen Wert liegt , dies tatsächlich auch funktioniert. Beginnen wir mit unserem Startwert und dann kommen wir danach zu unserem Endwert. Was ich tun werde, ist, in unserem HTML, werde ich ein div mit einer Klasse von Block erstellen. Ich verwende eine Sache namens Emmet, die in CodePen, Sublime Text und Visual Studio Code funktioniert . Sobald Sie diese Abkürzung haben, drücken Sie einfach „Tab“ und es erweitert sie in einen Code für Sie. Ich habe eine ganze Klasse drin, wenn du es überprüfen willst. In unserem CSS, wo Emmet auch funktioniert, kann ich gehen.block. Ich gebe diesem eine Hintergrundfarbe und gehe dann für eine Farbe, die CodePen hat. Lassen Sie uns für diese grüne Farbe gehen. Kopieren wir es in die Zwischenablage, lassen Sie es uns einfügen. Vielen Dank. Ich werde eine Breite von 100 Pixeln festlegen und dann eine Höhe von 100 Betrachterhöhe einstellen. Jetzt haben wir diese tolle kleine grüne Bar. Das werden 100 Pixel sein. Wenn wir das löschen, werden wir wissen, dass, wenn wir auf 100 Pixel kommen, was ungefähr dort ist, es Null sein sollte wie es aussieht. Jetzt müssen wir unser Ende auf die InnerWidth minus 200 setzen. Vergessen Sie nicht, dass wir dies auch einfach kopieren und unten einfügen können , wo wir unseren Endwert aktualisieren. Ziemlich wichtig. Lassen Sie uns einfach diesen Block Code kopieren und einfügen, nennen wir es block2. Innerhalb unseres CSS werden wir so ziemlich dasselbe für block2 tun. Wir geben ihm diesmal eine Breite von 200 Pixeln, eine Höhe von 100 Betrachterhöhe. Wir sagen Position absolut, und wir werden sagen, richtig, geben Sie ihm einen Wert von Null und einen Spitzenwert von Null auch. heißt, es ist auf der rechten Seite. Wenn wir hierher gehen, sollte es Null sein. Wenn wir hierher gehen, sollte es eins sein, was es ist. Wenn wir über eins gehen, wird es ein Wert über eins sein. Wenn wir unter Null gehen, wird es ein Wert unter Null sein. Da gehen wir. Das ist genau das, was wir von diesem Video wollten. Ich werde Ihnen noch zwei Dinge zeigen. Das erste ist, dass, wenn wir nicht wollen, dass unsere Werte unter Null und über eins gehen, was wir hier tun können, wir können sagen. Wenn Input.mousex.Fraction größer als eins ist, dann werden wir es einfach auf eins schließen. Wenn unser Wert kleiner als Null ist, werden wir ihn auch einfach auf Null schließen. So wie so. Dann melden wir uns unseren Bruchwert ab, nachdem wir diese beiden Dinge genagelt haben. Wenn wir von links nach rechts gehen, ist es Null, Null, Null, Null, Null, Null, Null. Dann beginnt es zu arbeiten, kommt zu einem, und dann bleibt es einfach bei einem. Das ist ein einfacher Weg, um sicherzustellen, dass unsere Werte von 0-1 reichen. Aber diese negativen Werte und Werte, die höher als eins sind, werden in einem späteren Video wirklich wichtig sein. Nun, die nächste Sache ist, dass wir unseren Y-Wert haben, um herauszufinden. Was ich hier tun werde, ist, ich werde sagen, pausieren Sie das Video und Sie versuchen, Ihre Y-Werte auszuarbeiten. Viel Spaß, machen Sie ein paar Experimente. Ich werde in wenigen Sekunden auf meinen Y-Wert kommen. Lasst uns unseren Y-Wert machen. Ich werde meinen Start wieder auf Null und mein Ende zu innerWidth ändern. Ich werde hier runter gehen und dasselbe tun. Dann nehme ich meine beiden Blöcke raus, weil ich sie nicht wirklich will. Ich werde zu meinem HTML gehen und diese beiden Blöcke auch herausnehmen. Jetzt gehen wir für unsere Y-Werte. Ich kann hier nur ein paar verschiedene Sachen kopieren und einfügen. Anstatt für window.innerWidth zu gehen, werde ich für window.innerHeight gehen. Dann werde ich mein MouseY Sortiment einrichten, mein MouseY Ende und meinen MouseY Start. Wenn ich sage, handle the mousemove, werde ich dies kopieren und einfügen. Wir kopieren und fügen die MouseY einfach an all diese verschiedenen Orte ein. Es ist alles so ziemlich die gleiche Berechnung, der gleiche Algorithmus, wir ändern nur Werte. Anstelle der Veranstaltung von ClientX werde ich für die clientY gehen. Wir müssen das nicht benutzen, wenn wir es nicht wollen. Ich werde sie nur auskommentieren. Ich werde drücken „Befehl“ oder „Control“, und „Slash“ Ich werde diese einfach auskommentieren. Wir können den Bruchteil X und den Bruchteil Y protokollieren, und wir werden dies in MouseY ändern. Wenn wir dann mit unserer Größenänderung umgehen, kopieren und fügen wir dies erneut ein, kopieren und fügen dann unsere MouseY ein und ändern unsere InnerWidth in innerHeight. Dies sollte technisch funktionieren, also lassen Sie uns überprüfen, ob dies der Fall ist. Wir gehen den ganzen Weg oben links, sollte ziemlich nahe an 0,0 sein. Dann gehen wir den ganzen Weg nach rechts, was ziemlich nahe an einem für den x-Wert sein sollte, und dann überprüfen wir, ob unser y funktioniert. Ich werde den ganzen Weg nach oben gehen. Da gehen wir, Null den ganzen Weg nach unten, was uns fast eine gibt. Aber aus einigen Gründen mit diesem Browser, es gibt uns nicht ganz einen Wert von eins. Da gehen wir, wir haben Bruchwerte für unsere X- und Y-Mausposition. Dies bedeutet, dass wir einige Ausgabewerte im nächsten Video anschließen können. Fantastisch. 6. Mausbewegung mit dem Output verbinden: In diesem Video verbinden wir unsere Eingabefraktionswerte, die wir im vorherigen Video berechnet haben , mit einigen Ausgabewerten. bedeutet, dass wir anfangen, Dinge bewegen, basierend auf unserer Mausposition, was super cool ist. Unser Output-Setup wird unserem Eingabe-Setup ziemlich ähnlich aussehen. Es wird einen Start- und Endwert sowie einen Bereich geben. Um den aktuellen Ausgabewert zu ermitteln, nehmen wir den Bruchwert aus unserer Eingabe und multiplizieren ihn mit dem Ausgabebereich, bevor wir ihn zum Aktienwert addieren. Oder wir könnten diesen Wert nehmen und ihn vom Endwert subtrahieren , je nachdem, was Sie damit machen möchten. Nun, das ist die Theorie, lasst uns in einen Code eingehen. Wir werden jetzt etwas Spaß haben und ein paar Googley-Augen bewegen, wenn sich unsere Maus bewegt. Es wird großartig. In meinem HTML, werde ich zwei Augen erstellen. Also gehen wir für das Auge und die innere Pupille, so und dann in meinem CSS, werde ich for.eye gehen. Ich werde eine Hintergrundfarbe von Weiß und dann eine Breite von sagen wir, 200 Pixel, eine Höhe von 200 Pixel, einen Grenzradius von 50 Prozent festlegen 200 Pixel, eine Höhe von 200 Pixel, , weil wir wollen, dass es rund ist. Ja. Dann eine Pause A für absolute, und dann sagen wir eine Linke von 50 Prozent. Nun, danke. Lass uns das retten. Links von 50 Prozent und sie sagen wir einen Rand links von sagen, minus 100 Pixel, nur das ist rechts in der Mitte und dann können wir das gleiche für die Spitze von 50 Prozent und ein Rand oben von minus 100 Pixel sagen ist auch dort rechts in der Mitte. Wir setzen.pupil hier ein, und wir sagen, VGC ist schwarz, wir sagen, Breite von 50 Pixel, eine Höhe von 50 Pixel, Grenzradius von 50 Prozent, ein Spitzenwert von 50 Prozent. Wir können so ziemlich einfach alles kopieren und statt 100 Pixel würden wir nur 25 Pixel sagen. Sieht nicht richtig aus. Sieht nicht zu richtig aus. Tut es? Weil wir keine absolute Position gesetzt haben. Da gehen wir. Wir haben einen Augapfel, wir haben eine Pupille, wir haben ein Auge. Jetzt will ich noch ein Auge. Gehen wir auf ein anderes Auge. Vielleicht nennen wir das ein Auge 1 und dieses eine Auge 2. Großartig. Auge 1 wird, sagen wir, einen Rand links von minus 200 Pixeln haben.Auge 2. Ich habe keine drei Augen. Auge 2, ein Rand links, vielleicht können Sie 0 sagen. Wir kriegen das ein bisschen mehr Platz. Fügen wir also 25 Pixel hinzu und 25 Pixel dazu. Da gehen wir. Wir haben ein paar Augen. Nun, wenn ich meine Maus von links nach rechts bewege, möchte ich, dass die Augäpfel der Pupillen der Maus folgen oder vielleicht in die andere Richtung schauen, wohin die Maus geht. Dasselbe mit meiner y-Position. Wir haben unser HTML und CSS gemacht. Lassen Sie uns nun in einige JavaScripts einsteigen. Lasst uns diese Panels ein bisschen größer machen. Hier drüben werden wir gehen und unser Output-Setup erstellen. Das wird wirklich vertraut aussehen. Wir gehen für ein x- und ein y-Setup, und x und y, weil es nicht wirklich Maus x und Maus y ist, es ist eigentlich die x-Exposition oder eine Translate x-Position und die Translate y-Position. Lassen Sie uns für einen Startwert gehen, und ich werde minus 100 Pixel sagen, außer ohne das px und das Ende, sagen wir, 100, der Strom wird 0 sein und dann ein Bereich, wir könnten einfach unseren Bereich hier von 200 setzen, aber wir wird dynamisch erstellen, dass, nachdem wir das Objekt erstellt haben. Ich arbeite nur mit der x-Position für jetzt, und ich werde Sie dazu bringen, die y-Position später zu machen, bevor ich fertig bin und Ihnen genau zeigen, wie ich die y-Position machen würde. Was danach ist, ist unser output.x.range und das ist unsere output.x.end minus output.x.start. Fantastisch. Ich werde nur die Eingabewerte ausschneiden und einfügen wo die Eingabe-Coder und die Ausgabe, wo die Ausgabe-Coder. Das macht ein bisschen mehr Sinn. Wir können auch anfangen, Coder-Bits zu zählen, nur damit wir wissen, was los ist. Fantastisch. Dann hier unten brauchen wir das wahrscheinlich nicht mehr, es sei denn, Sie werden einen Eingabebereich verwenden , bei dem der Start nicht 0 ist und das Ende nicht das Fenster in einer Breite ist. Also können wir das einfach hacken und dann können wir hier noch mehr kommentieren. So können wir Maus x tun, wir können Maus y sagen, oder wir können einfach diese Maus x Eingabe auf Maus y Eingabe aufrufen. Dann haben wir hier einige Konsolenprotokollierung, die ich gerade auskommentieren werde. Jetzt haben wir unsere Eingaben geschehen. Wir haben unsere Ausgänge eingerichtet. Nun, wie können wir unsere Eingänge tatsächlich konvertieren oder mit unseren Ausgängen verbinden? Ausgabe, lasst uns das richtig buchstabieren, output.x.current gleich, und wir haben einen Bruchwert, mit dem wir arbeiten können. Also werden wir sagen, unser Bruchwert multipliziert mit unserem output.x.range , der ein Wert an sich sein wird. Also müssen Sie das nicht tun, aber manchmal ist es ein bisschen einfacher zu sagen, okay, das ist ein Wert, der zuerst funktionieren wird, und dann sagen wir output.x.start plus diesen Wert. Jetzt lasst uns das abmelden. Mal sehen, was passiert. Alles bereit. Wenn wir das zuerst klären, sind Sie ganz von links, das ist minus 100, ganz nach rechts, das ist fast plus 100. Ziemlich cool. Das funktioniert also, unsere Ausgabewerte kommen durch. Jetzt müssen wir es nur mit dem HTML verbinden. Aber wie zum Teufel machen wir das? Bis jetzt war alles einfach zu programmieren. Nun, ein bisschen Mathematik, aber kein HTML-Zeug. Wie verbinden wir eigentlich den HTML? Oben in meinem Dokument. Hier werde ich meinen HTML einrichten. So HTML-Setup. In unserem HTML haben wir einige Klassen, wir haben Auge und Schüler. Ich möchte mich bewegen und Änderungen an der Schülerin vornehmen. Versuchen wir also, die HTML-Elemente für diese Schülerklassen zu bekommen. Jemand sagt var Schüler HTML Collection gleich document.get Elemente nach Klassennamen und Sie sehen, wie wir Kamel Fall hier verwenden und dann möchte ich Schüler/nicht Schüler, Schüler bekommen. Sagen wir console.log, Schüler HTML-Sammlung. Vielleicht haben Sie diesen schnellen Blitz gesehen, sagt Protokoll übersprungen. Wir müssen tatsächlich überprüfen, was das mit Chrome Developer Console ist. Wir können das hier nochmal einloggen. Siehst du? Protokoll wurde übersprungen. Gehen wir also zu Entwickler- und JavaScript-Konsole. Dies protokolliert HTML-Sammlung, die div von Schüler und div von Schüler ist. Sie können sehen, dass es tatsächlich die Auswahl, ob diese HTML-Elemente, wie ich den Mauszeiger über sie, können wir auch mit der rechten Maustaste klicken und sagen, ein Element-Panel zeigen, und da gehen wir. Wir haben diese beiden Augen, was fantastisch ist. Also lass uns das schließen. Das wird uns nicht wirklich zu sehr helfen. Wir müssen diese Schüler HTML-Sammlung in ein Array umwandeln. Es gibt ein paar Möglichkeiten, das zu tun, aber eine der einfachsten sind var Schüler. Array gleich array.from, und wir fügen nur unsere Schüler HTMLCollection in dort ein. Wenn Sie produktionsfertigen Code erstellen möchten, überprüfen Sie einfach, dass dieser Code in allen Browsern funktioniert , in denen Ihr Code funktionieren soll. Jetzt haben wir unsere Schüler Array, lassen Sie uns einfach überprüfen, auch ein Protokoll übersprungen. Auch hier wurde das Protokoll übersprungen. Schauen wir uns an, was das zurückbringt. Auch hier wird es uns unsere beiden Schüler geben, aber statt einer HTML-Sammlung wird es kein Array sein, was bedeutet, dass wir damit arbeiten können. Lasst uns das schließen, lasst uns dieses Pupillen-Array kopieren und gehen in unseren Aufwärtsbereich hier drüben. Wir haben unsere Ausgabe x ausgearbeitet, jetzt lasst uns gehen und Ausgabe auf HTML anwenden. Wir kopieren unsere Schüler Array, und dann verwenden wir Array rad Funktion namens ForEach. Jetzt nimmt unsere ForEach-Funktion ein Funktionsargument. Wir können Funktion sagen und im Inneren von hier werden wir eine anonyme Funktion setzen. Dort gehen wir, und wir führen Code für jeden einzelnen Schüler aus, der sich in unserem Array befindet. Innerhalb dieser Funktion erhalten wir mögliche Informationen. Die erste Information ist das eigentliche Element. Du könntest Element schreiben, ich werde Schüler schreiben, weil ich wissen möchte, dass ich mit einem Schüler arbeite, und dann kommst du auch vorbei, was Luca sagt. Der erste Schüler, wird einen Nullwert bekommen, wenn wir i protokollieren, der nächste wird einen Wert von eins bekommen, wenn wir i protokollieren. Das ist wirklich, wirklich cool, weil es bedeutet, dass Sie Ihren Code ändern können, Sie können einige Logik basierend auf was ich es ist. Es ist ein bisschen verwirrend, wenn ich sage ich wir könnten so etwas wie k hier gebrauchen. Nehmen wir an, pupil.style.transform, und das wird tatsächlich das HTML ändern, gleich. Sie wollen übersetzen x sagen. Ich werde übersetzen x für jetzt verwenden. Ich werde sagen, übersetzen x, und ich werde sagen, 75 Pixel. Da gehen wir. Mal sehen, ob das wirklich funktioniert. Im Moment macht es nichts, weil wir unsere Maus noch nicht bewegt haben. Lassen Sie uns diese Konsole löschen, und vielleicht können wir die Protokolle für jetzt löschen. Sie sehen jetzt, wie unsere Schüler auf 75 Pixel codiert wurden. Wenn wir mit der rechten Maustaste klicken und wir sagen Inspect, können Sie sehen, dass es eine Übersetzung von 75 Pixel angewendet hat. Das ist fantastisch. Lassen Sie uns das noch einmal schließen, wir können nach oben scrollen, und wir können einfach dieses Konsolenprotokoll herausnehmen, und dann scrollen wir zurück nach unten, um die Ausgabe auf HTML-Code anzuwenden. Anstatt dies zu einem statischen Wert zu machen, lassen Sie uns dies zu einem dynamischen Wert machen. Wir können plus plus sagen, und wir können jetzt einen output.x.current Wert hier setzen. Was dies tut, ist, dass es drei verschiedene Werte verkettet. Diese Zeichenfolge, dieser Zahlenwert mit dieser Zeichenfolge, und es setzt sie alle in einen Zeichenfolgenwert. Es wird String-Verkettung genannt. Ein erstaunliches kleines beschreibendes Wort da. Es wendet sie auf den Wert pupil.style.transform an. Mal sehen, ob das funktioniert. Da gehen wir. Es macht ziemlich lustig. Lassen Sie uns einfach unsere Konsole löschen und schließen Sie das einfach. Das ist wirklich, wirklich cool. Es macht Spaß. Es überlappt sich ein wenig, so dass wir unsere Eingangs- oder Ausgangswerte ein wenig ändern können. Wenn wir hier nach oben scrollen, ändern wir unsere Ausgangswerte auf minus 70 und vielleicht unser Ende auf 70. Da gehen wir. Nie ganz erreicht es, oder was wir tun könnten, ist in unserem CSS, wir könnten unser i ändern, wir könnten einfach sagen Überlauf zu versteckt. Das heißt, wenn wir an den Rand kommen, überlappt es nicht, es geht einfach zurück. Also Ihre Wahl, was Sie hier tun. Lass uns das einfach noch mal verstecken. Was kommt als Nächstes? Lassen Sie mich Ihnen ein paar wirklich coole Dinge zeigen. Im Moment folgen unsere Schüler der Maus. Wie bekommen wir es, nicht der Maus zu folgen, sondern umgekehrt zu sein? Wenn ich meine Maus von links nach rechts bewege, bewegen sich die Pupillen von rechts nach links. Ist das möglich? Nun, sieh dir das an. Unsere output.x.current entspricht dem output.x.start in den Momenten. Was passiert, wenn wir am Ende beginnen, und wir sagen minus diesen Wert? Das heißt, wenn wir von der rechten Seite zur linken Seite gehen, tut es nicht das Gegenteil dessen, was unsere Maus tut. Nun, was ich möchte, dass Sie dieses Video pausieren und versuchen , die y-Werte für die Schüler funktionieren zu lassen. Ich werde Ihnen zeigen, wie ich die Y-Werte für die Schüler machen würde. Lass uns gehen. Ich werde Abschnitte hier einfügen, lassen Sie uns das einfach kopieren und einfügen. Minus 100 bis 100, sollte es ungefähr die gleichen Werte sein. Sie können diese ändern, wenn Sie möchten. Vielleicht können wir es, vielleicht ändern wir es auf 125, so. Dann berechnen wir einfach unsere Reichweite für unser y. Wir haben eine Maus x Eingang, und Maus y Eingang, Ausgang X. Lassen Sie uns unsere Ausgabe y bekommen, wie so, und wir können am Ende wieder beginnen. Es ändert sich zu y, Maus y Fraktion, was wirklich wichtig ist. Sie können tatsächlich mit Maus x mit Ihrem y experimentieren, das ist ein bisschen lustig. Ich überlasse es dir. Dann hier drüben, wo wir uns auf den HTML bewerben, anstatt translate x zu verwenden, werde ich translate verwenden, was bedeutet, dass ich hier einen anderen Wert eingeben muss. Wir können 50 Pixel sagen und wir bewegen unsere Maus um. Dies wird immer an derselben Position bleiben. Das ist nicht ganz das, was wir wollen, wir wollen, dass dies dynamisch ist, also wollen wir anstelle von 50 Pixeln hier eine String-Verkettung verwenden. Wir werden in einfache Anführungszeichen setzen, plus, und dann zwischen den Pluspunkten wird unsere Ausgabe y.current verwenden. Mal sehen, was hier passiert. Das geht genau dorthin, wo unsere Maus nicht hingeht, und Sie sehen, dass wir unsere Augäpfel verstecken können, was nicht ideal ist. Ich werde meine Werte hier auf vielleicht 75 ändern, und ich werde diese auch auf 75 und 75 ändern. Da gehen wir. Ziemlich cool. Wenn wir wollten, dass unser y-Wert unserer Mausposition folgt, anstatt umgekehrt zu sein, könnten wir an der Startposition beginnen und dann diesen Teil der Berechnung hinzufügen. Du siehst, wie ich meine Maus nach oben bewege, folgt sie meiner Maus. Wenn ich von links nach rechts gehe, tun die Augen das Gegenteil. Sie können den Code wirklich einfach ändern und einfach den HTML aktualisieren. Für Stretchtraining mit diesem, was ich möchte, dass Sie tun, ist, dass Sie für jeden Schüler versuchen, machen Sie eine Bewegung in eine andere Richtung. Wenn ich meine Maus vom oberen Bildschirmrand zum unteren Bildschirmrand bewege, möchte ich, dass ein Auge meiner Maus folgt und dass das andere Auge meiner Maus nicht folgt. Ich will, dass es umgekehrt ist. Dasselbe für das X. Wenn ich meine Maus von links nach rechts bewege, möchte ich, dass ein Auge der Maus folgt, und ich möchte, dass das andere Auge das Gegenteil macht. Halten Sie das Video hier an und sehen Sie, ob Sie das tun können. Probieren wir das aus. Ich möchte, dass meine Schüler das Gegenteil tun. Was großartig ist, ist, dass ich diesen k Wert oder i Wert habe, wie auch immer du es nennen willst. Ich werde sagen, ob, und ich werde sagen k gleich, gleich, gleich Null ist, was das erste ich sein wird, etwas anderes tun, etwas anderes tun. Lassen Sie uns das hier kopieren und einfügen, kopieren und fügen Sie es hier ein, und lassen Sie uns das herausnehmen, was so aussieht. Dies sollte immer noch genau gleich funktionieren, wir haben den gleichen Code darin. Jetzt habe ich meine aktuellen Werte hier. Was ich tun werde, ist, ich werde einen anderen Wert ändern oder hinzufügen. Ich werde diese Ausgabe x kopieren und einfügen, und ich werde Punkt gegenüber sagen. Ich werde sagen Start plus diesen Wert hier drüben, und ich werde genau das gleiche für meinen y-Wert tun. Ich werde sagen, das Gegenteil ist das Ende, Minus und Start Plus. Du könntest das nennen, was immer du wolltest. Du könntest es invers nennen, du könntest dies sogar ändern, um zu beginnen, und das zu beenden, und das zu plus, und das zu minus, was immer du willst. Ich habe jetzt zwei Ausgabewerte, mit denen ich arbeiten kann. Ich habe die Strömung und ich habe das Gegenteil. Mal sehen, was hier passiert, wenn ich dies auf das Gegenteil und das Gegenteil aktualisiere, und dieses auf aktuelle und aktuelle, was passiert? Wenn ich den ganzen Weg in die Mitte gehe, ist er normal, und wenn ich den ganzen Weg nach links gehe, geht er ein bisschen wie seltsame Schielen, wenn ich den ganzen Weg nach rechts gehe, super schielig. Da gehen wir, Sie können anfangen, etwas Spaß zu haben, alle codiert. Der HTML wird gerade von Ihrem Code aktualisiert, wirklich cool. Im nächsten Video werden wir das auf die nächste Stufe bringen. Wir haben gelernt, wie man Dinge mit JavaScript bewegt. Es hat wirklich Spaß gemacht. Aber im Moment gibt es nicht viel Tiefe. Es gibt keine Parallaxe. Wir werden Parallaxe und Tiefe im nächsten Video vorstellen. Ich freue mich darauf. 7. Den Parallax-Effekt schaffen: In diesem Video werden wir eine Illusion der Tiefe schaffen. Es gibt verschiedene Möglichkeiten, dies zu tun, aber eine Möglichkeit, die ich sehr mag, ist, jedem Parallax-Element einen Tiefenwert zwischen Null und eins zu geben . Ja, wir reden wieder über Werte zwischen Null und eins, aber warum? Weil es einfach ist, sich mit unseren Ausgangswerten zu verbinden. Null bedeutet sehr nah und man bedeutet sehr weit weg. Wenn ein Element immer weiter entfernt wird, bewegt es sich immer weniger schnell. Wie wir dies im Code tun, ist, für jedes Element beginnen wir mit den x- und y-Ausgängen, die wir im letzten Video ausgearbeitet haben, dann subtrahieren wir einen Wert, der durch Multiplikation der aktuellen x- oder y-Ausgänge mit dem Element Tiefe. Wenn die Tiefe eines Elements 0.5, dann werden die x-Ausgänge der Elemente die Hälfte der aktuellen x-Ausgabe sein. Wenn die Tiefe eines Elements Null ist, werden die x-Ausgänge dieses Elements die volle x-Ausgabe sein, und wenn die Tiefe eines Elements eins ist, dann ist die x-Ausgabe für dieses Element Null. Die andere Sache, die wir uns bewusst sein müssen, ist, wo unsere Elemente auf dem Bildschirm erscheinen. In HTML, es sei denn, Sie geben Elemente z-index an, wird es unter Elementen angezeigt, die danach kommen, und auf den Elementen, die davor kommen. Wenn unser erstes Element eine Tiefe von 0,1 hat und unser zweites Element eine Tiefe von 0,8 in HTML hat , würde das zweite Element oben auf dem ersten erscheinen. Aber gemäß den Tiefen der Elemente möchten wir, dass das erste Element oben angezeigt wird, weil es einen niedrigeren Tiefenwert hat. Es sei denn, Sie möchten manuell Z-Indizes setzen oder alle Elemente setzen, die weiter entfernt sind, oben im Dokument, dann müssen wir die Z-Indexwerte für jedes Element mit Code anpassen . Wir können dies tun, indem wir einen ZindeXRange setzen. Anschließend erarbeiten wir Elemente ZindeX, indem wir den ZindeX-Bereich multipliziert mit der Tiefe vom ZindeXRange subtrahieren . Der ZnDieXrange sollte mit der Anzahl der Dezimalstellen, die Sie in Ihren Tiefenwerten verwenden möchten, korrelieren oder höher sein . Wenn Sie einzelne Dezimalstellen verwenden, kann ein ZindeXRange 10 sein. Wenn Sie zwei Dezimalstellen verwenden, verwenden Sie einen ZindeXRange von 100 usw. Eine ZindeXrange von 1.000 oder 10.000 ist eine ziemlich sichere Wette. Wie Sie sehen können, hat es alles mit Tiefe zu tun. Lasst uns jetzt in den Code einsteigen. Wir haben einiges zu decken. Während auf googly Augen Beispiel war ziemlich Spaß zu spielen und zu schaffen ist nicht wirklich gehen, um uns bei der Schaffung einer Parallax-Erfahrung zu helfen. Ich werde hier ein paar Neumodellierungen machen. Zuerst werde ich meine Augen aus dem HTML entfernen und einige Parallax-Elemente erstellen , damit wir vielleicht drei davon erstellen können. Dann werde ich in meinem CSS anstelle von eye1 und eye2 anstelle meiner Schülerin meine.eye2 ändern, anstelle von eye1 und eye2 anstelle meiner Schülerin meine.eye2 ändern, vielleicht lassen Sie uns dies einfach kopieren und in Parallax-Element einfügen. Hintergrundfarbe, wir können dies in Schwarz ändern. Die Hintergrundfarbe ist schwarz. Die Breite und Höhe 200. Grenzradius können wir das rausnehmen, okay? Die Position ist absolut links und oben Rand links, Rand oben. Das ist alles gut. Es sieht toll aus. Es befindet sich in der Mitte der Seite. Der Überlauf: versteckt, wir können das herausnehmen. Was wir tun werden, ist für jedes dieser Elemente wird eine separate Hintergrundfarbe gesetzt. Dann oben hier, anstelle von PupilsHTMLCollection, können wir Elemente HtmlCollection sagen und wir können das kopieren und einfügen. Anstatt nach dem Schließen des Schülers zu suchen, werden wir wieder nach Parallax-Artikel suchen. können wir kopieren und einfügen. Dann anstelle von PupilsArray werde ich für Elemente Array gehen. Wir haben dann unsere Eingänge und unsere Ausgänge, die alle ziemlich gut sind. Ich werde diese von 75 auf 100 ändern, nur damit es ein bisschen mehr Bewegung gibt, vielleicht können wir sogar 150 sagen. Lassen Sie uns diese einfach kopieren und einfügen. Unsere Ausgänge werden bearbeitet. Wir haben dann alle MouseX und MouseY Eingaben ausgearbeitet. Wir haben unsere Ausgabe x. Ich brauche keine Strom und ein Gegenteil, das ständig ausgearbeitet wird. Ich werde nur für Strom gehen. Ich bleibe bei dem Ende minus diesem Wert hier. Wenden Sie die Ausgabe auf HTML an, das ist großartig, so dass wir mit unseren aktuellen Werten gehen. Nehmen wir das einfach und überschreiben das, weil es keine Augen mehr geben wird. Statt unserer PupilsArray hier werden wir für ItemsArray gehen. Anstatt dieses Element mit pupi zu referenzieren, können wir item gehen und dann item.style.transform und dann übersetzen wir es. Es sieht so aus, als ob es fantastisch funktioniert. Lasst uns etwas Styling in diese Blöcke setzen. Ich möchte sagen, Hintergrundfarbe. Welche Farbe möchte ich? Nun, das hier wird schwarz sein, also ist das großartig. Lassen Sie uns diese Stilattribute kopieren und einfügen. Lassen Sie uns unser Asset-Panel in Farbstift öffnen. Ich werde nur eins von denen kopieren und es hier drüben einfügen. Dann gehen wir für ein Blau und kleben es hier drüben. Vielen Dank. Jetzt haben wir alle unsere Quadrate mit genau der gleichen Geschwindigkeit bewegt. Was hier passiert ist, ist, dass, wenn ich da rauskomme, du den kleinen siehst und wenn ich hier reinkomme, dann siehst du den schwarzen. Wenn ich beide und wieder reinkomme, nimm es mir einfach, dass sie sich alle mit genau der gleichen Geschwindigkeit bewegen. Was wir hier tun werden, ist, dass wir anfangen werden, unsere Tiefe einzuführen. Für diesen Punkt 1 möchte ich eine Tiefe von sagen 0,1. In JavaScript können wir Datentiefe verwenden und wenn ich Tiefe sage, können Sie hier setzen, was Sie wollen. Es liegt an dir. Gehen wir für 0.1 und lassen Sie uns kopieren und einfügen. Lass uns das einfach ein bisschen größer machen. Dies kann 0,3 und 0,6 sein. Das bedeutet, dass dieser Platz unser nächster Platz sein sollte. Dieser ist in der Mitte und dieser sollte der am weitesten entfernte sein. Hier können wir sehen, dass das nicht der Fall ist, aber wir haben keine Codierung gemacht, um es so zu machen. Dies markieren Sie einfach HTML und CSS und lassen Sie uns für jede Schleife zu unserem Items Array gehen. Hier können wir anfangen, mit der Tiefe herumzuspielen. Um tatsächlich die Tiefe in JavaScript zu bekommen, ist das, was wir tun werden. Wir werden sagen, var Tiefe. Wir installieren diese Tiefe in einer Variablen namens Tiefe. Wir sagen item.dataset.depth. Wenn ich hier Tiefe sage, wenn Sie Ihre Datentiefe genannt haben, so etwas wie Datenentfernung, dann sagen Sie dataset.distance, aber wir haben hier Tiefe. Mal sehen, ob dies tatsächlich durch console.log kommt. Wir sagen k für den Gegenstand, dann sagen wir Tiefe und Tiefe. Wenn wir unsere Maus bewegen, hat das erste Element eine Tiefe von 0,1, das zweite eine Tiefe von 0,3 und das dritte hat eine Tiefe von 0,6. Die Gegenstände kommen durch. Die Sache ist, dass dies Textwerte sind. Ich möchte, dass sie Zahlenwerte sind. Wie kommen wir dazu, dass in JavaScript passiert? Nun, wir können dieses Ding namens Parse Float verwenden. Dann wählen wir das aus und legen es dann in Klammern. Was parse float tut, ist, dass es etwas in eine Zahl und speziell eine Zahl mit Dezimalstellen konvertiert . Wir wissen, dass wir Dezimalstellen haben, also funktioniert das wirklich gut. Die andere Sache ist, dass wir Komma 10 setzen müssen. Wenn Sie nicht sagen, ist dies kein massives Trans-Match, aber es ist Best Practice. Der Grund, warum ich Komma 10 hier setze, ist, weil wir sagen, wir wollen, dass dies ein Dezimalsystem ist. Es könnte eine Zahl oder ein Stück String in etwas konvertieren , das zum Beispiel um 15s zählt. Das ist wirklich gute Praxis. Lasst uns das drinnen behalten. Wenn wir uns bewegen und sehen, dass das jetzt alle Zahlen sind, sind sie orange, sie haben keine Zitate um sie herum. Wie wenden wir das wirklich auf jedes unserer Quadrate an? Lassen Sie uns eine Elementausgabe einrichten. Dies wird unserer Ausgabe oben ziemlich ähnlich aussehen, außer wir würden kein Startende und aktuellen Wert haben, wir werden nur einen x- oder einen y-Wert haben. Wir brauchen nicht jedes von ihnen. Hier unten werden wir unseren x-Wert haben. Was wird unser x-Wert sein? Nun, es wird bei unserer Ausgabe x.current beginnen. Es wird das als Starter sein und wir sagen minus den Ausgang x.current multipliziert mit der Tiefe. Wir können Klammern um diese herum setzen, nur um sicherzustellen, dass wir wissen, dass es zuerst berechnet wird , aber es wird tatsächlich zuerst wegen des Multiplikationszeichens berechnet. Wir haben unsere ganze Ausstellung. Jetzt sage ich itemoutput.x. Mal sehen, ob das funktioniert. Das y ist immer noch Teil der allgemeinen oder der globalen y-Position, aber unser x wird durch unsere Tiefe bestimmt, die ziemlich cool ist. Jetzt lasst uns die y-Position hier einbringen. Wir können einfach kopieren und einfügen diese y:output.y, output.y und itemOutput.y. Jetzt können Sie sehen, dass es umgekehrt zu unserer Mausposition bewegt, und es basiert auf der Tiefe. Lasst uns das klären und schließen. Aber es gibt noch ein kleines Problem. In unserem HTML werden Sie sehen, dass unsere Tiefe, diese ist bei 0,1, was bedeutet, dass es an der Vorderseite sein sollte, oder? weil es näher an uns ist. Auch wenn das schön aussieht, ist es nicht wirklich wahr. Je näher etwas ist, desto schneller sollte es scheinen, sich zu bewegen. Wie ändern wir das? Nun, in unserem JavaScript können wir jetzt anfangen, den Z-Index oder den Z-Index zu ändern, je nachdem, aus welchem Teil der Welt Sie kommen. Fügen wir hier einen neuen Wert hinzu, z-Index. Was wir tun werden, ist, dass 10.000 im Z-Index-Bereich liegen werden. Wir werden in Kürze eine neue Variable in unserer Ausgabe erstellen, aber wir beginnen mit 10.000. Es ist nur eine wirklich sichere Nummer, mit der man arbeiten kann. Wir sagen 10.000 minus 10.000 multipliziert mit unserer Tiefe, okay? Wir können die einfach in Klammern setzen , damit Sie wissen, dass das zuerst geklappt wird. Wenn unsere Tiefe eins ist, dann wird unser Z-Index Null sein. Wenn unsere Tiefe Null ist, bedeutet dies, dass unser Z-Index oder ZindeX 10.000 sein wird. Dann fügen wir eine weitere Zeile für unseren Artikel hinzu und wir sagen item.style.zindex gleich und wir plotten diese Zahl einfach dort hinein. Das funktioniert nicht. Öffnen wir unsere Konsole, Protokolle getrimmt. Es gibt keine Fehlermeldungen, die Dinge funktionieren nicht. Was ist hier los? Wir müssen zu unserem Chrome gehen, Entwickler, JavaScript-Konsole und es sagt ReferenceError: z Index ist nicht definiert, da passiert in der ganzen Show. Wir können hier runterkommen und ZindeX sagen. Es ist nicht ItemOutput.Zindix ist nur ZindeX. Da gehen wir. Das sollte Dinge für uns reparieren, fantastisch. Jetzt ist unsere Blackbox oben auf der blauen Box ist unten. Dinge sehen jetzt echt lebensecht aus, ziemlich cool. Du merkst jetzt etwas etwas Seltsames. Diese Gegenstände haben tatsächlich alle die gleiche Breite und Höhe aber da wir sie immer weiter nach hinten verschoben haben, scheinen sie nicht weiter und weiter entfernt zu sein. Was Sie tun könnten, ist, dass Sie sie manuell skalieren oder die Breite und Höhe ändern können, je weiter sie entfernt werden, oder Sie könnten es mit Code tun. Du könntest eine dynamisch machen. Das ist es, worauf wir im nächsten Video eingehen werden. 8. Noch realistischer werden: Wir haben einige Parallaxen-Magie geschehen lassen und es sieht toll aus. Aber wenn wir versuchen, Dinge aussehen und sich so verhalten zu lassen, wie sie es im wirklichen Leben tun. Es wird immer mehr Dinge geben, die wir tun können. In diesem Video werden wir zwei von ihnen ansprechen. Wir werden auch einige Code-Optimierung durchführen und ich ersetze die Boxen durch einige schön aussehende Blätter, weil Blätter cool sind. Das erste, was wir ansprechen müssen, ist Maßstab. Wenn es zwei Elemente gibt, die die gleiche Breite und Höhe haben, und einer von ihnen ist weiter entfernt. Es sollte kleiner erscheinen und es sollte kleiner erscheinen, je nachdem, wie weit es entfernt ist. Seine Skala sollte relativ zu seiner Tiefe sein. Sie können die Skala jedes Elements handcodieren, oder Sie könnten es mit Code tun und natürlich gehen wir dazu mit Code. Wir könnten die Skala wirklich leicht berechnen, indem mit einem beginnen und die Elementtiefe subtrahieren. Aber vielleicht wollen wir nicht, dass unsere Artikel so klein sind. Lassen Sie uns eine Anfangs- und Endskala festlegen, die uns dazu führt, einen Maßstabsbereich zu erstellen. Um dann eine Elementskala zu berechnen, beginnen wir mit der Startskala und fügen dann die Tiefe multipliziert mit dem Skalenbereich hinzu. Sieht ziemlich vertraut aus, nicht wahr? Das nächste, was wir ansprechen müssen, ist Unschärfe. Gegenstände erscheinen mehr und mehr verschwommen, je weiter sie entfernt werden. Aber wir wollen nicht unbedingt, dass sie bis zu einer gewissen Tiefe verschwommen werden. Andernfalls wird alles außer Elementen und Null-Tiefe verschwommen. Eine Möglichkeit, Unschärfe zu berechnen, besteht darin, einen Anfangstiefenwert zu bestimmen, dort liegt, wo die Unschärfe eintritt, und die andere ist ein Unschärfebereich, sein würde, wie verschwommen und Element erhalten können. Der Wert für die Anfangstiefe muss ein Wert zwischen Null und eins sein, damit er mit den Tiefenwerten korreliert und der Unschärfebereich ist, mit dem wir die Tiefe jedes Elements verbinden. Ähnlich wie unser Z-Indexbereich sind Elemente Unschärfewert wird dann berechnet, indem der Anfangstiefewert von der Elementtiefe subtrahiert und dann multipliziert wird, dass mit unserem Unschärfebereich, können Sie mit einigen negativen Unschärfewerten enden. Aber im Moment bedeutet es, dass diese Elemente nicht verschwommen erscheinen, was genau das ist, was wir wollen. Jetzt implementieren wir Skalierung und Unschärfe in unserem Code und während wir es tun, lassen Sie uns unseren Code ein wenig optimieren. Lassen Sie uns zuerst unsere Blöcke in ein paar cool-aussehende Blätter verwandeln. Wir öffnen unser HTML-Panel, geben wir ihm ein bisschen mehr Platz. Ich werde die Stilattribute herausnehmen, Boom, Boom und Boom. Dann werde ich innerhalb meines Parallax-Artikels ein Bild hinzufügen und die Quelle wird sein? Wenn ich mein Assets-Panel innerhalb von CodePen öffne, gibt es eine Reihe von Bildern. Sie könnten auf Fotos gehen, dass sie nicht ideal sind. Mit CodePen pro können Sie Ihre eigenen Assets hochladen. Ich habe einen Haufen meiner eigenen Parallax-Assets hochgeladen. Sie können diese Assets verwenden, wenn Sie möchten. Sie können auch die in der Klasse verfügbaren Assets verwenden und ich zeige Ihnen, wie Sie Ihre eigenen Assets hochladen und die URL kopieren, wenn Sie nicht über CodePen pro verfügen. Das haben wir kopiert. Lassen Sie es uns in unsere Quelle einfügen und dort gehen wir. Es kommt durch. Lassen Sie uns diese einfach kopieren und in unsere div-Elemente einfügen und dann Asset-Nummer 2 und Asset-Nummer 4. Da gehen wir und ich benutze Asset Nummer 4 anstelle von Asset Nummer 3, weil Asset Nummer 3 ein wirklich großer Spritzer ist und nicht so cool aussieht. Dann in unserem CSS werde ich Punkt Parallaxe, Artikel gehen und ich werde das Bild innerhalb von Parallax-Artikel adressieren. Ich werde sagen, Breite oder vielleicht maximale Breite ist 100 Prozent und die maximale Höhe ist auch 100 Prozent. Mal sehen, was das tut. Ja, das sieht ziemlich gut aus. Wie bekomme ich es jetzt in die Mitte? Vielleicht können wir etwas flex, df für Displayflex verwenden . Ich werde sagen, justify-content, center und align-items center. Da gehen wir. Wir können unsere Hintergrundfarbe abnehmen. Wir können die Breite und die Höhe auf 300 Pixel ändern und da gehen wir. Wir haben jetzt drei Blätter übereinander. Was ich jetzt tun möchte, ist, dass ich die Blätter nur ein wenig drehen möchte. Lassen Sie uns unser HTML öffnen und einige Inline-Styling hier machen. Erstens, lassen Sie uns für einen Stil Attribute gehen und ändern Sie die Transformation drehen auf etwa 30 Grad, wie so. Dann kopieren wir das und fügen es ein und wir ändern dies negative 45 und dieses in etwas wie 110. Funktioniert das überhaupt? Nein, weil wir Zauberspruch falsch verwandelt haben. Wie wär's damit? Da gehen wir, und die Dinge beginnen jetzt zu funktionieren. Wir haben einige interessante Blätter, die im Moment passieren. Sie sind ein bisschen besser als unsere Blöcke. Wir haben unser HTML erledigt, wir haben unser CSS fertig, jetzt kommen wir auf einige JavaScript-Optimierung. Das erste, was ich tun möchte, ist, dass ich diese Werte entfernen möchte, die wir nicht wirklich wissen, was sie sind und was passiert, wenn wir einen ändern, dann müssen wir immer den anderen ändern. Lassen Sie uns dies ändern, um output.zindex.range und wir kopieren und einfügen dies und dann hier oben werden wir einfach unser Zindex-Objekt einfügen und wir werden einen Bereichsschlüssel einfügen, und der Bereich wird 10.000 sein. Das ist die erste Optimierung, die ich tun möchte. Der Grund, warum ich das mache, ist, dass ich nicht einen Haufen dieser 10.000 Zahlen in der ganzen Show habe. Ich weiß genau, was es ist und ich kann es an einem Ort aktualisieren und es wird es in meinem Code aktualisieren, was wirklich cool ist. Das nächste, was ich tun möchte, ist, dass ich ändern möchte, wie diese Handle-Maus-Move-Funktion funktioniert, anstatt diesen ganzen Code in hier zu haben , der wirklich, wirklich lang wird , möchte ich ihn aufteilen. Die Art, wie ich es aufteilen möchte, ist, dass ich eine Variable erstellen möchte, die updateInputs genannt wird , und ich möchte eine Funktion hier speichern, die diesen Code ausführt. Lassen Sie uns diesen Code von hier nehmen und ihn in diese Funktion und dann UpdateInputs innerhalb dieser Funktion ausführen. Es bedeutet, dass ich genau weiß, was es tut. Aber ich muss nicht wirklich den Code betrachten und jedes Mal durchblättern. Das einzige Problem bei dieser Art ist , dass Ereignis in dieser Funktion nicht vorhanden sein wird. Was ich tun werde, bevor wir Update-Ereignisse aufrufen, ist, dass ich meine maus.x event.clientx und meine maus.y zu event.clienty zuweisen werde . Du denkst vielleicht so gut, wo der Heck gemeistert wird x kommt? Nun, das werden wir erschaffen. Lassen Sie uns für var Maus gehen und wird ein Objekt erstellen und sein x wird Null sein und es ist y es Null sein. Nun, wenn wir das Ereignis erhalten, wird sagen, mouse.x entspricht der event.clientx. Dann, anstatt event.clientx unserer mousex.current zuzuweisen, können wir mouse.x und mouse.y sagen. Das bedeutet , dass wir unsere Update-Eingaben ausführen können, ohne sich auf eine Ereigniseigenschaft verlassen zu müssen. Nun lasst uns dasselbe für unsere Ausgabe tun. Dies erstellt eine Variable namens updateOutputs und lassen Sie uns eine Funktion innerhalb von hier speichern. Wir können das schneiden und einfügen. Anstatt zwei Zeilen von Kommentaren zu haben, kann ich einfach sagen, Ausgabe x und y, und lassen Sie uns es einfach so machen. Das sieht ein Haufen sauberer aus. Wir rufen dann die UpdateOutputs Funktion direkt nach den UpdateInputs auf und dann wollen wir diese in eine Funktion setzen. Dieser ist ein bisschen anders, weil wir eine Elementausgabe für jedes einzelne Element erstellen und dann den HTML aktualisieren. Wie nennen wir diese Funktion? Vielleicht können Sie UpdateEachParallaxItem sagen . Wie wär's damit? Kopieren wir das, fügen Sie es ein. Ich werde sagen, var equals Funktion und dann können wir das schneiden und es hier einfügen. Jetzt sieht unser Code viel lesbarer aus. Wir sehen nur, dass es die Eingaben aktualisiert, die Ausgaben aktualisiert und dann jedes Parallax-Element aktualisiert. Das ist auch wirklich cool, weil wir jede dieser einzeln und außerhalb dieser Handle Mausbewegungsfunktion aufrufen können . Das ist großartig. Wir haben unseren Code etwas aufgeräumt. Nun, was kommt als Nächstes? Es ist Skalenzeit. Wo machen wir unsere Waage? Nun, wir machen unsere Waage und unsere ItemOutput. Lassen Sie uns eine neue Eigenschaft zu unserem ItemOutput und unserer Skala hinzufügen. Was soll das sein? Es wird so etwas wie unser output.scale.start plus sein. Wir werden in unsere Klammern hier setzen, Ausgabe Punkt-Skala Punktbereich multipliziert mit der Tiefe. Wir haben das nicht eingerichtet, also lass uns gehen und es einrichten. All diese, wir können sie eigentlich nur für jetzt verstecken, was wirklich cool ist über CodePen. Es ist auch in den Code-Editoren verfügbar. Wir können den Mauswert verstecken und dann gehen wir weiter und setzen unsere Waage hier ein. Ich werde einen Startwert haben, und der Startwert, den ich empfehlen würde, eins zu sein, weil eine Skala von eins bedeutet, dass es in der ursprünglichen Größe ist. Wir haben dann einen Endwert, und der Endwert kann vielleicht 0,2 sein, aber wir werden diesen in einem Moment aktualisieren. Dann werden wir unser Sortiment genau wie der Rest dieser Berechnungen ausarbeiten. Ausgabe-Punkt-Skala Punktbereich ist Ausgabe Punkt-Skala Punkt-Ende minus Ausgabe Punkt-Skala Sie denken vielleicht: „Halten Sie an, wir beginnen mit 0,2 und subtrahieren dann eins, was uns einen Wert von negativem 0,8 als unser Bereich ergibt.“ Das ist vollkommen okay. Du könntest es ändern, wenn du willst. Es gibt keine harte und schnelle Möglichkeit, Dinge mit Code zu tun. Das ist genau die Art, wie ich es mache. Scrollen wir nach unten. Unsere Skala ist jetzt Ausgabe Skala Punkt Start, die eine sein würde. Dann fügen wir den Punktbereich der Ausgabe hinzu , der ein negativer Wert sein wird, multipliziert mit der Tiefe. Wenn unsere Tiefe eins ist, dann wird unser Ausgabe-Punkt-Skala-Punktbereich negativ 0,8 sein. Wir werden im Grunde sagen Start plus negativ 0,8, was uns 0,2 einer Skala geben wird, was fantastisch ist. Wenn unsere Skala oder wenn unsere Tiefe auf Null ist, der Punkt-Skala Punktbereich multipliziert mit Null nichts sein. Dann bleiben wir mit einer Skala von eins übrig. Das Problem mit der Skalierung ist, dass Skalierung und Übersetzung beide Transformationseigenschaften sind Daher müssen wir hier Skalierung in diese Codezeile hinzufügen. Also skalieren, lasst es uns ausprobieren, 0,5. Lassen Sie uns die Maus hier bewegen. Da gehen wir. Sie sind wirklich klein, also machen wir es dynamisch. Ich werde für die Ausgabe Punktskala des Artikels gehen. Das sieht ziemlich gut aus, und wenn wir hier nach oben scrollen und die Endskala auf Null setzen, sollten die Dinge viel kleiner werden. Vielleicht, wenn wir unser HTML ändern, wenn wir die 0.6 in eine Tiefe von eins ändern, sollten wir es tatsächlich verschwinden sehen. Es ist nirgends zu sehen. Das liegt daran, dass unser Ende Null ist, und es wird eine Skala von Null haben. Was machen wir hier? Wir ändern es zurück zu 0,2 oder 0,3, oder wenn Sie 0,3 wollen, und dann gehen wir. Es ist nicht ganz Null. Ich mag keine Gegenstände mit einer Tiefe von eins, das bedeutet, dass sie sich nicht bewegen, also bevorzuge ich 0,9, dann bewegt es sich leicht. Wir haben jetzt unsere Waage sortiert, das ist erledigt. Was als nächstes kommt, ist die Unschärfe. Lassen Sie uns einen Unschärfewert hier auf unsere Artikelausgabe setzen. Was ist die Ausgabe der Unschärfeberechnung? Punkt Unschärfe Punkt Starttiefe, die wir nicht ganz eingerichtet haben, und wir werden sagen, unsere Tiefe minus unsere Ausgabepunkt-Unschärfe Starttiefe. Wir werden das in eine Klammer stecken, damit es zuerst funktioniert. Dann werden wir sagen, multiplizieren mit unserem Ausgabepunkt-Unschärfe-Punkt-Bereich. Was das tut, ist, dass es sagt, dass wir eine Tiefe haben, dies könnte Null sein, also Null minus unsere Anfangstiefe, was vielleicht 0,5 sein würde, also hätten Sie eine negative 0,5 multipliziert mit dem Unschärfebereich. Es würde Ihnen einen negativen Wert geben, der für einen Artikel mit einer Tiefe von Null vollkommen in Ordnung ist. Lassen Sie uns einfach diesen Ausgabewert eingeben. Gehen wir für Unschärfe und lassen Sie uns unsere Anfangstiefe einstellen, und sagen wir 0,5. Alles, was bei 0,5 oder höher liegt, wird einen blauen Wert erhalten. Dann stellen wir unser Sortiment ein, und wir werden vorerst 20 sagen. Lassen Sie uns dies in den HTML implementieren. Wir gehen Punkt Punkt Stil Punktfilter, die wir noch nicht verwendet haben. Wir brauchen tatsächlich einen String-Wert dafür, und wir werden sagen, Unschärfe, und lassen Sie einfach fünf Pixel jetzt versuchen, bewegen Sie unsere Maus ein wenig. Da gehen wir, wir haben einige Unschärfewerte. Jetzt machen wir das dynamisch. Was wirklich wichtig ist, hier zu beachten ist, dass Sie ein Pixel oder einen Messwert benötigen , so dass wir einfach die fünf entfernen und in Element Ausgabe Punkt Unschärfe setzen, und wenn wir unsere Maus bewegen, da gehen wir. Sie sehen, dass ein Artikel, der weiter zurück ist jetzt verschwommen ist, und die Gegenstände, die näher an uns sind, sind sie nicht verschwommen. Wenn wir die Werte der Starttiefe ändern, ändern wir das vielleicht auf 0,1, wir werden sehen, dass mein Element, das bei 0,1 ist, es immer noch nicht verschwommen ist, aber die Elemente bei 0,3 und 0,9, sie sind definitiv verschwommen. Wenn wir unser Sortiment auf etwa 40 ändern müssten, sollten Sie sehen, dass die Artikel weiter zurück noch verschwommen werden. Wir haben unser Unschärfe-Setup. Das einzige, was Sie vielleicht bemerkt haben, ist, dass jedes Mal, wenn ich meinen Code ändere, also werde ich nur ein bisschen zufälligen Code hier einfügen, Sie werden sehen, dass, bevor ich meine Maus bewege, diese Dinge nicht verschwommen sind und die nicht skaliert sind, was problematisch ist. Es bedeutet, dass die Dinge nicht so aussehen werden, als ob sie verschwommen oder skaliert wären, wenn wir unsere Maus bewegen . Nehmen wir das heraus und lassen Sie uns einen Code implementieren, der dies beheben wird. Was großartig ist, ist, dass wir tatsächlich Eingaben aktualisiert, Ausgaben aktualisiert und jedes Parallax-Element aktualisiert haben. Wir können diesen Code einfach kopieren und einfügen und zum Ende unseres Codes gehen und ihn einfügen. Lässt es uneinrücken, und von Anfang an werden Sie sehen, dass die Dinge jetzt skaliert werden und die Dinge verschwommen sind. Sie sind leicht versetzt, es sieht nicht wirklich so aus, als wären sie in der Mitte, also können wir vielleicht unsere Maus X- und Y-Position anpassen. Gehen wir zu unserer Maus X und Y, und wir werden für Fenster Punkt innere Breite und Fenster Punkt innere Höhe gehen . Vielleicht sollten wir das nicht tun. Vielleicht sollten wir sagen, multiplizieren Sie es mit 0,5. Das bedeutet, dass das X und Y in der Mitte des Fensters sein werden, als ob es dort wäre, was gut aussieht. Wenn wir einige Codeänderungen vornehmen oder jemand kommt und unseren kleinen Stift oder unsere Website besucht, bedeutet dies, dass, bevor sie eine Chance hatten, ihre Maus zu bewegen , die Dinge verschwommen aussehen, sie werden skaliert werden, was fantastisch ist. Wir haben ein bisschen Code aktualisiert, wir haben Blätter in unsere Parallax-Beispiele implementiert, und wir haben einige Skalierung und Unschärfe gemacht. Super-duper. Wie versprochen, muss ich Ihnen zeigen, wie Sie Ihre eigenen Assets hochladen können. Wenn Sie eine neue Registerkarte öffnen, können Sie nach Image-Hosting suchen. Es gibt eine Reihe von verschiedenen Möglichkeiten, wie Sie Bilder hosten können. Einige von ihnen funktionieren nicht, aber probieren Sie es einfach aus. Was wir anstreben ist, dass wir eine Bild-URL erhalten möchten, die wir in CodePen einfügen können. Lassen Sie uns mit dem Hochladen beginnen. Wir wählen ein Parallax-Asset wie dieses coole Gesicht, wir sagen: „Okay, laß uns hochladen.“ Dann kopieren wir seinen Link, fügen Sie seinen Link ein. Dies ist nicht die Bild-URL. Sobald das Bild geladen wird, klicken Sie mit der rechten Maustaste und Sie sagen „Bild Adresse kopieren“, fügen Sie es wieder ein, und Sie werden sehen, dass es Punkt PNG oder Punkt JPEG, was auch immer Sie hochladen. Sie können dann diese URL kopieren und dann in Ihrem HTML-Code einfügen. Da gehen wir. Sie brauchen CodePen nicht, um Bilder hochzuladen oder Bilder in Ihre Projekte einzufügen. Jetzt haben wir ein cooles Gesicht und brauchen CodePen Pro nicht zu verwenden. Oder wenn Sie CodePen überhaupt nicht verwenden und Sie sich auf Ihrem lokalen Computer befinden, ist es ziemlich einfach, Bilder im Dateisystem mit relativen URLs zu referenzieren. Super einfach. Es gibt wenige Dinge, die wir hinzufügen und implementieren könnten, die es noch realistischer machen und vielleicht sogar ein bisschen einen Wow-Faktor geben würden . Wenn Sie sich vorstellen können, was Sie implementieren möchten, würde ich vorschlagen, dass Sie es selbst programmieren, etwas Spaß haben, einige Fehler machen, und wenn Sie Hilfe benötigen oder Dinge nicht so funktionieren, wie Sie es erwarten, teilen Sie Ihre URL im Kommentarbereich der Klasse, und ich werde versuchen, Ihnen zu helfen. 9. Plane wie ein/e Amateur:in: Wenn Sie verschiedene Versionen des Parallax-Effekts entwerfen und codieren, kann es viele bewegliche Teile geben. Dies ist nicht nur bei Parallaxen der Fall, sondern auch bei anderen Interaktions-Designstücken. Planung wird zu einem wesentlichen Teil des Prozesses und noch wichtiger, wenn Sie mit einem Team arbeiten. Der Versuch, alles, was vor uns liegt, herauszufinden, wie ein Profi für die Vorhand, wird einfach nicht funktionieren, oder wenn Sie versuchen, alles magisch funktionieren zu lassen, während Sie Codierung sogar nie passiert sind oder es dauert viel länger, als wenn Sie nur planen am Anfang. Wie planen Sie? Das ist eine tolle Frage. Ich plane auf zwei Arten, und ich mache beide in mehreren Phasen eines Projekts. Die erste Methode ist, aufzuschreiben, was ich passieren möchte. Ich beginne damit, ziemlich breit und beschreibend zu schreiben. Mein erstes Stück des Schreibens könnte etwa so aussehen. Wenn der Benutzer die Maus bewegt, werden die Elemente verschoben. Ich würde dann zu so etwas gehen. Wenn der Benutzer seine Maus von links nach rechts bewegt, die Elemente von rechts nach links verschoben. Dann ändere ich es erneut, da der Benutzer seine Maus von links nach rechts bewegt, bewegen sich die Elemente umgekehrt von rechts nach links in einem Verhältnis. Wenn der Benutzer dann seine Maus von links nach rechts bewegt, bewegt sich jedes Element umgekehrt von rechts nach links mit einer Geschwindigkeit relativ zu seiner Entfernung vom Benutzer, Sie können sehen, wie ich hier mehr und mehr Details zu meiner Beschreibung hinzufüge. Endlich wird es so enden. der Benutzer die Maus horizontal bewegt, bewegt sich jedes Element umgekehrt mit einer Geschwindigkeit relativ zu seiner Entfernung vom Benutzer entfernt. Das mag ein wenig komplex klingen, und deshalb habe ich nicht angefangen, komplex zu schreiben , weil das ein bisschen verrückt ist. Diese Beschreibung am Ende ist mein Endziel. Ich beginne damit, und Sie können sehen, wie sich im Laufe der Zeit verändert hat, je mehr ich aus meinem Kopf kam, desto detaillierter konnte ich dann sein, ich machte es prägnant und etwas generischer. Mein nächster Schritt besteht darin, mein Ziel in überschaubare Stücke zu zerlegen. Wenn die Dinge zusammengebrochen sind, scheint alles einfacher und relativ einfach. Diese Brocken sind Teil meines Aktionsplans. Wichtig zu verstehen ist, dass ich nicht den gesamten Aktionsplan auf einmal erstellt habe. Mein nächstes Stück Schreiben könnte in etwa so aussehen. Verfolgen Sie die Maus X mit Maus verschieben Ereignisse. Verglichen Maus X mit Bildschirmbreite, um einen Bruchteil zu erstellen. Verbinden Sie diesen Bruchteil mit einem X-Bereich der Elemente. Tun Sie dies für jedes Element und wenden Sie eine Tiefe an. Dann könnte ich es für jeden Punkt noch weiter zerlegen. Die Track-Maus X mit Maus bewegen Ereignisse, kann ich einige Notizen wie diese machen. Eins, fügen Sie Ereignis-Listener, zwei, erstellen Sie eine Namensfunktion, Handle Mausbewegung, vielleicht drei, erstellen Sie eine Variable, die Ereignis X innerhalb der Handle Mausbewegung speichert. Da gehen wir, Sie können sehen, wie ich das alles schreibe. Ich muss nicht alles auf einmal machen. Was am Ende passiert ist, dass diese Zeilen Kommentare in Ihrem JavaScript werden können, denen Sie dann wirklich einfach folgen können. Da wie Ihre Zeiger in einem Labyrinth, wenn Sie besser und besser werden, können Sie feststellen, dass Sie Teile der Planung überspringen. Das ist vollkommen in Ordnung. Was wirklich wichtig ist, sich daran zu erinnern, ist, dass jedem Zeitpunkt oder zu einem beliebigen Zeitpunkt im Prozess einen Plan erstellen können. Schreiben Sie einfach, was Sie in Punktform passieren möchten, entweder auf einem Javascript-Kommentar oder auf einem Blatt Papier auf einem normalen Textdokument. Ich habe die meiste Zeit ein massives Pad auf meinem Tisch, so dass ich einfach schnell Notizen machen kann, ich kann schnell planen. Teilen Sie auf, was auf Englisch geschehen muss oder welche Sprache Sie am besten sprechen, und schreiben Sie dann den Code dafür. Die zweite Art der Planung, die ich tue, ist Putting Stift auf Papier oder Bleistift auf iPad. Ich zeichne Dinge, ich arbeite Dinge aus, ich zeichne die Dokumente, ich zeichne mit einem Bildschirm Leinwand, während ich mit einer Maus zeichne, ich zeichne Elemente. Ich zeichne alles, was ich kann, und dann fange ich an, gefälschte Werte an Orten zu setzen. Meine Maus X und meine Bildschirmbreite, mein Ausgabebereich, und dann fange ich an, Berechnungen zu machen. Ich vertrete Unbekannte mit Ys und Bs und Xs. Ich mache die Berechnungen lesbar und vorzugsweise in JavaScript oder etwas, das leicht in JavaScript übertragen werden kann. Dann versuche ich die gleiche Zeichnung mit verschiedenen Werten, ich sehe, welche Ergebnisse ich bekomme und versuche dann die Interaktion in verschiedenen Phasen, wenn meine Maus ganz auf der linken Seite ist, wenn meine Maus in der Mitte ist, wenn meine Maus ganz auf der rechten Seite. Wenn Sie dann denken, dass Sie wissen, was los ist, ersetzen Sie die erstellten Werte durch Variablennamen. Diese Planungsskizzen sind golden, es ist, als hätten Sie diese Momente der Brillanz, diese klaren Momente, in denen Sie nur ein Genie sind, die Sie aufzeichnen. Sie setzen Stift auf Papier, Sie machen alle Ihre Berechnungen, und dann verwenden Sie eine später, wo Sie nicht sind, Gefühle sind brillant. Es gibt eine sehr kleine Chance, dass Sie sich an all diese Berechnungen in Ihrem Kopf erinnern können , während Sie codieren. Ich finde es am besten, es aufzuschreiben und dann in Code zu übertragen. Was an der Planung großartig ist, ist, dass es nicht perfekt sein muss und Sie nicht alles auf einmal tun müssen. Sie können schnell darauf iterieren. Sie können den Menschen zeigen, Sie können auf sie verbessern und Sie können wieder in sie springen, wann immer Sie stecken bleiben. Sie können eine Mischung aus Schreiben und Zeichnen verwenden, wann immer Sie wollen. 10. Scroll-Position erfassen: Jetzt, da wir unsere erste Parallax-Erfahrung geschaffen haben, können wir eine scrollende Parallax-Erfahrung schaffen. Das macht wirklich Spaß zu kreieren und die meisten Menschen sind total fasziniert von ihnen. Was wollen wir aber erreichen? Das erste, was ich erreichen möchte, ist, dass ich einen Scrolly-Eingabefraktionswert erstellen möchte, mit dem ich meine Ausgabewerte verbinden kann. Das zweite, was ich erreichen möchte, ist, ich dann möchte, dass jedes meiner Elemente in die entgegengesetzte Richtung zur Scrollrichtung bewegt , aber proportional zu ihrer Tiefe. Je weiter ein Element entfernt ist, desto schneller bewegt es sich diesmal, aber in die entgegengesetzte Richtung zur Bildlaufrichtung. Das einzige, worauf wir achten müssen, bevor wir in Code springen, ist, dass das Maximum, das wir scrollen können, tatsächlich die Dokumenthöhe minus die Fensterhöhe ist. wir uns daran, wenn wir unseren Scrolly-Eingabeendwert einrichten. Lass uns in den Code springen. Lassen Sie uns beginnen, indem Sie unsere Dokumente, scrollen Dokument. Lassen Sie uns hier in unser HTML springen. Wir können einige Dinge namens Parallax-Container erstellen. Da gehen wir. Ich werde diesen Code nur einrücken. Lassen Sie uns das einfügen und wir können Parallax-Container wie so kopieren und einfügen. Das ist gut. Dann können wir diesem eine Alt-Klasse geben und diese eine Alt-Klasse, so dass wir die Hintergrundfarben ändern können. Dann im CSS können wir dies einfügen und ihm eine Höhe oder eine min Höhen von 100 VH geben, das ist 100 Betrachterhöhe. Wir können sagen.parallax-container.alt und wir können dies eine Hintergrundfarbe geben. Was sollen wir wählen? Gehen wir nach Vermögenswerten. Lassen Sie uns ein wirklich hellgrün wählen vielleicht, vielleicht ein viel dunkleres Grün oder wir könnten sogar für Array wie Pink gehen. Los geht's. Fügen wir das hier drüben ein. Jetzt, wenn wir nach unten scrollen, gibt es grüne und rosa divs. Zeigt uns nur, wie viel wir scrollen. Wir haben auch diese Bildlaufleiste auf der rechten Seite. Da gehen wir. Jetzt haben wir ein Dokument, das scrollt. Wir können auch alle diese Parallax-Elemente in zweiten Parallax-Container hinzufügen. Das bedeutet, dass, wenn wir nach unten scrollen, wo sind sie? Ich habe keine Ahnung. Das liegt daran, dass wir keine Position relativ auf unseren Parallax-Container gesetzt haben. Wenn wir nach unten scrollen, gehen wir. Das sieht wirklich schön aus. Die Farben funktionieren wirklich gut zusammen. Wir haben gerade ein und zwei Divs mit unseren Blättern in. Jetzt haben wir unsere Mousemove funktioniert. Ich werde das vorerst aussagen. Anstatt auf eine Mausbewegung zu hören, das eigentlich nicht mehr funktionieren. Wir werden mit einem Ereignis-Listener arbeiten, der auf ein Scroll-Ereignis wartet. Wie machen wir das? Nun, anstatt auf eine Mausbewegung im Fenster zu hören, werden wir document.AddEventListener sagen und wir werden für ein Scroll-Ereignis hören und wir sagen handlescroll. Dann für unsere Handlescroll ist eine Funktion. All dies sollte ziemlich vertraut aussehen. Lassen Sie uns einfach etwas protokollieren, um sicherzustellen, dass dies tatsächlich funktioniert. Scrollen. Öffnen wir unsere Konsole. Während wir scrollen, werden wir eine Reihe von Scrollen passieren. Woher wissen wir nun, wie viel wir tatsächlich scrollen? Das ist eine wirklich gute Frage. Die Art und Weise, wie wir das tun werden, ist, dass wir var scrollamt gleich arbeiten und wir gehen für document.documentElement.scrollTop. Mal sehen, ob das funktioniert. Wir werden ScrollAmt und ScrollAmt sagen. Wir öffnen unsere Konsole wieder. Lassen Sie uns das klar und wie wir scrollen, hier gehen wir. Unser ScrollAmt kommt durch. Die neueste ist Null. Wenn wir den ganzen Weg nach unten gehen, sind es 951. Das sind unsere Scroll-Beträge. Vielleicht können wir jetzt herausfinden, was unsere maximale Scrollmenge ist. Wie machen wir das? Nun, wir werden dieses Document.DocumentElement verwenden. Wir werden sagen, ScrollMax entspricht document.DocumentElement.scrollHeight. Wir werden es so vergleichen. Da gehen wir. Scrollen wir das. Die Scroll-Max ist 1268. Das klappt nicht wirklich, oder? Aber denken Sie daran, dass die Höhe des Dokuments nicht die gleiche wie die Scroll-Menge sein wird , weil wir unsere Fensterhöhe immer noch auf eine unzählige haben. Lassen Sie uns minus window.innerHeight tun. Scrollen wir nochmal, 951, 951. Da gehen wir. Wir haben unseren konstanten Wert, wir haben unseren Endwert. Jetzt können wir diese Werte nehmen und eine Eingabe von ihnen erstellen. Ich werde sie vorerst kopieren. Geben wir uns einfach ein bisschen mehr Platz. Wir werden zu unseren Eingabewerten gehen und wir sagen Scrollly und wir werden hier ein neues Objekt erstellen und wir sagen, beginnen. Unser Start wird Null sein. Wir können dies auf einen Wert neben Null ändern. Aber in diesem Fall möchten wir die Bildlaufposition unseres gesamten Dokuments verfolgen. Wir werden dann einen Endwert haben, der sein wird, unser Scroll max. Nun, das alles. Jetzt ist das wirklich, wirklich lang. Was wir hier tun können, ist sagen, var und wir können sagen, HTML gleich document.documentElements. Da gehen wir. Dann können wir das und das ersetzen. Unser Endwert, das wird es sein. Dann unser ScrollAmt, das wird unser aktueller sein. können wir später etwas klären. Strom wird am Anfang Null sein. Wir brauchen auch unsere Fraktion und unser Sortiment. Wir trainieren unseren Bruchteil ein wenig später, und wir werden unser Sortiment direkt unter dem Eingang ausarbeiten. Lassen Sie uns für Input.scrolly.Range gleich gehen, und dann können wir einfach kopieren und einfügen. scrolly.end minus scrolly.Start. Was uns unser Sortiment geben wird. Was nun wirklich wichtig ist, ist, dass er sich ändert, sobald sich der Endwert des Scrollys ändert und sich der Endwert ändert, wenn sich die Größe des Browsers ändert. Lassen Sie uns diesen Wert aktualisieren. Wenn wir auf die Größenänderung gehen, die MouseX, MouseY. Lass uns gehen und setzen.Scrolly.end. Was war unser Endwert? Scrollen wir hier nach oben. Kopieren Sie diese und fügen Sie sie ein. Scrollen Sie den ganzen Weg nach unten. Unser Endwert wird aktualisiert und dann wird auch unser Bereichswert aktualisiert. Lassen Sie uns die Scrolly-Bereichsberechnung kopieren und fügen Sie sie hier ein. Jetzt sehen wir HandlesCrolly. Wir haben das Scrollamt, das jetzt eigentlich unsere Input.scrolly.current sein wird. Dies wird unser HTML.ScrollTop sein. Dann ist unsere Input.scrolly.Fraction wird was sein? In diesem Fall wird es unsere aktuelle geteilt durch das Maximum sein , also input.scrolly.end. Aber denken Sie daran, unsere vorherigen Berechnungen, wenn Sie nur ein wenig höher schauen hier, Update-Eingänge, ist unsere Eingabe-Maus-Fraktion ist unser mousex.Current minus unsere mousex.Start geteilt durch unsere Eingabe mouseX Bereich. Wir werden dieses Format kopieren. Lass uns hier runter gehen, scrollen und wir werden kopieren und einfügen. Dies ist nur genauer, sobald wir beginnen unser Dokument von einer Position ungleich Null zu einer Position zu verfolgen , die nicht die Gesamthöhe unseres Dokuments ist, benötigen wir diese, um den tatsächlichen Bruch zu berechnen. Unsere Bildlauf.Fraktion wird die Bildlauf.Aktuelle minus die Bildlauf.Start, die in diesem Fall ist nur Null und wir werden durch die Bildlauf.Range, die in diesem Fall wird auch die Scrolly-Endwert zu dividieren . Das ist die Handhabung der Schriftrolle. Aber jetzt bist du vielleicht wie, na ja, warum ist der andere innerhalb von Update-Eingängen mit dem da drin? Natürlich können wir das. Lass uns das machen. Lassen Sie uns kopieren und einfügen, aktualisieren Sie Eingaben in unsere Handlescroll. Da gehen wir. Wir schneiden das einfach aus, nehmen das alles raus, und wir werden das in unsere Eingaben geben. Da gehen wir. Unser Input kommt jetzt durch. Wie verbinden wir es jetzt mit einem Ausgang? Wir werden unsere Ergebnisse aktualisieren. Im Moment werde ich nur unsere Ausgaben auskommentieren, so dass überhaupt nichts funktioniert. Es funktioniert sowieso nicht. Was wir hier tun können, ist, dass wir einfach unsere Y-Position aktualisieren können. Unser Output.Y.current ist unser Output.Y.end abzüglich unserer Eingabe. Wir können scrolly.Fraktion gehen, multipliziert mit unserem output.range. Mal sehen, ob das funktioniert. Wenn wir scrollen, passiert überhaupt etwas? Merkst du irgendetwas? Nein, ich merke nicht zu viel. hier etwas passiert? Nun, was ist mit Update-Ausgaben? Die Y.currents funktioniert? Ja, es sollte funktionieren, aber denken Sie daran, dass wir Aktualisierungsausgänge aufrufen müssen. Kopieren wir diese oder lassen Sie uns Aktualisierungsausgaben kopieren und jedes Parallax-Element aktualisieren. Lassen Sie es uns sagen, nachdem wir das Update aufrufen und Funktion in unseren HandlesCroll-Ereignishandler setzen . Wir können dies auch einfach schneiden und vielleicht nur hier setzen , damit es unserem HandleMouseMove-Event-Handler etwas näher ist. Da gehen wir. Mal sehen, was passiert, wenn wir scrollen. Es passiert Dinge. Sie können sehen, dass die Parallaxe sicherlich funktioniert. Wir haben etwas Unschärfe los, wir haben eine gewisse Skalierung, und es hängt alles mit unserer Scroll-Position zusammen. Wir haben das erreicht, was wir in diesem Video gemacht haben. Wir haben einen Eingang mit einer Ausgabe über unsere Scroll-Position verbunden. Es sieht wirklich gut aus. Es gibt jedoch ein paar Probleme damit bisher, wir werden dies im nächsten Video abdecken. Wir sehen uns dort. 11. Eindeutige Input-Werte für jedes Element: Unsere Parallax-Erfahrung auf dem letzten Video sieht ziemlich gut aus. Aber wenn man genau hinsieht, stimmt etwas nicht ganz. Ich zeig es dir. Wenn ich den ganzen Weg bis zum Ende meines Dokuments gehe und diese Update-Eingaben auskommentiere und Ausgabefunktionen aktualisiere, und ich höre auf, auf die Scroll-Ereignisse zu hören. Sie werden sehen, dass alle meine Blätter oder alle meine Parallax-Gegenstände in der Mitte der Seite zentriert sind. Dann, wenn ich ein wenig nach unten scrolle, so sind diese. Nun, wenn ich wieder in meinem Code hier und meinem Code hier drüben reinkomme, werden Sie sehen, dass alle Parallax-Elemente unten auf der Seite sind. Warum ist das? Nun, es wird zwei Gründe geben, warum das passiert. Der erste Grund ist, dass, wenn wir nach oben zu unserer output.y aktuellen Berechnung scrollen, werden Sie sehen, dass wir mit dem y.end beginnen. Grundsätzlich sagen wir, lasst uns mit dem y.end beginnen und dann, wenn der Bruchwert zunimmt, so dass wir näher und näher an den Startwert kommen. Stattdessen wollen wir es sagen, beginnen wir mit dem Startwert und wenn der Bruchwert zunimmt, kommen wir näher und näher an den Endwert. Das sieht ein bisschen besser aus, und jetzt, wenn wir ein wenig mehr nach oben scrollen, werden wir sehen, dass, wenn wir unseren Startwert definieren, wir tatsächlich mit minus 150 begonnen haben. Wir werden das bei Null beginnen. Jetzt sollte alles genau an der richtigen Stelle beginnen. Wenn wir nach unten scrollen, werden wir sehen, dass diese Gegenstände in diesem rosa Behälter nicht an ihrer ursprünglichen Stelle beginnen. Das ist alles, was wir in diesem Video erreichen wollen. Wenn wir zu einem Element kommen oder wenn wir zu einem Element scrollen, möchten wir, dass es an der ursprünglichen Position ist. Der Grund dafür ist, dass sich diese Elemente basierend auf der Bildlauf-Fraktion von ganz oben nach unten bewegen . Was ich sagen möchte, ist, ich nur möchte, dass der Scrollfraktion Null hier und eins hier ist, anstatt den ganzen Weg unten und ganz oben. Ich möchte nicht, dass die Ausgaben jedes Elements auf der gesamten Dokument-Scrollposition basieren. Ich möchte, dass es darauf basiert, wann es sichtbar ist. Die Frage, die wir stellen müssen, ist, bei welcher Bildlauf-Fraktion sollte ein Element an seiner ursprünglichen Position sein? Denn im Moment sind sie nur in ihrer ursprünglichen Position, wenn der Scrollfraktion auf Null ist. Wie gehen wir das aus? Der Schlüssel liegt in unserer Aktualisierung jeder Parallax-Item-Funktion innerhalb des Items Arrays für jede Schleife. Jetzt für jedes Element werden wir tatsächlich eine eigene Eingabe erstellen, also Elementeingabe. Was wir tun könnten, ist, dass wir jede einzelne Eingabe für jedes einzelne Element hart codieren könnten, dies wird Stunden dauern. Wir werden Code verwenden, um es für uns auszuarbeiten. Jetzt, unsere Elementeingabe, werden wir YScroll haben, und in unserem YScroll werden wir einen Anfang haben und wir werden ein Ende haben. Wir werden diese Werte in einer Sekunde aktualisieren. Das nächste, was wir brauchen, ist eine Reichweite Wenn wir also hier nach oben scrollen, wo arbeiten wir eigentlich den Bereich aus? Nun, es ist Ausgabe, hier gehen wir, die Scrolly.Range, also lassen Sie uns das kopieren und bringen es hier runter. Anstatt Input.scrolly.Range zu sagen, sagen wir die iteMinput.scrolly.Range und die iteMinput.scrolly.End, abzüglich der iteMinput.scrolly.Start. Das ist wirklich wichtig. Dies bedeutet, dass wir einen Anfang und ein Ende für jedes Element angeben können. Im Moment können wir einen Wert hart codieren. Anstatt Null zu sein, könnten wir sagen, bei 450, das ist, wo ich will, dass meine Nullfraktion sein und mein Endbruchteil, ich möchte, dass es bei 800 liegt. Wenn ich 800 Pixel auf der Seite gescrollt habe, möchte ich, dass mein Bruchteil eins ist, und wenn ich 450 Pixel auf der Seite gescrollt habe, möchte ich, dass mein Bruchteil Null ist. Lassen Sie uns beginnen, einige Werte abzumelden. Was ich hier tun werde, ist, dass ich in meinen HTML gehe und ich werde eine ganze Reihe dieser divs auskommentieren, nur dass wir ein div haben, mit dem wir arbeiten können. Das bedeutet, dass wir nur einen Satz Protokolle durchkommen. Wenn ich scrolle, funktioniert das? Sieht nicht wirklich so aus, vielleicht scrollt es nicht so gut. Wir können einfach überprüfen, ob es keine Fehler gibt. Es gibt einige Fehler, also klicken wir einfach darauf. Wir werden sagen, iteminput.scroll.end, das liegt daran, dass wir Scrollly anders als YScroll geschrieben haben. Ändern wir YScroll einfach zu Scrollly, da gehen wir. Wenn wir nach unten scrollen, werden wir sehen, dass unser Blatt etwas leichte Bewegung macht. Was wir hier haben, ist, dass wir unseren Scroll-Bereich haben. Was müssen wir jetzt noch tun? Wir müssen unseren Bruchwert ermitteln. Wo erarbeiten wir unseren Bruchwert? Nun, wir klären es hier drüben. Wir haben unsere Scrolly-Fraktion, also lassen Sie uns das kopieren und einfügen, und wir sagen iteMinput.scrolly.Fraction gleich, und das ist wirklich wichtig. Wir gehen immer noch, um es von der globalen Input.scrolly.Current, die auf den Seiten Scroll basiert, aber wir werden sagen minus die iteminput.scrolly.Start, und wir werden es durch die iteminput.scrolly.Range teilen. Super wichtig. Das nächste, was wir tun müssen, ist, dass wir eine neue Ausgabe herausfinden müssen. Im Moment verwenden wir die globalen Outputs und wir machen einige Berechnungen hier. Lassen Sie uns zu unseren Ausgängen gehen, und wir werden sehen, dass Ausgabe.Strom wird hier berechnet. Also werden wir hier einfach eine neue Variable erstellen, und wir werden sagen, ob unsere ItemOutputyCurrent, weil wir bereits einen ItemOutput haben. Die Tatsache, dass wir nur einen Wert benötigen, bedeutet, dass wir kein Objekt verwenden müssen, und hier können wir outputy.Start sagen, was großartig ist, weil wir immer noch unsere outputy.Start- und Endwerte verwenden, und dann anstelle des Eingabescrolls Fraktion, werden wir für die Elementeingabe Scrollfraktion gehen. Also haben wir unseren ItemOutputyCurrent, jetzt können wir es auf unseren y Wert hier unten anwenden. Die Sache ist, dass unsere output.y.current, derzeit ein wenig ungenau ist. Wenn wir nach unten scrollen, und vielleicht können wir diese Elemente einfach wieder kommentieren. wir nach unten scrollen, können Sie es hier nicht wirklich so gut sehen, also lassen Sie uns unseren Endwert auf etwa 3.000 erhöhen. wir hier nach unten scrollen, werden Sie sehen, dass sich die Gegenstände, die weiter entfernt sind, tatsächlich ziemlich schnell bewegen. Wir wollen nicht wirklich, dass sie sich schnell bewegen oder sich schnell bewegen. Wenn wir das auf 1.000 ändern, können Sie es vielleicht ein bisschen besser sehen. Wenn ich nach unten scrolle, möchte ich nicht wirklich, dass die Elemente, die weiter entfernt sind, so erscheinen, als würden sie sich schneller bewegen. Wie wir im vorherigen Video gesagt haben, möchte ich, dass sich die Elemente, die weiter entfernt sind, schneller in die entgegengesetzte Richtung bewegen, was bedeutet, wenn ich nach unten scrolle und das Dokument nach oben bewegt, ich möchte, dass sich die Elemente, die weiter zurück sind, bewegen mit einer schnelleren Rate nach unten. Probieren wir das aus. Hier unten, wo wir unsere y-Position ausarbeiten. Anstatt mit den y-Strömen zu beginnen und den y-Strom multipliziert mit der Tiefe zu mindern, werde ich nur mit den y-Strömen beginnen und die Tiefe multiplizieren. Das bedeutet, je tiefer es ist, desto schneller wird es sich bewegen. Probieren wir das aus. Wenn ich scrolle, passiert irgendetwas? Nein. Das liegt daran, dass wir immer noch unseren Ausgabestrom verwenden. Lassen Sie uns unsere Item-Ausgabe y Strom verwenden, und dies wird pro Element sein. Da gehen wir. Wir beginnen bei einer Reichweite von 450 und enden bei einer Reichweite von 800. Nun, wenn ich mich umziehe, wirst du sehen, dass die Dinge etwas besser aussehen, und weil wir zwischen 450 und 800 scrollen, brauchen wir diesen massiven Wert hier nicht zu nutzen, also können wir das wieder auf 300 ändern. Wie wir scrollen, da gehen wir. Die Dinge sehen ein bisschen besser aus. Wenn wir das auf 500 ändern, können wir vielleicht ein bisschen mehr sehen. Während wir scrollen, werden Sie sehen, dass das oberste Element tatsächlich mit der Seite geht, während es nach oben scrollt. Dann bewegen sich die Gegenstände, die weiter entfernt sind , tatsächlich nach unten, während wir nach unten scrollen. Die Seite geht nach oben, wir scrollen nach unten und die Elemente, die weiter entfernt sind, scrollen nach unten, bewegen sich mit der gleichen Geschwindigkeit oder schneller als Gegenstände, die näher an uns sind. Es ist ein bisschen komplex. Jetzt gehen wir zurück zu unserer Schleife. Was hier passiert ist, ist, dass wir den Anfang und das Ende festlegen. Ich werde diese beiden Abschnitte noch einmal auskommentieren. Wir haben nur ein Blatt oder einen Parallaxen-Artikel. Wir können hier tatsächlich einige Konsolenprotokollierung durchführen. Ich werde das kopieren. Ich werde dann zu unserem Input gehen. Ich werde dann unsere aktuelle Schriftrolle protokollieren. Gehen wir zum Scrollen und dann kopiere ich das und füge es ein. Öffnen wir eine Konsole und dann wollen wir die Tiefe nicht mehr. Aber was wir wollen, ist, dass wir den Bruchteil wollen. Lassen Sie uns das einloggen. Da gehen wir. Wenn wir nach diesem Artikel scrollen, werden Sie sehen, dass der Bruch ein negatives 1,26 ist. Seltsam? Aber sieh dir das an. wir scrollen und Sie sehen, dass die Bildlaufposition zunimmt, werden Sie sehen, dass der Bruchwert jetzt wirklich nahe ist. Wenn wir auf einen Wert von 450 kommen, gehen wir. Der Bruchteil ist Null. Wenn Sie einen Wert von 800 erreichen, sehen Sie, dass der Bruch zu eins oder knapp über eins geht. Dies bedeutet, dass es sich zwischen dem Start- und Endwert bewegt , den wir in unserer Ausgabe angegeben haben. Als Bewegung zwischen Null und 500, zwischen einem Bereich oder einem Scrollbereich von 450 und 800. Das ist super, super cool. Jetzt möchten wir nicht, dass jedes einzelne Element bei 450 beginnt und bei 800 endet. Wir wollen anfangen, wo es sichtbar ist und enden, wenn es nicht sichtbar ist. Wie machen wir das? Nun, einer der besten Möglichkeiten, wie wir dies tun können, ist sagen, item.offsetParents.OffsetTop. Ein Offset Eltern ist wirklich wichtig. In unserem CSS werden Sie sehen, dass unsere Position relativ deklariert ist. Dies bedeutet, dass dies ein Offset Elternteil ist. Es bedeutet, dass alles, was eine Position neben statischen hat, ein Offset Eltern ist. In unserem Parallax-Container haben wir unsere Parallax-Artikel. Ein Parallax-Artikel, wird sagen: „Wer sind meine versetzten Eltern?“ und der Parallaxenbehälter wird sagen: „Ich bin es.“ Dann werden wir den Offset-Oberteil ausarbeiten, den Abstand vom Parallax-Container zum oberen Teil des Dokuments, und das wird unser oberster Wert sein, der ziemlich cool ist. Die nächste Sache ist, am Ende zu sitzen. Wir nehmen das und wir werden es zu unserem Ende machen, aber wir werden das window.innerHeight hinzufügen, so. Wir werden sagen, wir werden bei der OffsetParents.OffsetTop beginnen. Der Abstand zwischen den übergeordneten Versatz und der Oberseite des Dokuments und dem Ende wird dieser Abstand zwischen der Oberseite der Eltern und der Oberseite des Dokuments plus der window.innerHeight sein. Ziemlich cool. Sieh dir das an. Während ich scrollen, sollte ich zu hier kommen, was ein Bruchteil von Null ist, Scroll-Position von 319. Hier wird unser Parallax-Artikel sein. Schließen wir das, und wir machen genau das Gleiche hier. Sieh dir das an. Ziemlich cool. Wenn wir einfach rückgängig machen und rückgängig machen, im Grunde alle unsere Parallax-Elemente kommentieren. Jetzt fängt es hier in der Mitte an. wir nach unten scrollen, werden Sie sehen, dass, wenn wir diese Position genau hier erreichen, hey, es wird auch in der Mitte genau dort sein , wo wir es ursprünglich eingestellt haben, was fantastisch ist. Wenn Sie OffsetParents.OffsetTop nicht verwenden möchten, ist das in Ordnung. Aber was wirklich wichtig ist, ist, dass Sie etwas verwenden , das seine Position nicht ändert, denn wenn Sie die Start- und Endwerte dynamisch berechnen und Sie es von etwas stützen, das sein OffsetTop ändert, Dinge können wirklich, wirklich chaotisch und verwirrend wirklich schnell werden. Auf diese Weise, wenn wir nur einen Haufen dieses Codes kopieren und einfügen und ihn in unseren nächsten Parallax-Container und unseren nächsten Parallax-Container einfügen müssen. Wir können einen Haufen dieser Werte ändern. Wir können dies von Anlage 1 auf vielleicht 60 und 61 und 67 ändern. Gehen wir hier runter, ich ändere das auf 2-1 und auf Null. Wir ändern das auf 11-21-41. Wenn wir nach unten scrollen, lassen Sie uns sehen, was passiert. In Ordnung. Sie alle erscheinen an genau der richtigen Stelle, wie wir den Offset-Elternteil am oberen Rand des Bildschirms bekommen , was fantastisch ist. Das ist wirklich cool, und ich würde Sie ermutigen, das OffsetParents.OffsetTop zu verwenden , um Dinge genau dort zu sein, wo Sie sie ursprünglich eingestellt haben. Natürlich müssen Sie keine Skalierung verwenden und keine Unschärfe verwenden. Sie lassen die Dinge nur ein bisschen realistischer aussehen. Das ist im Grunde alles, was Sie über das Scrollen Parallaxe und die Verwendung des Parallax-Effekts mit einer Maus bewegen Ereignisse wissen müssen. Gut gemacht. Ich werde Ihnen noch ein paar Dinge zeigen, bevor ich tatsächlich eine ganze Erfahrung programmiere, das sind nicht nur Beispiele. Süß, wir sehen uns im nächsten Video. 12. Maus- und Scroll-Position verwenden: Vielleicht fragen Sie sich, ob Sie die Mausposition und die Bildlaufposition zusammen verwenden können , um den Parallax-Effekt zu ändern. Die Antwort ist, ja. In diesem Video werde ich Ihnen zeigen, wie. Wenn wir den ganzen Weg nach unten scrollen, werden wir unseren Code entkommentieren, zu dem wir kommentiert haben. Wir sagen im Grunde, „Lasst uns wieder auf das Move-Ereignis der Maus hören“. Zum Glück haben wir keines unserer Codes entfernt. Wir müssen nur hierher ziehen. Wir können das einfach wieder einkommentieren. Aber unser y.current wurde geändert, damit es für die Scroll-Position funktioniert. Was wir tun werden ist, wir gehen hier hoch und wir werden einen neuen Wert setzen. Lassen Sie uns ein Objekt wie so einfügen, und ich werde nur den Start- und Endstrom von x kopieren, und das y, das wir Scrollly aufrufen werden. Jetzt müssen wir eine Reihe von Werten erstellen und kopieren und einfügen , die die y-Position in unserem Code verwendet haben. Fangen wir hier drüben an. Wir können Scrolly sagen, und wir werden das einfach aktualisieren. Dann habe ich eine Reihe von Eingaben, was großartig ist. Dann unsere Ausgabe hier drüben, können wir Eingabe Scrollly, Output.Scrollly Bereich aktualisieren. Dann haben wir unsere Output.Scrollly Start, Output.Scrollly Bereich. Ich glaube, das war's. Fantastisch. Lassen Sie uns einfach überprüfen, ob sich das bewegt. Sie können sehen, dass dies auf unsere Mausbewegung auf der X-Achse reagiert und es reagiert auf unsere Schriftrolle auf der Y-Achse. Jetzt möchte ich passieren, wenn ich nach oben und unten scrolle, und wenn ich meine Maus nach oben und unten bewege, möchte ich, dass die Y-Achse oder die vertikale Achse auf beide reagiert. Wie machen wir das? Der Schlüssel liegt in diesem Code genau hier. Dieses Stück Code, das ich gerade hervorgehoben habe, ist das unser Scroll-Code. Das nächste, was ich hier hinzufügen möchte, ist ein Code, den wir im vorherigen Video entfernt haben. Ich werde sagen output.y.current, und vielleicht können Sie einfach sicherstellen, dass dies alles verspannt ist , so dass wir wissen, dass diese getrennt sind. Output.y.current, ich werde minus sagen, und Klammer dies wieder, output.y.current multipliziert mit Tiefe. Wir haben unseren Scroll-Wert hier drüben, und dann haben wir unseren Mauswert hier drüben, und wir fügen sie zusammen. Sieh dir das an. Jetzt, wie ich scrolle, sieht ziemlich gut aus. Schön. Manchmal greifen diese Parallaxen-Gegenstände auf die anderen Parallax-Gegenständen Bereiche ein. Eine wirklich einfache Möglichkeit, dies zu beheben, besteht darin, zu Ihrem CSS zu gehen, und wir können Parallax-Container sagen, wir können dies einfach so einstellen, dass es versteckt ist. Genau so, wenn wir scrollen, versteckt es sich einfach hinter. Da gehen wir. So verwenden Sie Mausposition und Bildlaufposition im selben Dokument. Es ist wirklich cool, wirklich Spaß, beide gleichzeitig zu benutzen. 13. Der Code der anderen: Lassen Sie uns über die Verwendung von Code sprechen, den Sie nicht geschrieben haben. Dies könnte ein Plugin verwenden, einen Code verwenden, den Sie aus dem Internet kopiert haben, oder etwas wie jQuery verwenden. Viele Plugins und Frameworks sind einfach erstaunlich. Sie sind von super cleveren Leuten gemacht und es macht unser Leben viel einfacher. Es ist, als ob Sie einen Teil Ihrer Codierung an jemand anderen auslagern. Es gibt Plugins für Entwickler und Plugins für die breite Öffentlichkeit gemacht. Plugins für Entwickler machen das Programmieren einfacher und standardisierter. Sie neigen auch dazu, sich auf bestimmte Teile des Prozesses zu konzentrieren und lassen Sie den Rest zu handhaben. Plugins, die für die breite Öffentlichkeit gemacht werden, oder Plugins, die sagen: „Wir machen es alles!“ und in der Regel ziemlich skeptisch, und Sie müssen möglicherweise stundenlang damit verbringen, ihre Dokumentation und Richtlinien zu lesen , um alles zum Laufen zu bringen. Der Nachteil der meisten Frameworks und Plugins ist, dass Sie viel Zeit nicht brauchen, um alles zu nutzen, was es zu bieten hat. Dies ist die Äquivalenz des Kaufs eines Werkzeugsatzes und nur mit einem Hammer. Wenn das Plugin, das Sie verwenden, nicht genau das tut, was Sie wollen, dann stecken Sie fest. Sie müssen von Grund auf neu beginnen. Alles, was Sie tun müssen, um einige Hack-Arbeit zu machen, die oft viel mehr Zeit in Anspruch nimmt als gute Planung und handgeschriebenen Code. Dann gibt es Code, der von anderen Leuten geschrieben wurde. Sie können diese Art von Code auf Medium finden, in Blogbeiträgen, auf Stack Overflow, wo auch immer. Manchmal ist dieser Code fantastisch, nichts falsch daran, es ist erstaunlich. Andere Male ist es überhaupt nicht toll. Die beste Art von Code für Sie ist der Code, den Sie verstehen, und Sie stellen sicher, dass er für Ihr Projekt und Ihre Browser funktioniert, die Sie unterstützen möchten. 14. Wie alles zusammenkommt: Ich habe Ihnen eine Reihe von Sachen gezeigt, viele über Eingänge, Ausgänge und den Parallax-Effekt. Jetzt bist du dran, etwas zu erschaffen. sich nicht unter Druck, eine große Website zu erstellen , indem Sie alles, was Sie in der Klasse gelernt haben, verwenden. Nehmen Sie Teile von dem, was ich Ihnen gezeigt habe, und machen Sie ein kleines Projekt oder machen Sie ein paar kleine Projekte, oder arbeiten Sie einfach täglich daran. Wenn du bereit bist, es mit deiner Mutter, mit der Welt und mit uns zu teilen , dann schicke einen Link von etwas, das du gemacht hast. Es kann auf CodePen sein oder es könnte mit Surge, GitHub Pages oder sogar Ihrer eigenen Website gehostet werden . Wenn Sie Hilfe benötigen, denken Sie daran, einen Link zu Ihrem Code zu teilen. Im Rest dieses Videos werde ich ein eigenes kleines Projekt mit ein paar Dingen erstellen , die ich in der Klasse gelehrt habe. Ich habe das eingeschlossen, um dir zu zeigen, dass ich nicht perfekt bin. Entwicklung ist hart. Du wirst sehen, dass ich Fehler gemacht habe und dass ich manchmal ziemlich wichtige Dinge vergesse. Aber ich hoffe, das zeigt euch, wie echte Entwicklung geschieht und ich hoffe, das inspiriert euch zu kreieren, zu spielen und zu experimentieren, ohne den Druck, perfekt zu sein. Ich werde einen kurzen Blick in meine Planung werfen und was ich habe ist ein Behälter mit einer Reihe von verschiedenen Blättern darin. All diese Blätter werden Parallaxe sein. Sie werden unterschiedliche Tiefen haben. Sie werden manchmal etwas verschwommen sein, aber sie werden nicht skaliert werden. Sie werden vielleicht eine zufällige Breite und Höhe haben, und jedes einzelne Blatt wird zufällig von JavaScript generiert werden, weil ich nicht das Gefühl habe, dass viele Blätter in meinem HTML und ich definitiv nicht Styling sie. Sie werden eine zufällige Rotation, eine zufällige Unschärfe oder eine zufällige Tiefe haben , und sie werden alle Parallaxe sein. Dann oben auf diesem Container wird es eine Parallaxen-Pflanzen mit E-Mail-Eingängen und einem Anmelde-Button geben, und das wird es sein. Lass uns knacken. Was ich habe, ist, dass ich ein paar Farbwerte habe, die ich wirklich mag. Fangen wir einfach mit dieser Leiche an. Ich will einen dunklen Körper, also lass uns vielleicht für schwarz gehen, bgc, kann schwarz sein und auch werde ich einen Spielraum auf Nullen setzen. Es gibt keinen Spielraum um meinen Körper. Lassen Sie uns ein Beispiel bekommen, Blatt gehen und seine von einem Parallax-Container. In meinem Parallax-Container möchte ich einen Parallax-Artikel, und dann könnte ich hier ein Bild haben, aber ich werde das Bild tatsächlich auf den Hintergrund stellen. Lass uns for.leaf gehen. Dann wird es ein zufälliges Hintergrundbild haben. Aber wir werden das alles in CSS, Parallax-Artikel und Parallax-Container tun. Lassen Sie diese in mein CSS kopieren. So wie so. Dies wird eine Breite von 100 vh und dann Höhe von 100 vh haben, meine Breite wäre eigentlich ein 100 vw. So 100 vw, ein 100 vh für meinen Parallax-Container an Position des relativen. Dann wird mein Parallax-Artikel an der Position absolut sein. Dann für jetzt können wir eine Breite von 300 Pixel, Höhe von 300 Pixel, und wir können einen Rand oben von minus 150 Pixel haben. Nein, ich glaube nicht, dass wir das brauchen, wir brauchen nur das. Wir haben unsere Position, wir haben unsere Breite, wir haben unsere Höhe. Was brauchen wir als Nächstes? Position Absoluten, vielleicht können Sie einfach sagen, Top von 50 Prozent und links von 50 Prozent. Oben, linke Breite, Höhe. Gehen wir für unser Blatt und das kann eine Breite von 100 Prozent und eine Höhe von 100 Prozent haben . Es kann einen Hintergrund haben, und der Hintergrund wird eine URL sein. Eines der Vermögenswerte wird eines dieser Blätter sein. Lassen Sie uns einfach dieses kopieren, fügen Sie es dort ein , und es wird sagen, zentriert keine Wiederholungen und dann kann die Hintergrundfarbe enthalten sein. Das gefällt mir schon. Lassen Sie uns einfach überprüfen, ob dies tatsächlich das ist, was wir wollen. Lassen Sie uns für eine Hintergrundfarbe von Gelb gehen. Ja, das sieht cool aus und dann mein Parallax-Artikel, Top 50 Prozent. Da gehen wir. Das ist cool. Wir werden den oberen und linken Rand jedes einzelnen Artikels zufällig bestimmen. Sie werden alle etwa 300 Pixel hoch und breit sein. Wir können das ändern, um sie größer und kleiner zu machen. Du kannst das wegnehmen. Nun, lasst uns in etwas Javascript kommen, aber was ich hier tun möchte, nun, ich möchte alle meine Blätter einrichten. Was ich hier tun werde, ist, dass ich zufällig eine Reihe verschiedener Blätter und Flecken erzeugen werde , was auch immer. Lassen Sie uns für eine Reihe von Argumenten gehen. Lass uns etwas tun. Lassen Sie uns gehen var i ist gleich 0. Dann werde ich sagen, während ich kleiner ist als, sagen wir 10 für jetzt, dann werde ich sagen, i plus plus, was bedeutet, dass es an Wert zunimmt. Vielleicht kannst du das einfach schließen, das ist nicht so sehr ärgerlich, wie wir tippen. Was möchte ich da drinnen tun? Um einige Kommentare zu schreiben. Nun, zuerst möchte ich ein neues Element erstellen, neues Blatt für Innenelemente erstellen dann Element zum Container hinzufügen. Danach möchte ich zufällige Breite, Höhe, Tiefe sagen. Was will ich sonst noch, Rotation, Hintergrundbild. Stellen Sie dann die Unschärfe auf Tiefe ein. Das sieht ziemlich gut aus. Was ich hier tun werde, ist schnell eine ID auf dieses div zu setzen und es wird Parallax-Container sein. Ich möchte auch die Klassennamen hinzufügen. Versuchen wir es. Was ich hier tun möchte, ist sagen, var parallax Container entspricht Dokument dot get element by Id und dies wird mein Parallax-Container sein. Erstellen Sie ein neues Element mit einem Parallax-Element-Klassennamen. Lassen Sie uns für Dokument Punkt erstellen Elemente gehen, und ich möchte ein div sein und wir sagen var Element. Dann geben wir diesem Element einen Klassennamen. Wir werden das Gleiche tun, also erstellen wir ein Blatt und sagen, das ist ein Blatt. Dann werden wir das Blatt zu den Elementen hinzufügen, so dass Element Punkt untergeordnetes Blatt anhängen und Element hinzufügen, um zu enthalten. Parallax Container Punkt hinzufügen Kind anhängen und wir werden in Artikel setzen. Mal sehen, ob das jetzt funktioniert. Ich habe zwei hier. Ich habe hier ein paar Blätter, das ist fantastisch. Das nächste, was ich tun möchte, ist nur doppelt zu überprüfen, ob diese alle tatsächlich absolut positioniert sind . Sieht aus, als sollten sie es sein. Lassen Sie uns einfach mit der rechten Maustaste klicken und das Blatt inspizieren. Alle Blätter werden dem Parallaxenbehälter hinzugefügt und es gibt nur einen Parallaxen-Artikel. Sagen Element erstellen, das ein Element Dokument Punkt Element Element erstellen div ist, ist der Element-Klassenname Blatt. Der Elementklassenname ist Parallax Element, Blatt Punkt Klassenname ist Blatt Element anhängen Kind Blatt und dann Parallax Container Prise alt Element. Wenn wir jetzt mit der rechten Maustaste auf diesen hier klicken, sollten wir eine Reihe von Parallaxen sehen, alle mit Blättern in ihnen. Das ist großartig. Das nächste, was ich tun möchte, ist, dass ich eine zufällige Breite, Höhe, Tiefe, Verhältnis, Hintergrundbild, all das Zeug erhalten möchte. Lassen Sie uns für Punkt Punkt Stil Punktbreite gleich 300 Höhe gehen. Lassen Sie uns für Tiefe, Drehung und Hintergrundbild gehen , also Höhe. Dann gehen wir für die Tiefe und dann die Rotation, also wird diese Tiefe sein. Dies wird ein Punktdatensatz Punkttiefe sein, dann werden wir Rotation sagen. Das wird nicht da sein, es wird transformieren und dann wird das letzte ein Hintergrundbild sein, also Hintergrundbild und wir werden dieses Hintergrundbild hier drüben bekommen. Dann brauchen wir eine Zufallszahl, also werde ich var Zufallszahl gleich mathematische Punkt zufällig erstellen. Dann wird unsere Breite sein, lassen Sie uns für 600 multipliziert mit der Zufallszahl gehen, die uns einen Wert zwischen Null und 600 und dann plus 300 ergibt. Wenn es Null ist, dann sind es 300 oder vielleicht kannst du plus 200 sagen, und vielleicht können wir sagen, das ist 500. Offensichtlich werden diese zuerst ausgearbeitet werden, also geben wir ihnen einfach ein paar Klammern, die Tiefe wird eine Zufallszahl sein, und das wird nur zwischen Null und eins liegen. Dann werde ich mich verwandeln. Was wollen wir hier? Wir wollen etwas zwischen 0 und 360. Gehen wir zu 360 multipliziert mit einer Zufallszahl und dann unser Hintergrundbild, wir wollen eine von diesen zwischen 1 und 91. Probieren wir es aus. Für meine BGIMG Bildnummer möchte ich meine Zufallszahl mit 90 multiplizieren. Wie auch immer, zwischen 90, aber ich werde sagen, nun, mal sehen, was das eigentlich ist. Lassen Sie uns einfach zwei für jetzt, BGIMG Bildnummer. Öffnen wir unsere Konsole, also sind wir 64 Punkt was auch immer. Was wir hier tun können, ist, dass Sie mathematische Punkt rund sagen können und das wird uns sechs geben. Fantastisch. Warum loggen wir das nicht einfach aus? Konsolenpunktprotokoll BGIMG-Nummer und dies sollte uns eine Reihe von verschiedenen BGIMG-Nummern geben. Das sieht ziemlich gut aus und ändert sich zu 91 Ich denke, es sollte okay sein. Dann können wir unsere BGIMG-Nummer hier eintragen und wir hätten das gleiche mit dieser Berechnung hier machen können, vielleicht sollten wir das versuchen. Lass uns das hier aufstellen. Nehmen wir das weg und lassen Sie uns sagen, drehen Sie Zahl und kopieren Sie und fügen Sie es ein. Wir können das gleiche mit all diesen tatsächlich tun, aber manchmal ist es unnötig. Es sieht nicht so aus, als würde ich zufällige Pflanzen bekommen, nein, es tut nicht wirklich. Gibt es ein Hintergrundbild tatsächlich? Klicken Sie mit der rechten Maustaste hier und inspizieren Parallax Artikel, das ist, weil wir es auf unserem Blatt setzen müssen. Lassen Sie uns sagen, Blattpunkt-Hintergrundelement, sehen, ob das etwas ändert, div dot Stil Hintergrundbild. Punktierte Tiefe, transformieren Drehen. Vielleicht müssen wir einige Recherchen darüber machen, wie man ein Hintergrundbild mit JavaScript auf ein Element setzt. Lassen Sie uns für JavaScript-Hintergrundbild gehen. Hintergrundbild. Weil wir keine URL eingegeben haben. Lassen Sie uns das versuchen. Ich werde URL sagen, und wie einige oder so. Wie wär's damit? Verstehe nicht, was du sagst. All diese URL, eine davon, lassen Sie uns das einfach dort setzen. Es sieht so aus, als hätten wir einige zufällige Hintergrundbilder. Fantastisch. Danke so viel W3-Schulen. Boom, was kommt als nächstes? Nun, wir müssen unsere Unschärfe herausfinden. Gehen wir für item.style.filter gleich Unschärfe von 20 Pixeln. Da ist ein Haufen Unschärfe passiert, und wir haben bereits unsere Tiefe. Wo ist unsere Tiefe? Hier ist unsere Tiefe. Vielleicht können wir sagen, var depth gleich randomNum, und wir können sagen, okay, was ist ich Wert verwischen? Var Unschärfe entspricht unserer Tiefe. Wir brauchen hier einen Startwert, also werde ich output.blur.start sagen und dann mit dem output.blur.range multiplizieren. Nun, wir haben diese Werte offensichtlich nicht, also lassen Sie uns sie aufstellen. Es wird sagen, die Ausgabe einrichten und die var-Ausgabe gleich ist, und unsere Ausgabe wird Unschärfe sein, und wir werden einen Anfang von 0.2 und den Bereich von 20. Wie wär's damit? Start und Bereich der Ausgangsunschärfe. Was passiert, wenn wir das auf fünf ändern? Was passiert dann? Wenn wir sagen müssen, beginnen Sie bei einem, ich erwarte, dass alle diese nicht verschwommen sind. Das funktioniert nicht. item.style.filter verwischen 20 Pixel , weil es nur 20 Pixel gibt. Lassen Sie uns dies in einen Unschärfewert ändern. Dort gehen wir und wir können löschen Unschärfe erscheinen mit allen anderen Variablen. Lassen Sie uns unseren Start wieder auf 0,2 und unser Sortiment auf 20. Hoffentlich werden wir sehen, dass einige davon verschwommen sind und einige nicht. Dann kann ich vielleicht meine Breite auf 50 ändern . Zwischen null und 500 und yeah, das Minimum wird 50. item.style.Filter Unschärfe, können Sie das dort oben setzen. Das sieht bisher ziemlich gut aus. Was müssen wir noch tun? Ich habe eine Unschärfe, ich habe eine zufällig für Spludge, ich habe zufällige Breite und Höhen, ich habe zufällige Tiefe und Unschärfe. Ich schätze, ich brauche eine zufällige Position. Ich glaube nicht, dass ich das wirklich reingesteckt habe. Lassen Sie uns für item.style.top gleich gehen und wir können sagen, wo ist diese RandomNum multipliziert mit, und wir können Window.innerHeight sagen. Cool, und dann window.innerWidth für meinen linken Wert, und dann werden wir nur ein Pixel hinzufügen. Dann müssen wir das vielleicht abrunden. Nicht ganz sicher, aber lassen Sie es uns trotzdem tun, nur damit wir keine Punktwerte bekommen . Lassen Sie uns das untersuchen. Jetzt haben wir Filter nach oben links umgewandelt. Ein Haufen Zeug passiert. Nun, das ist fantastisch. Aber vielleicht können wir auch einfach sagen Math.Runde minus 200 auch, und das ist nur so, dass der Artikel ein wenig nach links und ein wenig nach oben gehen . Andernfalls gehen sie immer nach rechts und unten auf der Seite. Dann können wir auch einen Überlauf auf unserem Parallax-Container versteckt setzen , so dass wir keine Bildlaufleisten haben. Wir haben jetzt zufällige Positionen, denke ich, wir müssen sie bewegen. Lass sie uns bewegen. Lassen Sie uns unsere Input einrichten und teilen. Vielleicht können wir Setup HTML sagen. Wir werden auch die Semikolons hinzufügen. Unser Input wird MouseX und MouseY sein. Dann werden wir haben, ich werde bei Null beginnen und ich mache immer dieses window.innerWidth, und dann unsere aktuelle. Wir können einfach bei window.innerWidth multipliziert mit 0,5 beginnen, und dann brauchen wir einen Bereich, der danach funktioniert. Wir können das einfach kopieren und einfügen. Dann sagen wir Input.minusx.Range gleich Input.mouseX.end minus. Lassen Sie uns das einfach kopieren und einfügen. Fangen Sie an Diese Dinger machen mich aus. Wir haben unsere Eingabesetup. Nun, was als Nächstes ist, dass wir unsere Event-Listener tun müssen. Vielleicht können wir das jetzt einfach verstecken, und wir können window.addEventListener sagen, und wir können mousemove, handleMouseMove sagen. Dann können wir auch eine Größenänderung hinzufügen, Größe Handle ändern. Ändern Sie die Größe und weiß nicht ganz, warum ich so sprach. Aber ich habe HandleMouseMove gemacht. Wir können HandleReSize sagen. Was in unserer Größenänderung passieren muss. Wir müssen unser Sortiment machen. Ich werde unser Angebot beenden, das ist gut. Dann übernehme ich MouseMove. Was passiert jetzt in HandleMouseMove? Wir müssen Eingabefraktion und Strom zu tun, und dann gibt aktuelle und dann auf HTML anwenden. Lassen Sie uns für unsere UpdateInputs gehen, die eine Funktion ist, und wir können dies einfach kopieren und einfügen und UpdateOutputs sagen, wie so, und dann können wir UpdateParallaxItems sagen. Wir können diese einfach kopieren und einfügen, fantastisch. Was wir zuerst in Update-Eingaben tun müssen, ist, Ströme und unsere Fraktion. Machen wir das, Update-Eingaben. Was wir bekommen, ist, unsere Ereignisse zu bekommen und wir sagen, Maus Punkt x entspricht Ereignis Punkt Client X. Wir haben unsere Maus noch nicht eingerichtet, also können wir das nicht tun. Var Maus gleich 0 oder vielleicht können Sie sagen, Fensterpunkt Innenbreite multipliziert mit 0,5. Wir können das für unseren y-Wert kopieren und sagen innere Höhen. Wenn wir das einfach ausschneiden und an die Spitze legen, können wir das tatsächlich referenzieren, also ist es ein Mauspunkt x und Mauspunkt y. Das nächste, was wir tun müssen, ist Kopieren und Einfügen, Maus Punkt y ist unser Client Y. Das nächste, was wir tun müssen, ist, wir die Bruchwerte abschneiden, also gehen wir und tatsächlich geht das hier nicht, das geht hier runter, und das geht hier runter, da gehen wir. Dann können wir tatsächlich aktualisieren unsere aktuellen Werte Eingabe Maus X Punkt Strom gleich Maus Punkt x, und setzen Punkt Maus Y, der Strom geht Maus Punkt y. dann unsere Bruchwert, Eingabe Punkt Maus X Punkt Bruchteil, und dies entspricht aktuellen minus Start geteilt durch Bereich. Wir setzen diese in Klammern, und wir ändern dies in Maus Y. Wir haben unsere Eingaben gemacht, das ist großartig. Jetzt gibt es aus. Was werden wir für unsere Ausgänge tun? Nun, wir müssen tun, sind x und y. Lassen Sie uns für Ausgabe Punkt x gehen. Haben wir ein x noch? Nein, das tun wir nicht, also die Skala für x, und wir haben einen Anfang von minus 150 und ein Ende von 150 und dann einen Strom von Null. Wir werden dies kopieren und einfügen und dies in y ändern und dann kopieren und einfügen, und ändert sich in x, x, x und dies zu y, y, y, und dies zur Ausgabe. Schon. Wir haben jetzt unsere x- und y-Ausgabe. Das nächste, was wir tun müssen, ist tatsächlich weiter hier und sagen, Punktstrom ist gleich, und unser aktueller Wert wird Eingabepunkt-Maus-X Punktfraktion multipliziert mit Ausgang Punkt x Punktbereich sein. Ziemlich cool. Wir müssen das wahrscheinlich nicht tun, aber ich werde es trotzdem tun. Es macht das Leben ein wenig einfacher, so dass y-Strom-Maus-Y-Fraktion und Ausgangs-Punkt-Y-Bereich. Jetzt haben wir unsere Ausgänge gesetzt. Die nächste Sache ist, wir müssen auf den HTML anwenden. Was ich hier oben getan habe, ist, dass ich das HTML eingerichtet habe, aber ich habe es keinem Array hinzugefügt. Nehmen wir an, items-array entspricht einem leeren Array. Dann, was ich tun möchte, ist, var Element, wenn ich es erstelle, und ich mache den Klassennamen, und ich werde sagen, items-array dot push, und ich werde dieses Element einfach zu diesem Array hinzufügen. Dann kann ich es später referenzieren, also items-array, lasst uns hier runter gehen. Items-Array-Punkt ForEach, und innerhalb dieses ForEach stellen ein Funktionselement und k oder Element und i bereit. Dann kann ich eine var Item-Ausgabe erstellen gleich einem Objekt, und es wird ein x geben, es wird ein y geben. Das wird eigentlich es sein, nur meine x und y. Dann werde ich sagen item dot styles dot transform gleich übersetzen, und dann sagen wir 20 Pixel, 20 Pixel. Dann werde ich auch eine Tiefe haben, also var depth entspricht Punkt Punkttiefe. Ich werde ParseFloat sagen. Wir müssen das wahrscheinlich nicht tun, weil wir diese Zahl hier oben generieren. Wir könnten das auf dem Artikel selbst speichern, aber ich denke das ist nur eine nette Möglichkeit, es in HTML zu setzen und es zurückzubringen, nur um das zu zementieren, was ihr während des Unterrichts gelernt habt, also ist das unsere Tiefe. Wir werden nur diesen 10-Wert einbringen. Wir haben unsere Tiefe, wir haben unsere Item-Ausgabe. Machen wir das dynamisch. Wir beginnen mit unserem Ausgangspunkt x-Strom und multiplizieren ihn dann mit unserer Tiefe. Dann sieht jemand ein bisschen aus. Ich glaube, ich habe mit diesem Wert hier oben zu tun. Ich denke, ich muss möglicherweise mit Ausgabepunkt x dot start plus diesem Wert beginnen. Das sieht gut aus und dann machen wir das Gleiche hier drüben. Da dies unser y-Wert sein wird, setzen Sie noch Klammern hier herum. Dann wäre unser x unser Ausgabe-x Punktstrom [unhörbar] derzeit ist, multipliziert mit der Tiefe. Lasst uns nochmals nachsehen. Nun lassen Sie uns das kopieren und einfügen. Output-y Punkt Strom, es ist ziemlich das Gleiche. Dann können wir dies auf Punkt x setzen und dann alles kopieren und einfügen. Sagen Sie Item-Ausgabe Punkt y. Hoffentlich sollte das funktionieren. Eine ganze Reihe von Sachen, die nicht passiert, sieht nicht so aus, als würde es sogar erkennen, dass ich meine Maus bewege, also gehen wir zu View, Developer Javascript Console, kann die Eigenschaftstransformation von undefined nicht setzen. Das ist Punkt Stile. Stile funktionieren definitiv nicht, also lassen Sie uns für Artikel Punkt-Stil gehen. Rette meinen Stift, also funktioniert hier alles. Kann das tatsächlich entfernen, also werden wir das einfach auskommentieren. Sieht so aus, als ob hier viel Rotation passiert. Schauen wir uns unsere Rotation an. Unsere Rotation, denke ich, funktioniert nicht, weil wir sie auf unseren Artikel gesetzt haben. Wenn wir für diese Drehung gingen, jedes Mal, wenn diese Bilder hier bewegen, bedeutet dies, dass überschreibt. Lasst uns das in unser Blatt ändern. Vielleicht können wir die Unschärfe ein wenig hinunterschütten. Lassen Sie uns zur Ausgabe verschwommen gehen, machen Sie dies 10, und ändern Sie dies zu fünf. Dann, wo ich meinen HTML einrichte, ändere ich ihn vielleicht auf 50, das wird jetzt 50 Blätter und Flecken sein und was auch immer. Es sieht nicht so aus, als wären sie zufällig positioniert. Es sieht so aus, als wären sie nur von oben links nach rechts oben positioniert. Es ist seltsam. Wenn wir nach oben und links gehen, innerHeight, innerWidth, ja, das ist nur seltsam, also lasst uns das vielleicht protokollieren, sagen wir ich, Dimensionen, ich werde einfach nach oben und links gehen . Also gehen wir für unsere Entwickler-Javascript-Konsole. Das Problem ist, dass, was passiert ist, wenn die Elemente zunehmen, so dass die oberen und linken Werte steigen, was es so wirklich sogar von oben links nach unten rechts verteilt. Also, was ich hier tun werde, ist, anstatt sich auf diese Zufallszahl hier zu verlassen, werde ich das einfach kopieren und einfügen und einzigartige RandomNum für die obere linke, die Transformation, die Breite und die Höhe verwenden . Eigentlich werde ich nur Math.random überall in der Show verwenden. Also sagen wir, RotateNumber. Lasst uns das auch dort hinlegen. Also, RandomNumber, existieren Sie mehr? Tiefe ist immer noch randonWert. Oder wir können das einfach ändern und das sollte es sein, keine Zufallszahlen mehr. Also haben wir jetzt ein paar Blätter, was ziemlich cool ist. Sie bewegen viel etwas scheint hier nicht richtig zu sein. Was ist los? Nun, ich denke, es hat etwas mit unserem Strom zu tun, dass wir am Anfang beginnen, und dann sagen wir das MouseX. -Fraktion, multipliziert mit dem Bereich, der am Bereich beginnt. So kann vielleicht Ende sagen - und Ende -, und sehen, wie das funktioniert. Dann ist unser x unser Ausgang x.current multipliziert mit der Tiefe. Das sieht viel besser aus. Ziemlich davon. Lasst uns wieder unsere Schlag-Werte ändern. Beginnen Sie mit 0,5, sagen wir, beginnen Sie bei 0,35 und unser Sortiment könnte bis zu 16 sein, und das einzige, was wir nicht getan haben, ist unsere Z und X, also müssen wir unsere Z machen So können wir das herausfinden und sagen, var ZindeX entspricht unserer Z-Reihe. Also können wir sagen, output.z.range, die wir noch nicht eingerichtet haben, abzüglich unserer Tiefe multipliziert mit output.z.range, gehen wir und tun das. Zehntausend, das sieht ziemlich gut aus. So Reichweite. Nun lassen Sie uns es item.style.Zindix gleich Zindix setzen. Siehst du, was da passiert ist? Größenänderung der Dinge funktioniert nicht wirklich so gut. Lasst uns das aktualisieren. Also auf meiner Größe und im Bereich, lassen Sie uns für Input.mouseX.end gleich window.innerWidth gehen . MouseY ist innerHeight. Dann können wir nicht unsere Ausgabe kopieren und einfügen, sondern unsere Eingaben hier unten. Mal sehen, ob das besser funktioniert. Das sieht ziemlich gut aus. Es ist aber ein bisschen ein Chaos. Vielleicht könnte ich meine Bilder ein bisschen besser auswählen, oder vielleicht können wir die Unschärfe wieder reduzieren. Einige davon hier von 0.2 und sagen wir 10. Ja, es ist ziemlich zufällig, was auftaucht, und ich wette, wenn ich all die Unschärfe abnahm, wäre es viel leistungsfähiger. Also, wenn wir gehen und die Unschärfe finden. Also style.blur oder style.filter, dieser hier. Kommentieren Sie das einfach aus. Das fühlt sich viel besser an. Ich frage mich, ob ich dies in einen Prozentsatz ändern kann, die obere und linke, anstatt tatsächliche Pixel zu sein. Also lasst uns das in Prozent ändern. Also Math.Random multipliziert mit 100, minus, sagen wir 10, und das bedeutet, dass es funktioniert, egal was die Fensterhöhe und -breite ist und ob es in der Größe geändert wird. Lassen Sie uns die Menge der Elemente ändern, die wir haben, um 100 oder so zu mögen. Vielleicht können wir hier sogar minus ein bisschen mehr sagen, also minus 20 Prozent. Ja, das sieht ziemlich gut aus. Ich würde gerne sehen, wie viele Blätter ich hier reinlegen kann. Vielleicht gehen wir für 150. Es ist wie ein dreckiger Dschungel hier, ja, das ist wirklich cool. Vielleicht können wir die Punktzahl 130 verringern. Hier gibt es viel Bewegung. Was ich jetzt tun muss, muss ich den Rest meines HTML einfügen. Lassen Sie uns für ParallaxContainer gehen, und darüber hinaus werde ich meinen Form-Container einfügen, eigentlich buchstabiere ich Container richtig. Hier drin habe ich ein Formular, und in meinem Formular werde ich eine Eingabe mit einer Art von Text haben. Brauche momentan nicht wirklich eine Namens-ID. Dann ein Eingabetyp von Submit. Wir sagen, Registrieren und kann als Platzhalterwert geben , E-Mail-Adresse. Außerhalb unseres Formulars können wir ein h1 Sprichwort haben, Parallax Plants Newsletter und h2 sagt, Bitte melden Sie sich an. Jetzt können wir das einfach stylen. Gehen wir für unseren Form-Container, und wir sagen, Breite ist 100 Prozent. Wir sagen, Höhe ist 100 Prozent. Oder vielleicht sagen wir einfach 100vw und 100vh. Dann sagen wir Position absolut und Top Null, links Null. Wir können dann auch auf Display flex setzen und sagen, Justify-Inhalt, und wir sagen Zentrum und Ausrichtung - Elemente auch, Mitte. Dann werde ich sagen, die Flexrichtung Zeile kann das in eine Spalte ändern. Dann kann ich in meinem Körper sagen, Schriftfamilie. Ich möchte Open Sans sein, denke ich. Öffnen Sie Sans großartig. Dann mein h1, geben wir ihm einfach eine Farbe von Weiß. Wir können Text-Schatten 0, 0, 10 px, rgba 0, 0, 0.5 sagen . Vielleicht können wir dies in 4px und das auf 20px ändern und wir können dies noch dunkler 0.8 machen, ja das ist großartig. Ich kann Schriftgröße von 50 px sagen, vielleicht 40 px, und dann kann unser h2 ziemlich dasselbe sein. Außer es wird 20px sein. Kann den Rand auf 0 ändern. Der Rand auf 0 zu. Dann unsere Form, gleiche Margin-top von 20 px. Dann unsere Eingabe und sagen type = text, und unsere Eingabetyp=submit, und hier können wir das gleiche tun wie unser Form-Container. Wir können auch einfach den Anzeigetyp so einstellen, dass er innerhalb unseres Formulars flexibel ist. Zentrum, aber wir können hier rudern. Ja, so, sag Grenze, keine, und sag Umriss, keine. Sagen Sie Box-Dimensionierung, Border-Box kann sagen, dass Padding 10px ist, und das sieht ziemlich gut aus. Vielleicht 10px, 20px oder vielleicht können wir 10px, 12px so sagen. Oder vielleicht können wir diesem sogar eine Höhe von geben, sagen wir 40px. Unsere Einreichung kann eine Höhe von 40px haben. Wir können auch sagen bg oder wir können sagen, Grenze von keiner, Umriss, keine, Cursorzeiger. Meine Hintergrundfarbe, scrollen Sie nach unten, um ein paar schöne Farben hier zu bekommen, ich will das Pink. Lassen Sie uns das hineinlegen und dann geben Sie diesem eine Polsterung dessen, was wir hier sagen 10, 12. Vielleicht können Sie uns etwas mehr geben. Fantastisch und dann Schriftgröße kann 16px sein. Das Gleiche hier, und unsere Farbe kann schwarz sein und Schriftgewicht kann fett sein. Unsere Farbe hier kann auch schwarz sein. Das sieht ziemlich gut aus. Was ich gerne tun würde, ist, ich würde gerne sehen, ob ich einen Schlagschatten auf den Blättern hinzufügen kann , ohne es super langsam zu machen. Lass uns filtern und Schlagschatten gehen. Dies muss möglicherweise innerhalb von Anführungszeichen sein, aber lassen Sie uns einfach überprüfen und wir werden 0, 0, 0, 0.5 sagen. Hat das überhaupt etwas getan? Denk nicht so. Macht das überhaupt etwas? Das glaube ich auch nicht. Filter und Schlagschatten, Schlagschatten so. Nein, das glaube ich nicht. Was ist mit CSS-Filter Schlagschatten, Schlagschatten oh keine Kommentare. Wie wär's damit? Sie arbeiten überhaupt? Dieser, es funktioniert, aber es ist super ist niedrig. Nehmen wir das schnell raus, bevor mein Computer kaputt ist. Wir sind wieder da drüben. Ich schätze, mit der Unschärfe und dem Schlagschatten Dinge nicht so leistungsfähig. Dann haben wir unseren Parallax Plants Newsletter, anmelden. Wenn Sie Ihre Maus bewegen, bewegen sich alle diese Pflanzen. Es gibt einige seltsame Plagen in unseren Charakteren hier und da. Aber es ist ziemlich cool. All dies ist einfach einfach zu ändern und einzurichten. Wir können dies in etwas wie 300 ändern, um es noch reaktionsfähiger zu machen. Es sieht ziemlich lustig aus. Das ist mein Parallax Plants Newsletter. Viel Spaß beim Erstellen Ihrer. Wenn Sie die Ansicht ändern möchten. Sie können gehen, Ich denke, Full Page. Hat noch diese kleine Bar, vielleicht können Sie zu Live View gehen. Jetzt sind meine Bilder massiv, deshalb dauert es so lange, bis sie geladen werden. Aber das ist ziemlich cool. Es ist ziemlich viel Platz im Topsturm. Vielleicht können Sie das ändern. Gehen wir zur Editor-Ansicht, und lassen Sie uns nach unten scrollen, bis wir zu unserem ItemsArray kommen. Ich glaube, es ist etwa hier. Lasst uns für 40 Prozent gehen, ja, lasst uns das 40 Prozent versuchen. Lasst uns das auffrischen. Vielleicht wird es viel besser aussehen, wenn ich nicht einen Haufen meiner Plagen hatte, wie diese großen Dinge hier. Jedenfalls mag ich es. Es macht eine Menge Spaß. Alles ist richtig schön parallaxing. Es ist eine wirklich schöne Möglichkeit, eine Newsletter-Anmeldeseite zu haben. Cool. 15. Was kommt als Nächstes?: Das war's für diese Klasse. Danke, dass Sie es genommen haben. Ich hoffe, du hattest Spaß. Ich hoffe, du hast viel gelernt. Ich hoffe, Sie möchten noch etwas mehr Codierung machen. Die Sache, mit der ich dich verlassen möchte, ist, dass dies nur der Anfang ist. Interaktionsdesign macht super Spaß und in der Web-Welt ist es sicherlich die lustige Seite von JavaScript. Es gibt viel mehr zu lernen und es gibt sicherlich viel bessere, schnellere und elegantere Möglichkeiten, Code zu schreiben, als ich in dieser Klasse codiert habe. Mein Ziel war es, alles so einfach und so leicht zu verstehen wie möglich zu machen. Wenn Sie Fragen haben oder etwas besprechen möchten, tun Sie dies bitte im Community-Bereich oder kontaktieren Sie mich in den sozialen Medien. Wenn Sie den Kurs genossen haben, geben Sie ihm bitte eine Rezension und teilen Sie ihn mit, damit andere Schüler ihn finden und davon profitieren können. Ich habe auch noch viel mehr Klassen in der Rohrleitung. Wenn Sie die Art und Weise, wie ich lehre, folgen Sie mir auf Skillshare und in sozialen Medien und überprüfen Sie taptapkaboom dot com. Tschüss vorerst, und wir sehen uns bald.