Erstelle eine reaktionsschnelle persönliche Portfolio-Website

1. Einführung: Willkommen zu dem brandneuen Kurs, in dem Sie lernen können, wie Sie mit nur drei Kerntechnologien, HTML, CSS und JavaScript, eine persönliche Portfolio-Website von Grund auf neu erstellen eine persönliche Portfolio-Website mit nur drei Kerntechnologien, HTML, CSS und JavaScript, eine persönliche Portfolio-Website von Grund auf neu können. Wenn Sie Ihr eigenes Portfolio erstellen möchten, das Ihnen hilft, sich bestmöglich zu präsentieren und eingestellt zu werden. Dann ist dies der richtige Kurs für Sie. Wenn Sie einen der Arbeitgeber oder Projektmanager fragen , wie man die besten Entwickler auswählt , alle. Aber das Wichtigste am Entwickler ist, dass er sich selbst mit einer guten Standardeinstellung repräsentiert. Wenn Sie mit HTML, CSS und JavaScript vertraut sind, können Sie alle bereits eine wirklich gute persönliche Portfolio-Website erstellen , auf Sie sich ausdrücken und allen Ihre Fähigkeiten und Ihr Wissen zeigen können . Während dieses Kurses werden wir eine Portfolio-Website-Vorlage erstellen , die voller moderner und schöner Funktionen und Effekte ist. Denn wenn Sie eine Website mit nur diesen drei Kerntechnologien erstellen möchten , dann sollte es sich auf jeden Fall um eine fortschrittliche und coole Website handeln. Wir sagen nicht, dass es Ihre eigene Portfolio-Website wird und Sie sie kopieren können. Aber es wird eine große Inspiration sein , die Ihnen helfen wird, Ihre eigenen Portfolio-Websites zu erstellen Ihre eigenen Portfolio-Websites oder zu verbessern, falls Sie alle eine haben. Wie bereits erwähnt, werden wir dieses Projekt von Grund auf neu aufbauen. Wir werden keine Tools, Bibliotheken und Frameworks von Drittanbietern Sobald wir eine Website erstellt haben, bringen wir dir bei, wie du das Projekt hostest und Leben einrichtest , um es für alle verfügbar zu machen. Außerdem werden Sie lernen, wie das Formular funktioniert, um Feedback von Ihren Gästen zu erhalten. Sie werden das Projekt so gestalten, dass Teile so groß sind, dass jeder Benutzer von jedem optischen Gerät aus auf die Website zugreifen kann . Ich denke, dieser Kurs wird für alle interessant und hilfreich sein. Ich meine, es ist Zahnstein oder erfahrene Entwickler. Also warte nicht und schließ dich uns an 2. SET-UP: Hallo und willkommen zum Kurs. Wir freuen uns, dass Sie hier sind und hoffen, dass Ihnen der Kurs gefällt , bevor wir tiefer tauchen und mit der Erstellung unserer Projekte beginnen. Zuallererst müssen wir unser Arbeitsumfeld vorbereiten. Ich bin mir sicher, dass die meisten von Ihnen bereits bereit sind , den Code zu schreiben. Wenn ja, können Sie dieses Video gerne überspringen und sofort mit den Projekten beginnen. Aber wenn nicht, dann ist das nicht das Problem. Lassen Sie uns weitermachen und einige Tools einrichten. In diesem Kurs benötigen wir zwei Haupttools, nämlich einen modernen Webbrowser und einen Texteditor. Als Webbrowser werde ich hauptsächlich Google Chrome verwenden. Und in einigen Fällen benötigen wir auch die Hilfe von Mozilla Firefox. Ich bin mir sicher, dass Sie bereits wissen, wie man diese Webbrowser installiert, und ich denke, Sie haben sie alle bereits. Aber wie dem auch sei, schauen wir uns an, wie man sie herunterlädt. Um Google Chrome zu erhalten, müssen wir hier zu dieser URL gehen und den Webbrowser herunterladen. Der Installationsvorgang ist ziemlich einfach, daher werde ich ihn nicht durchführen. Für Mozilla Firefox müssen Sie diese URL verwenden und den Webbrowser von hier herunterladen Beide Links werden dieser Vorlesung beigefügt. In Ordnung, lassen Sie uns weitermachen und über den Texteditor sprechen. Wir werden Visual Studio Code verwenden, weil es derzeit einer der besten Texteditoren der Welt ist. Natürlich können Sie sich frei fühlen und Ihren Lieblingstexteditor verwenden. Es liegt an Ihnen, aber ich empfehle, den VS-Code zu verwenden. Um den VS-Code herunterzuladen, müssen Sie diese Website besuchen und den Texteditor entweder für Windows oder Mac oder Linux herunterladen. Dieser Link wird ebenfalls dieser Vorlesung beigefügt. Der Installationsvorgang von Visual Studio Code ist ebenfalls sehr einfach, daher bin ich mir sicher, dass er damit keine Probleme haben wird. In Ordnung, sobald Sie beide Tools installiert haben, können Sie loslegen Also lasst uns gleich zu den Projekten springen 3. Projektvorschau: Hallo und willkommen zur allerersten Vorlesung dieses Kurses, in ich das Projekt durchgehen und all diese Abschnitte detailliert beschreiben werde . Vorher möchte ich erwähnen, dass das Projekt auf Basis von HTML, CSS und JavaScript erstellt wird . Sie sollten also über ein grundlegendes Verständnis dieser Technologien verfügen , um allen Vorlesungen folgen zu können. In Ordnung, lassen Sie uns weitermachen und die Projekte durchgehen. Der erste Abschnitt , den wir bauen werden, wird Landing sein, in dem wir diese animierten Kreise haben. Sie bewegen sich. Sobald wir den Cursor bewegen. Ebenfalls im Zentrum der Kreditvergabe haben wir das Bild des Webdesigners und unwahrscheinlicher Kreise. Es bewegt sich in seinem eigenen Kreis und erzeugt diesen schönen und coolen Effekt. Außerdem wird das Bild mit dem Hintergrund vermischt. Sie werden also lernen, wie Sie diesen Effekt mit CSS erstellen. In der oberen rechten Ecke der Seite haben wir ein paar Navigationspunkte. Sie sind mit den richtigen Abschnitten verbunden. Wenn wir sie anklicken, navigieren wir zu den entsprechenden Abschnitten. Wenn wir anfangen, nach unten zu scrollen, verwandeln sich die Navigationselemente außerdem in das Menüsymbol. Und wenn wir darauf klicken, werden sie wieder angezeigt. In der oberen linken Ecke der Seite sich das Logo, der vollständige Name des Designers. Auf der linken und rechten Seite der Ausleihe sehen Sie den Text , der klebrig ist. Wenn ich anfange, nach unten zu scrollen bleibt es für eine Weile hängen. Okay? Außerdem haben wir hier einen Button mit einem schönen Schwebeeffekt Wenn ich auf diese Schaltfläche klicke , werden wir zum Abschnitt Projekte weitergeleitet. In Ordnung, das war's mit der Landung. Als nächstes haben wir den Abschnitt Über mich. Es enthält große Texte , die standardmäßig mit dem Hintergrund vermischt Und wenn ich anfange, mit der Maus über den Text zu fahren, werden die Elektronen heller und es gibt nette Animationseffekte Außerdem haben wir hier eine ähnliche Schaltfläche, mit der wir zum Kontaktbereich navigieren können. Okay, das war's mit diesem zweiten Abschnitt. Als nächstes folgt der Projektabschnitt , der meiner Meinung nach einer der interessantesten Abschnitte des Projekts ist . Standardmäßig sehen wir hier sechs verschiedene Projekte. Wenn ich mit der Maus über sie fahre, beginnen die Bilder in einer 3D-Umgebung schön nach oben zu scrollen in einer 3D-Umgebung schön Wenn ich auf eines der Projekte klicke, werden sie erweitert. Sie können nach unten scrollen und das Projekt im Detail überprüfen. Wir haben hier einen Schließknopf. Wenn ich darauf klicke, wird das Projekt geschlossen. Außerdem haben wir hier die Schaltfläche „Mehr anzeigen“. Wenn ich darauf klicke, werden ein paar versteckte Projekte angezeigt. Die Seite wird automatisch nach unten gescrollt. Der Text in der Schaltfläche wird in „Weniger anzeigen“ geändert. Und auch der Pfeil dreht sich entsprechend der Scrollrichtung. Wenn ich auf die Schaltfläche klicke, werden die Projekte ausgeblendet. In Ordnung, als nächstes kommt der Abschnitt Services. Wir haben hier ein paar verschiedene Dienste, die in einer großen Schrift angezeigt werden. Wenn ich sie anklicke, werden sie erweitert und einige Beschreibungen werden angezeigt. Okay, danach folgt der letzte Abschnitt des Projekts , der Kontakt. Es besteht aus ein paar verschiedenen Eingabefeldern. Und wir haben hier auch einen Senden-Button. Eigentlich funktioniert dieses Formular. Ich meine, die Felder sind validiert und der Benutzer kann auch eine Nachricht senden Denn sobald wir das Projekt erstellt haben, werden wir es hosten und zum Leben erwecken. Wenn ich die Felder spüre. Und dann klicken Sie auf Anfrage senden, das Formular wird gesendet und Sie erhalten die Nachricht. Wie gesagt, das Formular ist validiert. Wenn ich zum Beispiel die Felder leer lasse und das Formular abschicke, erhalten wir einige Fehlermeldungen. Gleich am Ende der Seite haben wir eine schöne Diashow der Social-Media-Icons Darüber hinaus haben wir einige zusätzliche Funktionen im Projekt. Wie Sie sehen können, hat der Cursor den Kreis und die Punkte, und sie bewegen sich gut mit dem Cursor. Wenn ich als Nächstes den Mauszeiger über einige Elemente wie Projekte oder Dienstleistungen bewege, ändert der Kreis seine Form und wir erhalten die Form der Harvard-Elemente Außerdem haben wir einen schönen Effekt mit dem Menüsymbol und dem Fortschrittsbalken. Wenn ich den Mauszeiger über sie bewege, bleiben sie am Mauszeiger haften. Aber wenn ich den Cursor weit von ihren Ausgangspositionen entfernt bewege , erhalten sie ihre Standardpositionen. Abschließend werde ich über den Fortschrittsbalken sprechen. Es befindet sich in der unteren rechten Ecke und hat eine feste Position. Sobald wir anfangen, auf der Seite nach unten zu scrollen, dieser weiße Kreis fühlt sich dieser weiße Kreis mit der roten Linie an. Sobald wir ganz nach unten zur Seite gegangen sind, ist der gesamte Kreis gefüllt. Und auch der Pfeil wird sich drehen. Wenn ich auf den Fortschrittsbalken klicke, navigieren wir zum Anfang der Seite. Außerdem können wir auf den Fortschrittsbalken klicken. Es ermöglicht uns, Abschnitt für Abschnitt nach unten zu navigieren. Der Fortschrittsbalken funktioniert mit dem Projektbereich. Wenn ich das Projekt erweitere, wird der Fortschrittsbalken aktualisiert und er beginnt, gemäß dem Bild zu arbeiten. Aber wenn ich das Projekt schließe der Fortschrittsbalken funktioniert der Fortschrittsbalken entsprechend der Seite weiter. Ordnung, das ist alles über diese Abschnitte und Funktionen des Projekts Wie bereits erwähnt, wird es auf die verschiedenen Bildschirmgrößen reagieren . Wenn ich die Seite überprüfe, wechsle ich in den responsiven Modus und überprüfe das Projekt. Auf den verschiedenen Bildschirmgrößen. Sie werden sehen, dass es responsiv ist. Ich möchte hier eine Sache erwähnen, das Projekt basiert auf einer extra großen Bildschirmgröße. Dies entspricht einer Breite von 1920 Pixeln und einer Höhe von 1080 Pixeln Wenn Sie die relativ kleinere Bildschirmgröße als das Projekt verwenden , sieht das während der Vorlesungen möglicherweise nicht gut aus. Ich empfehle also, in den Responsive-Modus zu wechseln und Breite und Höhe so einzustellen . Wie dem auch sei, Sie müssen sich keine Sorgen machen, denn am Ende des Projekts werden wir die Website responsiv gestalten Wie ich bereits erwähnt habe, werden wir das Projekt hosten und es mit Netlify live bringen Also ich denke, wir sind bereit zu beginnen. Als Nächstes müssen wir einige Tools einrichten und schon kann es losgehen. Also lass uns weitermachen. 4. Hintergrund vorbereiten und gemeinsame Stile erstellen: In Ordnung, wir sind bereit, mit dem Bau unserer Projekte zu beginnen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem ich nur die Bilder habe. Ich meine, wir haben hier ein paar verschiedene Ordner für verschiedene Bilder. Lassen Sie uns diesen Ordner im VS-Code öffnen und unsere Arbeitsdateien erstellen. Wir benötigen drei verschiedene Dateien. Die erste wird index.html sein. Dann wird das nächste erschreckte CSS sein. Was den dritten betrifft, sollten es Skripte dot js sein. Öffnen Sie dann die Datei index.html und erstellen Sie das grundlegende HTML-Dokument. Dafür verwende ich eines der eingebauten VS-Codepakete namens Emmet Wir müssen ein Ausrufezeichen setzen und dann die Tabulatortaste oder die Eingabetaste drücken Wir haben hier grundlegende HTML-Tags. Das erste, was ich tun werde, ist den Titel zu ändern. Fügen wir es hier ein. Nick Brown, kreativer Designer. Danach verknüpfen wir CSS- und JavaScript-Dateien. Ich werde das Link-Tag in den Header-Elementen öffnen. Und dann müssen wir hier den Pfad der Datei angeben. Für die JavaScript-Datei müssen wir das Script-Tag direkt über dem abschließenden Body-Tag öffnen . Und dann müssen wir im Quellattribut den Pfad der Datei angeben. Ordnung, also alle drei Dateien sind verknüpft und jetzt können wir das Projekt im Browser ausführen Dafür. Wie ich bereits erwähnt habe, werde ich Live Server verwenden. Auch hier können wir das Projekt live im Browser ausführen und Aktualisierungen und Änderungen vornehmen, ohne die Seite jedes Mal zu aktualisieren. Abschließend werde ich den Browser und den Texteditor so platzieren , dass wir loslegen können. Das erste, was ich tun werde, ist, diesen dunklen Hintergrund zu erstellen. Außerdem werden wir einige Reset- und Common-Stile erstellen. Lassen Sie uns zunächst mit dem HTML-Markup beginnen Lassen Sie uns Ihre Kommentare einfügen. Seitencontainer. Und Off-Page-Container. Öffnen Sie dann das div-Tag und weisen Sie es seinem Klassencontainer zu. Dieses Element wird also den gesamten Inhalt der Webseite enthalten . Als Nächstes erstelle ich ein weiteres div-Tag für den Seitenhintergrund. Aber lassen Sie uns zuerst Ihre neuen Kommentare einfügen. Eigentlich bevorzuge ich es, Code durch Kommentare zu trennen, weil es uns ermöglicht, saubereren und verständlicheren Code zu schreiben . Lassen Sie uns also Ihre Seite BG und Off-Page-VG einfügen. Ordnung, das war's jetzt mit dem HTML-Markup, gehen wir zur CSS-Datei Wie gesagt, ich werde einige Resets und gängige Styles vorbereiten. Fügen wir also neue Kommentare ein. Gängige Stile. Von gängigen Stilen. Wählen Sie dann alle Elemente mit einem Sternchen aus. Zuallererst werde ich Standard, Rand und Padding von jedem Element entfernen Rand und Padding von jedem Element Lassen Sie uns beide auf Null setzen. Dann mache ich die Box-Größe der Border-Box. In diesem Fall werden die Polsterung und der Rand in der Größe des Elements berücksichtigt Als Nächstes entferne ich den standardmäßigen Basiswert aus den Links. Wir müssen also Textdekoration mit dem Wert none verwenden. Außerdem möchte ich die Standardaufzählungszeichen aus den Listenelementen entfernen Standardaufzählungszeichen aus den Listenelementen Lassen Sie uns den Listenstil und den Typ auf „Keine“ setzen. Dann entferne ich die Standardkontur aus den Elementen. Setzen wir es auf Null. In der Übersicht befinde ich mich in der Grenze, die erscheint, wenn wir uns auf die Foren und Schaltflächen konzentrieren. Das Letzte, was ich tun möchte, ist die Schriftfamilie zu definieren Während dieses Projekts werden wir zwei verschiedene Google-Schriftarten verwenden. Also lasst uns weitermachen und die Google Fonts-Website besuchen. Die erste Schrift, nach der ich suchen werde, heißt also Euro. Lassen Sie uns alle Stile auswählen. Um die Schrift zu verlinken, haben wir zwei verschiedene Möglichkeiten. Wir können den Link entweder hier kopieren und in das Hauptelement der HTML-Datei einfügen. Oder wir können auf Import klicken, diese URL abrufen und in die CSS-Datei einfügen . Dieses Telefon wird unser Standardtelefon sein. Definieren wir es für jedes Element. Wir brauchen hier den Namen der Schrift, JIRA und Sensory. Ordnung, das nächste Telefon, nach dem ich suchen werde, heißt Poppins Ich werde all diese Stile auswählen , außer dass der Italiener es will. Dann schnappen Sie sich den Link und fügen Sie ihn ebenfalls in die CSS-Datei ein. Ordnung, all diese Stile werden also auf jedes Element angewendet , das im Laufe des Projekts entsteht Als Nächstes kümmere ich mich um die Maßeinheit. Während des gesamten Projekts werden wir Rampe als Maßeinheit verwenden. Standardmäßig entspricht ein RAM 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich möchte ein RAM in zehn Pixel umwandeln, weil ich denke, dass dies bequemer und einfacher zu berechnen ist. Um das zu erreichen, müssen wir die Schriftgröße der HTML-Elemente auf 62,5 Prozent reduzieren der HTML-Elemente auf 62,5 Prozent In diesem Fall entspricht ein Rem also zehn Spitzen. Okay, das war's mit den gängigen Stilen im Moment, lassen Sie uns weitermachen und uns um den Hintergrund kümmern Fügen wir neue Kommentare für die Seite ein, die wir auf Seite BG benötigen, und wählen Sie Div-Elemente aus. Der Hintergrund wird also repariert. Wenn wir uns das fertige Projekt ansehen und nach unten scrollen, werden Sie feststellen, dass es repariert ist und sich nicht bewegt. Lassen Sie uns also die Position festlegen, um sie zu korrigieren. Als Nächstes definiere ich diese Breite und Höhe. Lassen Sie uns die Breite auf 100% setzen. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen Deshalb müssen wir hier h sein. Okay? Danach lege ich das Bild als Hintergrund fest. Lassen Sie uns zunächst eine lineare Verlaufsfunktion verwenden eine lineare Verlaufsfunktion da ich das Bild etwas dunkler machen möchte. Lassen Sie uns Ihren RGBA-Wert mit einer schwarzen Farbe und den sieben Opazitätspunkten einfügen einer schwarzen Farbe und den sieben Opazitätspunkten Und dann verwende wieder den gleichen RGBA-Wert mit einer Opazität Danach definiere ich den Pfad der Bild-URL. Und wir müssen hier den Pfad des Bildes angeben. Wir haben einen Bilderordner und das Bild für den Hintergrund, das als Bg-Punkt-JPG bezeichnet wird. Lassen Sie uns außerdem die Position auf die Mitte setzen und auch den Hintergrund festlegen. Wiederhole, keine Wiederholung. Und schließlich, wenn die Größe des Hintergrunds definiert ist, lassen Sie uns ihn farbig machen. In Ordnung, hier haben wir unser Vollbild-Hintergrundbild Als Nächstes kümmere ich mich um den Cursor. Also lass uns weitermachen. 5. Animierten Mauskreis erstellen: Okay, sobald wir den Hintergrund vorbereitet und einige gängige Stile erstellt haben . Als Nächstes nehme ich hier den Cursor ab. Ich meine den Kreis und den Punkt, der sich entsprechend den Mausbewegungen bewegt. Wenn wir die Maus angehalten haben, werden Sie außerdem sehen, dass der Kreis und die Punkte animiert werden Außerdem werden sie verschwinden, wenn wir die Seite live sehen. In Ordnung, genau das werden wir in diesem Video tun. Lassen Sie uns zunächst diese beiden Elemente in der HTML-Datei erstellen . Das mache ich außerhalb des Containers. Fügen wir neue Kommentare ein, Mauskreis und den Mauskreis. Wir werden also zwei verschiedene Elemente haben. Der erste wird der Mauskreis sein und der zweite die Punkte. Ich meine Mauspunkt. In Ordnung, lassen Sie uns über das HTML sprechen. Als Nächstes. Ich werde beide Elemente stylen. Fügen wir also direkt nach den Common Styles neue Kommentare in CSS ein. Wir brauchen den Mauskreis. Und von Mouse Circle. Wählen Sie dann Mauskreis. Zuerst definiere ich seine Breite und Höhe. Stellen wir beide auf sechs RAM ein. Dann brauchen wir eine Grenze mit den Werten 0.1 run solid. Und als Farbe verwende ich C7, eine Sechs bis Zwei Außerdem werde ich das Element mit einem Randradius von 50 Prozent abgerundet machen mit einem Randradius von 50 Prozent In Ordnung, also hier haben wir den Kreis. Als nächstes müssen wir uns um seine Position kümmern. Ich setze Position zwei fest. Im Moment ist der Kreis also nicht mehr machbar, weil er hinter dem Hintergrund gelandet ist. Und um das zu beheben, verwenden wir die Eigenschaft z-index. Wir müssen ihm einen höheren Wert als Null zuweisen. Sagen wir 300. Ordnung, das war's mit dem Kreis. Vorerst. Lassen Sie uns weitermachen und uns um das zweite Element kümmern, das ein Punkt ist. Wählen wir es aus und definieren wir seine Breite und Höhe. Ich werde beide dazu bringen, Fibrin zu zeigen und auch die Hintergrundfarbe zu ändern Verwenden wir neun P 0 D E. Hier haben wir also die Punkte. Jetzt müssen wir uns um seine Position kümmern. Wir müssen seine Position festlegen. Tatsächlich werden einige dieser Kacheln für beide Elemente ähnlich sein , sodass wir sie gleichzeitig auswählen können. Dann können wir uns diese drei Codezeilen schnappen und einfügen. Dann du. In Ordnung, das ist es. Im Moment sind beide Elemente gestylt und jetzt ist es an der Zeit, sie mithilfe von JavaScript zum Laufen zu bringen Als erstes müssen wir beide Elemente auswählen. Lassen Sie uns also eine neue Variable erstellen. Ich werde es Mouse Circle nennen. Wählen Sie es dann mit der Abfrageauswahlmethode aus. Wir müssen hier den Klassennamen angeben, Mauskreis. Als Nächstes wähle ich den Mauspunkt aus. Tatsächlich können wir diese Codezeile duplizieren. Ändern Sie dann den Namen der Variablen. Es wird Mauspunkt sein. Und ändere auch den Klassennamen. Wir brauchen den Mauspunkt. Okay, danach müssen wir eine Funktion erstellen, in der wir die obere und linke Position für beide Elemente definieren müssen. Lassen Sie uns zunächst unsichere Kommentare machen. Mauskreis und Mauskreis. Erstellen Sie dann eine Pfeilfunktion. Ich nenne es Mauskreis N. Diese Funktion benötigt zwei Parameter, X und Y. Diese Parameter sind die Werte der Eigenschaften top und left Um sie zu definieren, verwende ich Stil - und CSS-Texteigenschaften. Fügen wir dem Mauskreis die Stileigenschaft hinzu, gefolgt von der CSS-Steuereigenschaft, in der wir mehrere CSS-Stile definieren können. Wie gesagt, wir müssen die Positionen oben und links als den Wert einer schwierigen Position definieren . Ich übergebe hier den Parameter Y, gefolgt von den Pixeln. Und dann brauchen wir eine linke Eigenschaft mit einem Wert von X Pixeln. Lassen Sie uns weitermachen und diese Codezeile duplizieren und die zwei Punkte umkreisen Okay, jetzt müssen wir diese Funktion aufrufen und die richtigen Argumente für die X- und Y-Parameter definieren die richtigen Argumente für die X- und Y-Parameter Wir müssen diese Funktion ausführen, wenn sich die Maus bewegt. Ich meine, wir müssen die Mausbewegungsereignisse an die Körperelemente anhängen . Und sobald dieses Ereignis ausgelöst wird, müssen wir diese Funktion aufrufen. Lassen Sie uns zunächst einen Event-Listener an den Body anhängen. Wenn ein Dokument einen Punktkörper enthält, gefolgt von der Listener-Methode „Event hinzufügen Dann müssen wir hier die Art der Ereignisse angeben, das wird eine Mausbewegung sein. Außerdem benötigen wir hier eine Callback-Funktion, die ausgeführt wird, sobald das Ereignis ausgelöst wird Außerdem werde ich hier das Event-Objekt übergeben. Zuerst. Schauen wir uns die Konsole an, wie dieses Event funktioniert. Öffnen wir die Entwicklertools und wechseln wir zum Konsolen-Tab. Sobald wir also anfangen, die Maus zu bewegen , wird das Ereignis eintreten. Richtig? Jetzt möchte ich mir das Event-Objekt ansehen, das wir hier in der Callback-Funktion übergeben haben Wenn wir jetzt die Maus bewegen, erhalten wir das Mausereignisobjekt in der Konsole. Wenn wir acht runterlassen, dann finden wir hier viele verschiedene Immobilien. Wir werden Client X und Client verwenden. Warum Immobilien? Tatsächlich geben sie uns die Entfernung vom oberen und linken Rand des Viewports Diese Werte sollten also die Argumente der Funktion sein. Ich meine, diese Werte sind die obere und linke Position des Kreises und der Punkte. Lassen Sie uns also zunächst Variablen erstellen. Ich werde die let-Deklaration verwenden . Nennen wir die Variable als X. Sie sollte dem E-Dot-Client X entsprechen Dann duplizieren Sie diese Codezeile und ändern Sie X in Y. Danach müssen wir die Funktion I mean Mouse Circle F N aufrufen die Funktion I mean Mouse Circle F N und X und Y als Argumente übergeben Wenn wir jetzt also die Maus bewegen, bewegen der Kreis und die Punkte bewegen sich mit dem Kurs. Richtig? Wie Sie sehen, müssen wir nun die Positionen der beiden Elemente leicht ändern , da sich der Cursor in der Mitte des Kreises mit einem.Um das zu erreichen, müssen mit einem.Um das zu erreichen, wir beide Elemente entlang der X- und Y-Achse bewegen , um -50 Prozent Transform Translate-Funktion Und wir müssen hier zweimal -50 Prozent bestehen. Okay, jetzt sind die Positionen der beiden Elemente festgelegt. Und das einzige, was wir tun müssen, ist, beiden Elementen eine kleine Animation hinzuzufügen. Dafür müssen wir CSS-Keyframes verwenden. Lassen Sie uns zunächst die Animation für den Mauskreis erstellen. Während der Animation werde ich die Größe der Elemente also ein paar Mal erhöhen und verkleinern . Erstellen Sie Keyframes. Ich nenne es Mouse, Circle and Him. Ich meine Animation. Bei 0% betragen Breite und Höhe also sechs RAM. Dann lass uns diesen Code duplizieren. Als nächstes werden es 25% sein. Ich werde beide Werte auf acht RAM erhöhen. Dann noch einmal, duplizieren Sie den Code. Der nächste Schritt werden 35 Prozent sein. Die Breite und Höhe werden voller RAM sein. Als Nächstes werden wir 70% haben. Die Werte werden eine Straßenbahn sein. Für den letzten Schritt, ich meine 100%, brauchen wir wieder Standardwerte, sechs Rampen. In Ordnung? Die Keyframes sind also bereit, und jetzt müssen wir diese Regeln auf den Mauskreis anwenden Lassen Sie uns weitermachen und die Animationseigenschaft verwenden. Zuerst müssen wir den Namen der Keyframes angeben , Mouse Circle Anime Dann wird die Dauer bei 10 s angegeben. Außerdem werden wir die Animation unendlich lang laufen lassen Und dann verwende ich eine der linearen Animations-Timing-Funktionen. Ordnung, wie Sie sehen können, ist der Kreis animiert Machen wir das ähnlich wie bei den Mauspunkten. Bei Mauspunkten werde ich die Größe nur einmal erhöhen. Lassen Sie uns also CSS-Keyframes erstellen. Ich nenne es Mouse Dots, Anime. Also bei 0% werde ich Breite und Höhe auf 0,5 RAM setzen. Dies sind die Standardwerte , bei denen der nächste Schritt 55% sein wird. Lassen Sie uns die Werte ändern, sie auf 1,5 g erhöhen. Und dann, am Ende der Animation, meine ich 100%. Wir brauchen wieder einen Standardwert von 0,5 g, oder? Die Keyframes sind also für die Mauspunkte vorbereitet. Lassen Sie uns weitermachen und ihm eine Animationseigenschaft zuweisen. Wir brauchen hier den Namen der Keyframes, Mauspunktanim, gefolgt von der Dauer 10 s. Dann wiederum brauchen wir unendlich und linear Okay? Wie ich sehen kann, sind beide Elemente animiert und wir haben hier einen schönen Effekt Bevor wir diese Vorlesung beenden, werde ich ein paar Dinge tun. Sobald der Cursor die Seite verlässt, möchte ich beide Elemente ausblenden. Dafür verwende ich eines der Ereignisse namens Mouse Leave. Lassen Sie uns den Event-Listener an den Hauptteil anhängen. Dann müssen wir hier das Ereignis mit der Maus angeben, gefolgt von der Callback-Funktion Um die Elemente auszublenden, verwende ich Opazität mit dem Wert Null Wenn also ein Mauskreis eine Punktdeckkraft im Punktstil mit dem Wert Null hat, dann duplizieren Sie diese Codezeile und ändern Sie die beiden eingekreisten Wenn wir nun die Seite verlassen, verschwinden der Kreis und der Punkt. Und wenn wir zurückkommen, werden sie wieder erscheinen. In Ordnung, wir sind fast fertig. Wir müssen nur noch eine Sache tun. Eigentlich haben wir hier ein kleines Problem. Wenn ich die Seite neu lade und Maus außerhalb der Seite lasse, landen der Kreis und der Punkt in der oberen linken Ecke der Seite Das brauchen wir nicht. Wir müssen das Problem lösen. Ich werde beide Elemente standardmäßig ausblenden und sie dann nur sichtbar machen die Mausbewegungsereignisse eintreten. Also müssen wir beiden Elementen standardmäßig die Opazität Null zuweisen beiden Elementen standardmäßig die Opazität Null Dann müssen wir die Opazität eins mit der Oberseite übergeben und die Positionen innerhalb der Funktion lassen Wenn ich die Seite jetzt neu lade , ist das Problem behoben Okay, endlich sind wir fertig mit dem Mauskreis. Fahren wir mit der nächsten Vorlesung fort. 6. Website-Header erstellen und anpassen: Okay, jetzt ist es an der Zeit, mit der Arbeit an unserem ersten Abschnitt zu beginnen , der diese Landingpage sein wird Wir haben hier ein paar verschiedene Elemente mit schönen Animationseffekten. Diese Kreise bewegen sich, sobald wir die Maus bewegen. Und wie Sie sehen, bewegen sie sich in die entgegengesetzte Richtung. Ebenfalls in der Mitte des Landing befindet sich ein großer Kreis, in dem Sie das Bild des Designers mit einigen schönen Effekten sehen können . Außerdem haben wir ein Logo in der oberen linken Ecke der Seite sowie einige Textelemente auf der linken und rechten Seite der Landing. Lassen Sie uns anfangen, ein HTML-Markup zu erstellen. Lassen Sie uns direkt nach dem Seitenhintergrund neue Kommentare einfügen . Wir brauchen Abschnitt eins von Abschnitt eins. Öffnen Sie dann das Abschnitt-Tag mit der Klasse Abschnitt eins. Wie gesagt, dieser Abschnitt wird einige verschiedene Elemente enthalten. Das erste wird das Logo sein. Lassen Sie uns neue Kommentare für das Logo einfügen. Dann öffne ich den Link-Tag mit einem Klassenlogo. Und als Inhalt werde ich dich angeben, Nick Brown. In Ordnung. Als nächstes werden wir animierte Kreise haben. Fügen wir also neue Kommentare für animierte Kreise ein. Insgesamt werden wir also fünf Kreise haben. Vier von ihnen werden klein sein und außerdem einen großen Kreis in der Mitte haben. Öffnen wir ein DIV-Tag für die Klasse. Kreise. Es wird die Hülle kleiner Kreise sein Die Kreise werden mithilfe von DIV-Tags erstellt. Öffnen wir TikTok also mit den Klassen Circle und Circle One. Der erste wird ebenfalls Common Class Name sein. Das zweite, wir werden es für einzelne Stile verwenden. Lassen Sie uns diese Codezeile dreimal duplizieren und dann die Klassennamen ändern. Okay, außerdem brauchen wir einen weiteren Kreis, in dem das Bild des Designers zu sehen sein wird Bild des Designers Öffnen wir das DIV-Tag. Es wird die Verpackung sein. Lassen Sie uns der Klasse Main Circle zuordnen. Und dann füge dein Bild-Tag ein. Geben wir hier den Pfad des Bildes an. Wir haben einen Bilderordner , den wir benötigen, um den Ordner Landing auszuwählen. Und dann wird das Bild als JPG-Punkt-Design gestaltet. In Ordnung, das war's, mit den Kreisen. Als Nächstes erstelle ich Überschriftenelemente, die auf der linken und rechten Seite des Landings platziert werden . Fügen wir neue Kommentare ein. Ausgewählter Text. Und von Feature-Text. Ich öffne das H4-Heading-Tag mit den Klassen Feature-Text und Feature-Text eins Auch hier wird der erstklassige Name für Common Styles verwendet. Was den zweiten betrifft, werden wir ihn für einzelne Stile als Inhalt verwenden . Lass uns dein Creativ einfügen. Dann werde ich diese Codezeile duplizieren. Ändere den Klassennamen, zu dem wir Text hinzufügen müssen, und ändere auch den Inhalt, den du entwerfen solltest. In Ordnung, also lassen Sie uns über das HTML-Markup sprechen. Moment ist hier nichts sichtbar, da der Hintergrund fest ist und die Elemente dahinter gelandet sind. Lassen Sie uns das Problem zuerst beheben. Fügen wir neue Kommentare für den ersten Abschnitt in die CSS-Datei ein. Wählen Sie dann diesen Abschnitt Elemente und ändern Sie seine Position, machen Sie ihn zu einem Relativen. Jetzt sind die Elemente sichtbar und dann können wir beginnen, sie anzupassen. Definieren wir die Breite und Höhe dieses Abschnitts. Ich werde mit 200 Prozent beginnen. Was die Höhe angeht, so wird sie 100% des Viewports ausmachen. In Ordnung, jetzt ist es an der Zeit , das Logo anzupassen. Lassen Sie uns neue Kommentare für das Logo einfügen. Wählen Sie dann die Link-Elemente aus. Zunächst werde ich ihre Position definieren. Machen wir es absolut. Wie Sie sich erinnern, wird es der oberen linken Ecke der Seite platziert Also werde ich RAM die oberste Position zuweisen , da beide linken Positionen fünf Runs sein werden. Lassen Sie uns auch die Schriftgröße erhöhen und es zu Ram machen. Ich werde Text in Großbuchstaben umwandeln auch die Farbe ändern, ihn weiß machen, oder? Das war's mit dem Logo. Jetzt müssen wir weitermachen und die restlichen Elemente anpassen. Bevor wir mit kleinen Kreisen beginnen, möchte ich mich um den Hauptkreis kümmern denn wie Sie sehen, haben wir hier ein großes Bild, das fast die gesamte Kreditvergabe abdeckt. Zuallererst möchte ich den Inhalt dieses Abschnitts in die Mitte stellen. Und dafür verwenden wir Flexbox. Wir müssen das Display auf Flex einstellen. Um die Elemente dann horizontal zu senden, benötigen wir das Justify-Content Was die vertikale Zentrierung angeht, müssen wir die Elemente ausrichten. Zentrum. Okay, der Inhalt ist also zentriert und jetzt müssen wir anfangen, am Hauptkreis zu arbeiten. Zunächst füge ich Kommentare ein, animierte Kreise. Und von animierten Kreisen. Wählen Sie dann den Hauptkreis aus und definieren Sie Breite und Höhe. Ich werde beide auf 55 RAM setzen. Und setzen Sie die Position auch auf absolut. Im Moment ist das Bild zu groß. Wir müssen die Größe des Bildes beibehalten, aber wir müssen auch ein Hoch auf das übergeordnete Element anwenden . Ich bin im Hauptkreis. Also werde ich Overflow Hidden verwenden. In Ordnung, jetzt ist das Problem behoben. Lassen Sie uns das Element mit einem Randradius von 50% abrunden. Außerdem müssen wir an das Bild innerhalb des Kreises senden . Dafür können wir wieder Flux-Bücher verwenden, um zu vermeiden, dass immer wieder derselbe Code geschrieben Ich werde eine neue Klasse in den Common Styles erstellen. Nennen wir es Center und weisen ihm Display Flex, Justify Content Center und Align Items Center zu. Dann werde ich diese Stile aus dem Abschnittselement entfernen . Und stattdessen können wir das Klassenzentrum der Sektion und auch dem Hauptkreis zuweisen Klassenzentrum der . In der HTML-Datei. Im Moment ist das Bild zentriert und wir müssen es ein wenig anpassen. Wählen wir Bild aus. Jetzt möchte ich eine der CSS-Eigenschaften namens Mix Blend Mode verwenden . Dadurch können wir das Bild mit diesem dunklen Hintergrund vermischen . Diese Eigenschaft kann unterschiedliche Werte akzeptieren. Du kannst mit ihnen herumspielen. In diesem Szenario ist Farbe meiner Meinung nach das beste. Ausweichen. In Ordnung, das war's mit dem Hauptkreis. Lass uns weitermachen und uns um den Rest der Kreise kümmern . Wählen wir den Wrapper aus und geben Elemente an. Und definieren Sie zunächst seine Position, machen Sie sie absolut. Und setzen Sie auch die Eigenschaften oben und links, beide auf Null. Als Nächstes werde ich dieses Element auf das gesamte Landing ausdehnen . Dafür werde ich festlegen, dass wir beide zu 200 Prozent verstecken können. Wie Sie sich erinnern, haben wir vier verschiedene kleine Kreise erstellt . Ich werde sie mithilfe eines CSS-Grid ausrichten. Wir werden zwei Spalten und zwei Zeilen erstellen. Und wir platzieren jeden Kreis in der separaten Rasterzelle. Lassen Sie uns also zunächst die Anzeige auf das Raster setzen . Um Spalten zu definieren, verwende ich eine Eigenschaft namens Grid-Template-Spalten. Wie gesagt, wir werden zwei ähnliche Spalten haben. Also werde ich die Wiederholungsfunktion verwenden, die zwei Argumente benötigt. Die erste ist die Anzahl der Spalten bis. Was den zweiten betrifft, so wird es die Größe sein. Wie die Größe. Ich werde eine Brucheinheit verwenden. Lassen Sie uns diese Codezeile duplizieren und Spalten in Zeilen umwandeln. In Ordnung? Um das Raster-Layout zu sehen, werde ich die Seite überprüfen. Und suchen Sie auf der Registerkarte Elemente nach den Kreisen. Wie ich sehen kann, haben wir hier einen kleinen Button namens Grid. Wenn ich darauf klicke, wird das Rasterlayout angezeigt. Wir haben hier vier verschiedene Zellen und jeder Kreis wird in eine separate Zelle gehen. Lassen Sie uns fortfahren und Kreis auswählen und seine Breite und Höhe definieren. Ich werde beide auf 20 setzen, um zu rennen. Um sie abgerundet zu machen verwenden Sie für den Radius den Wert von 50%. Und dann werde ich eine temporäre Farbe verwenden. Ich meine, die Hintergrundfarbe. Lass es uns auf Rot setzen. Wie Sie sehen können, befinden sich alle vier Kreise in einer separaten Zelle. Sie werden automatisch ausgerichtet , weil wir vier Zellen haben. Und für Kreise müssen wir kein Raster-Layout für den Kreis definieren. Das einzige, was wir tun müssen, ist Kreise in der Mitte der Zellen zu platzieren. Und dafür können wir eine Linie verwenden, das Selbstzentrum. Es wird vertikal an die Elemente gesendet. Und wir müssen auch Egozentrik rechtfertigen, die sich horizontal auf das Element überträgt In Ordnung? Jetzt müssen wir jeden Kreis separat anpassen. Lass uns weitermachen und mit dem ersten Kreis beginnen. Ich werde den Hintergrund definieren. Lassen Sie uns die URL verwenden und den Teil des Bildes angeben. Wir brauchen Ordnerbilder als Landing. Und dann müssen wir Circle One, IMG Punkt JPG auswählen. Als Nächstes spezifiziere ich die Position und mache sie in die Mitte. Außerdem müssen wir Background Repeat auf No-Repeat setzen. Und schließlich definieren wir die Größe des Hintergrunds machen ihn deckend. Kam. Wir haben hier also ein nettes Hintergrundbild. Als Nächstes erstelle ich eine Grenze. Stellen wir die Breite auf 2,5 RAM ein, dann wird der Stil des Randes gepunktet Und als Farbe verwenden wir einen B14 von 18. Außerdem möchte ich, dass der Rand außerhalb des Bildes liegt. Und dafür müssen wir den Hintergrundclip mit dem Wertinhaltsfeld verwenden . In Ordnung, schauen wir uns das an. Nun, den ersten Kreis, jetzt werde ich diesen Code dreimal duplizieren. Dann ändere die Klassennamen. Außerdem werde ich die Namen der Bilder ändern. Und außerdem werde ich die Grenzen ändern. Für die zweite Ordnung benötigen wir die gleiche Breite wie für den Stil, der gestrichelt werden soll Und ändere auch die Farbe. Wir brauchen F, F, B, D, 07. Dann werde ich für den dritten Kreis die Breite erhöhen. Machen wir ein RAM daraus. Dann ändere den Stil. Es wird das Doppelte sein. Und ändere auch die Farbe, mach neun draus. Hirsch. Als Teil des letzten Kreises wird die Breite 0,7 betragen. Es sollte das Doppelte sein. Und als Farbe verwenden wir Weiß. In Ordnung, also alle vier Kreise sind Benutzerdefiniert. Das einzige, was ich tun werde, ist, ihre Opazität zu verringern Lassen Sie uns Circle zuweisen. Ich habe den gebräuchlichen Klassennamen Opazität 0,5. In Ordnung? Also endlich, mit den Kreisen sind wir fertig. Als Nächstes kümmere ich mich um die Textelemente, die auf der linken und rechten Seite platziert werden sollten. Lassen Sie uns weitermachen und neue Kommentare einfügen. Für ausgewählten Text. Wählen wir beide Überschriften mit einem gemeinsamen Klassennamen und hervorgehobenem Text aus Ich werde die Schriftgröße erhöhen und es zum Laufen bringen. Ebenfalls. Ändern Sie die Farbe, machen Sie sie weiß und wandeln Sie Text in Großbuchstaben Ordnung, danach richte ich beide Überschriften auf der linken und rechten Dafür verwende ich Margin. Wählen wir die erste Überschrift mit ihrer individuellen Klasse Feature-Text1 und verwenden Margin mit den folgenden Werten Ich setze es oben auf Null und dann auf R0 auf der rechten Seite Dann haben wir unten Null und drehen uns auf der linken Seite um. Lassen Sie uns diesen Code duplizieren. Ändere den Klassennamen. Wir benötigen Feature-Text2 und ändern auch die Werte Ich belasse den Wert der Oberseite bei Null. Dann haben wir hellbraun als Null und dann Auto. Okay, lassen Sie uns also davon ausgehen die Elemente richtig ausgerichtet sind Als Nächstes platziere ich die Buchstaben vertikal in einer Spalte. Dafür müssen wir die Breite auf Null setzen. Außerdem müssen wir eine dieser CSS-Eigenschaften verwenden, die Zeilenumbruch bezeichnet wird, und ein Wort mit einem Wertebruch verwenden. Die Elektroden sind also vertikal angeordnet. Als Nächstes werde ich den Abstand zwischen den Buchstaben vergrößern. Dafür können wir die Zeilenhöhe erhöhen. Machen wir 3,5 draus. In Ordnung, wir sind also fast fertig mit der Landung. Das einzige, was ich tun möchte, ist die Position dieser Überschriftenelemente zu ändern. Wenn wir uns das fertige Projekt ansehen und nach unten scrollen, werden Sie feststellen, dass die Überschriften für eine Weile klebrig werden Definieren wir also ihre Position und machen wir sie griffig. Wenn wir also die Elemente am oberen Rand des Viewports anbringen wollen , müssen wir die obere Position auf Null setzen In Ordnung, endlich haben wir eine Landingpage angepasst. Jetzt ist es an der Zeit, es dynamisch zu machen. Ich meine, wir müssen ein paar nette Animationen und Effekte hinzufügen . Fahren wir also mit der nächsten Vorlesung fort. 7. Kreise animieren: Ordnung, wir haben in einer früheren Lektion eine Landingpage anpassen müssen, und jetzt müssen wir sie dynamisch gestalten Wir müssen diese Kreise bei der Mausbewegung animieren. Bevor wir anfangen, daran zu arbeiten, möchte ich das eine winzige Problem herausgreifen. Wir haben zwei Wörter auf der linken und rechten Seite. Der zweite wäre ein Design gewesen, kein Designer. Also lass es uns in der HTML-Datei ändern. Richtig? Also werden wir dafür sorgen, dass die Animation mit JavaScript funktioniert. Gehen wir zur Datei script.js. Als erstes wähle ich Kreise und das Bild aus. Vorher möchte ich dir eine schnelle Änderung vornehmen. Eigentlich wird diese Datei groß sein, also wäre es besser, wenn wir diese beiden Variablen in den Kommentaren platzieren . Okay, danach erstelle ich neue Kommentare für die animierten Kreise unten. Dann wähle ich, wie gesagt, die Kreise und das Bild aus. Lassen Sie uns eine neue Variable erstellen. Ich nenne es Circles. Wir haben mehrere Kreise, daher werde ich die Methode Query Selector All verwenden Geben wir hier den Klassennamen Circle an. Als Nächstes wähle ich das Bild aus. Lassen Sie uns eine neue Variable erstellen und sie Main IMG nennen und Image mithilfe der Abfrageauswahlmethode auswählen Wir müssen hier den Klassennamen der übergeordneten Elemente, den Hauptkreis, und dann den Zielnamen IMG angeben den Klassennamen der übergeordneten Elemente, den . Okay, danach erstelle ich eine Funktion, nennen wir sie animate Diese Funktion benötigt drei Parameter. Das erste wird ein Event-Objekt sein und wird auch X- und Y-Parameter haben. Sie werden uns helfen, die Richtungen der Mausbewegungen zu definieren . Also wieder müssen wir Kreise bewegen, wollen, dass sich die Maus bewegt, und wir müssen sie in die entgegengesetzte Richtung bewegen. Das heißt, wenn die Maus nach links geht , sollten sich die Kreise nach rechts bewegen. Und das Gleiche brauchen wir vertikal. Wenn die Maus nach oben geht, sollte der Kreis nach unten gehen Okay, also zunächst möchte ich hier die Hauptsache der Dysfunktion erwähnen , nämlich dass wir die Position der Maus mit Client X und Client definieren müssen der Maus mit Client X und Client Warum Eigenschaften in der Position der Maus? Ich meine die Position Acht, wenn es aufhört, sich zu bewegen. Dann müssen wir diese Werte mit der neuen Position der Maus vergleichen diese Werte mit der neuen Position der und erhalten die Richtung der Mausbewegung. Also lasst uns weitermachen und anfangen, den Code zu schreiben. Es wird verständlicher und in der Praxis müssen wir zwei Variablen für Client X und Client erstellen . Warum Immobilien? Ich nenne die erste Variable X. Sie sollte gleich Null sein. Dann duplizieren Sie diese Codezeile und ändern Sie X in Y. Danach müssen wir die Werte von Decline X und Client speichern die Werte von Decline X und Client Warum Eigenschaften in diesen Variablen. Also wir brauchen hier, ich werde gebeten, gleich dem E-Dot-Client X zu sein und dasselbe, was wir für die Y-Richtung benötigen Auch hier speichern diese Variablen die letzte Position der Maus. Wenn wir nun die Richtung der Mausbewegung ermitteln möchten , können wir einfach die X- und Y-Parameter mit den Variablen amex und M Y vergleichen X- und Y-Parameter mit den Variablen amex und M Y Dazu müssen wir eine if-Anweisung verwenden, in wir definieren müssen, ob X kleiner als M X ist. Wenn diese Bedingung zutrifft, dann führe ich einige Texte zur Konsole aus, z. B. nach links verschoben. Dann erstelle ich eine weitere if-Anweisung , in der wir die Y-Richtung definieren müssen Wir brauchen also Y ist kleiner als MY. Und dann renne ich zur Konsole und gehe nach oben. Richtig? Jetzt können wir diese Funktion aufrufen, wenn die Mausbewegungsereignisse inspiriert Wir haben dieses Ereignis alle schon einmal verwendet. Also müssen wir diese Funktion aufrufen. Hier. Wir müssen die Argumente E, X und Y übergeben. Okay? Schauen wir uns also die Seite an und wechseln wir zum Konsolen-Tab. Wenn wir uns nach oben bewegen, bekommen wir es in die Konsole. Und wenn ich nach links gehe, erhalten wir in der Konsole das richtige Ergebnis. Jetzt wissen wir, wie wir die Richtungen der Mundbewegungen ermitteln und konnten die Bewegung der Kreise definieren. Auf die gleiche Weise können wir die Richtung der Mausbewegung nach rechts und nach unten definieren der Mausbewegung nach rechts und nach unten In Ordnung? Wenn sich die Maus also nach links bewegt , sollten sich die Kreise nach rechts bewegen. Und um das zu tun, müssen wir die Werte ihrer linken Positionen erhöhen. Zuerst müssen wir uns die Kreise ansehen. Wir haben sie mit der Methode Query Selector All ausgewählt, die ein Array-ähnliches Objekt namens Node List zurückgibt Array-ähnliches Objekt namens Node Also müssen wir die Knotenliste durchsehen und die Lag-Position für jeden Kreis ändern. Um die Knotenliste durchzusehen, verwende ich eine der Array-Hilfsmethoden namens for-each Wir müssen es an den Kreisen befestigen. Die forEach-Methode benötigt ein Argument. Es wird die Callback-Funktion sein, die selbst einen Parameter benötigt und das ist das aktuelle Element während der Schleife Wie gesagt, wir müssen die linke Position des Kreises ändern . Deshalb brauchen wir hier eine Eigenschaft namens Style, gefolgt von left. Und ich werde die Position um hundert Pixel ändern. Wenn ich nun die Maus nach links bewege, bewegen sich die Kreise nicht, weil sie momentan eine statische Standardposition haben. Also müssen wir es ändern und relativ machen. Wenn ich mich jetzt nach links bewege , bewegen sich die Kreise nach rechts. Im Moment bewegten sie sich ohne jegliche Wirkung. Wir werden das beheben, indem wir die Übertragungseigenschaften Sonne verwenden. Kümmern wir uns zunächst um die Bewegungen. Neben diesen Kreisen müssen wir auch das Bild bewegen. Also müssen wir den Hauptstil von IMG verwenden, nicht links. Und der Wert hundert Pixel. Wie bei den Kreisen müssen wir die Position des Bildes ändern und es relativ machen. Wenn wir uns also nach links bewegen, bewegen sich die Kreise und das Bild bewegt sich auf die rechte Seite, nach rechts. Lassen Sie uns weitermachen und uns um die Aufwärtsbewegung kümmern. Wir können uns einfach diesen Codeblock schnappen und ihn in die zweite if-Anweisung einfügen. Das einzige, was wir tun mussten, war die linke Position nach oben zu ändern. Wenn ich also die Maus nach oben bewege, gehen die Elemente nach unten. Richtig? Zwei Richtungen sind also bereit. Jetzt müssen wir uns um den Rest der Anweisungen kümmern. Ich meine, wenn wir die Maus nach rechts und nach unten bewegen , müssen wir dafür Else-if-Aussagen verwenden bei denen wir entgegengesetzte Bedingungen berücksichtigen müssen Wir brauchen hier also X ist größer als M X. Wenn diese Bedingung zutrifft, müssen wir die Elemente auf die linke Seite verschieben. Daher müssen wir die Werte der linken Position verringern . Kopieren wir diesen Code. Fügen Sie es hier ein und fügen Sie Minuszeichen hinzu. Das Gleiche benötigen wir für die zweite IF-Aussage. Lassen Sie uns als Bedingung, die wir benötigen, Else-wenn-Aussagen erstellen, Y ist größer als MY Dann schnapp dir den Code von hier und noch einmal, füge die Minuszeichen hinzu. Wie Sie sehen können, funktionieren alle vier Richtungen einwandfrei. Jetzt müssen wir diese Tatsache glatter machen. Dafür müssen wir Transition nutzen. Wir müssen, Sie haben eine Dauer von 2 s. Und die oberen 2 s. Eigentlich brauchen wir den gleichen Übergang auch für das Bild. Nehmen wir also diese Codezeile und fügen sie für das Bild ein. In Ordnung, jetzt haben wir einen schönen glatten Effekt. Eigentlich haben wir hier ein kleines Problem. Wenn ich die Seite neu lade und anfange, die Maus zu bewegen, springen die Kreise nach oben Und um das zu beheben, müssen wir die Obergrenze definieren und Besitztümer standardmäßig vermieten Lassen Sie uns beide auf Null setzen. Das Gleiche brauchen wir auch für das Bild. In Ordnung, also endlich sind wir fertig. Bevor wir diese Vorlesung beenden, möchte ich noch etwas tun. Wir haben hier ein paar Mal 100 Pixel verwendet. Und möglicherweise müssen Sie diesen Wert in Zukunft ändern. Und dafür solltest du es überall ändern. Ich denke also, es wäre besser, wenn wir diesen Wert in der Variablen speichern und dann diese Variable unten verwenden Lassen Sie uns die Variable Z erstellen und sie gleich hundert machen. Dann ändere ich die Pixeldarstellung mit der Variablen Z. In Ordnung, das war's Wir haben die Arbeit an den animierten Kreisen abgeschlossen. Lass uns weitermachen. 8. Hauptschaltfläche erstellen und anpassen: Okay, also in der letzten Vorlesung haben wir diese animierten Kreise erstellt Und jetzt werde ich hier an diesem Button arbeiten. Es hat einige nette Schwebeeffekte. Sobald wir den Mauszeiger darüber bewegen, dehnt sich dieser gelbe Kreis auf die gesamte Schaltfläche Es spielt keine Rolle, über welche Seite Sie den Mauszeiger bewegen. Der Button von. Dieses gelbe Element erscheint von allen Seiten. Und auch der Knopf wird sich leicht drehen. Moment sehen wir hier die Projekte, und wenn wir darauf klicken, wird zum Projektbereich weitergeleitet. Aber in dieser Vorlesung werde ich es einfach erstellen und anpassen. Was die Navigation angeht, werde ich mich später darum kümmern. Bevor wir anfangen, an dem Button zu arbeiten, werde ich der Kreditvergabe noch ein paar Dinge hinzufügen. Ich möchte diese kleinen Kreise ein wenig vom Hauptkreis weg bewegen , weil sie mehr Platz zum Verschieben haben. Was den Hauptkreis angeht, möchte ich ihn beim Zeigen mit der Maus ein wenig erweitern Okay, lassen Sie uns zunächst die Kreise bewegen. Ich werde das mit Margin machen. Für den ersten und dritten Kreis benötigen wir also Margin-Left mit einem Wert minus zehn RAM Für den zweiten und vierten Kreis verwenden wir Margin-Right mit einem Wert minus zehn In Ordnung, das war's mit diesem kleinen Kreis. Also lass uns weitermachen und uns um den Hauptkreis kümmern. Ich werde die Breite und Höhe erhöhen, wenn der Mauszeiger darauf zeigt. Wählen wir also den Hauptkreis mit dem Mauszeiger aus und stellen dann Breite und Höhe ein, beide auf 75 run Außerdem werde ich Transition verwenden. Für einen gleichmäßigen Effekt. Wir brauchen mit einer Dauer Punkte auf der Sekunde und dann Höhe mit der gleichen Dauer. Wenn ich also den Mauszeiger über den Hauptkreis bewege, passiert nichts Der Grund ist, dass wir hier den Kreis und die Punkte haben. Sie sind vor dem Mund. Und sie blockieren die Zeigerereignisse. Um das zu beheben, müssen wir beide Elemente zuweisen. Zeigerereignisse, keine. Ordnung, jetzt war alles Ordnung und wir können anfangen , an dem Button zu arbeiten Lassen Sie uns zunächst HTML-Markup erstellen. Fügen wir Ihre bekannten Kommentare ein. Für den Hauptknopf. Ich nenne es Main , weil wir auf der Webseite ein paar Suchschaltflächen haben werden . Die Schaltfläche wird mithilfe von Linkelementen erstellt. Ordnen wir ihr die Klasse main btn zu. Der Button wird also aus ein paar verschiedenen Teilen bestehen . Wir werden einen Pfeil haben, der drei Linien erstellt wird. Und wir werden auch ein Span-Element mit den Textprojekten haben . Öffnen wir das div-Tag, das den Inhalt der Schaltfläche umschließt , die der Klasse main btn content zugewiesen ist Dann erstelle ich Zeilen mit Div-Tags. Mit der BGN-Hauptleitung der Klasse. Wir brauchen drei davon. Und schließlich müssen wir Element mit den Inhaltsprojekten verbinden. Lassen Sie uns neue Kommentare in die CSS-Datei einfügen. Für den Hauptknopf. Wählen Sie dann die Linkelemente und setzen Sie ihre Position auf absolut. Jetzt wird es in der Mitte der Seite platziert. Wenn ich alle Elemente auswähle, siehst du sie in der Mitte. Okay, fügen wir noch ein paar Stile hinzu. Ich werde Breite und Höhe definieren. Machen wir aus beiden 13 RAM. Ändern Sie auch die Hintergrundfarbe. Ich benutze deinen Anruf oder 90 E, 0 E. Und mache auch die Rundung der Taste mit dem Randradius Okay, als Nächstes ändere ich seine Position. Ich möchte es am Ende dieses Abschnitts platzieren. Also legen wir die untere Rampe 23 an. Das Letzte, was ich jetzt in Bezug auf dieses Element tun werde , ist, eine Grenze zu erstellen. Wir brauchen es mit den Werten, die auf RAM zeigen, dann wird der Stil gepunktet. Was die Farbe angeht, sie wird weiß sein. In Ordnung, lassen Sie uns weitermachen und den Inhalt anpassen. Wählen Sie es aus. Und lassen Sie uns zunächst seine Breite und Höhe definieren. Ich setze beide auf 200 Prozent. Und ich werde auch eine Grenze schaffen. Lassen Sie uns dem ram-gepunkteten Punkt einen Punkt zuweisen und auch die Farbe E7 P E 08 verwenden Im Moment hat der Inhalt also die Form dieser Abfrage Ich werde es rund machen. Verwenden wir also den Grenzradius mit einem Wert von 50 Prozent. Okay? Als Nächstes werde ich einen kleinen Raum zwischen diesen Grenzen schaffen. Dafür werde ich der Haupttaste eine kleine Polsterung zuweisen der Haupttaste eine kleine Polsterung Machen wir eine Rampe von 0,1. Standardmäßig legen wir Randfeld in Boxgröße Und es ermöglicht uns , die Breite und Höhe der Elemente unverändert zu lassen. Und es verschiebt den Inhalt des Elements. In Ordnung, schauen wir uns jetzt den Inhalt an. Als Nächstes erstelle ich den Pfeil. Dafür haben wir drei leere div-Elemente. Zuallererst werde ich dieses Panel verstecken, das für eine Weile bestimmt Und wählen Sie dann die Linien aus. Zunächst setze ich die Position auf absolut. Dann definiere ich die Spitzenposition. Machen wir es für RAM. Außerdem müssen wir Breite und Höhe definieren. Die Breite wird drei RAM betragen. Was die Höhe angeht, werde ich 0,5 Gramm daraus machen und zusätzlich einen Rand mit dem Wert 0,1 RAM Solid erstellen. Und die weiße Farbe. Hier haben wir die Linien. Auf den ersten Blick scheint es, dass wir hier nur eine Linie haben, aber alle drei Linien liegen übereinander. Wir müssen jeden von ihnen einzeln positionieren. Aber vorher werde ich sie innerhalb des Inhalts zentrieren. Dafür werde ich Flexbox verwenden. Wir können dem Inhalt das Klassenzentrum und die HTML-Elemente zuweisen . In Ordnung, jetzt sind die Linien in der Mitte platziert. Als Nächstes müssen wir jede Zeile einzeln positionieren , um einen Pfeil zu erstellen. Fangen wir mit der ersten Zeile an. Ich wähle die Hauptleitung von BTN mit dem n-ten Child-Selektor Und wir müssen hier die Nummer eins angeben. Also werde ich die Linie entlang der Z-Achse um -45 Grad drehen der Z-Achse um -45 Die erste Zeile wird also gedreht. Machen wir dasselbe für die zweite Zeile. Eigentlich werde ich diesen Code duplizieren, dann die Zahl ändern, die wir benötigen, und auch das Minuszeichen entfernen . Wie Sie sehen können, sind beide Linien gedreht, aber das brauchen wir nicht Gerade jetzt. Sie werden von der Mitte aus gedreht Ich meine, der Ursprung der Transformation ist das Zentrum. Wir müssen es ändern. Im Fall der ersten Zeile muss der Ursprung der Transformation links in der Mitte liegen. Was die zweite Zeile angeht, brauchen wir die rechte Mitte. Jetzt haben wir ein besseres Ergebnis, aber wir müssen noch einige Änderungen vornehmen. Ich möchte beide Linien horizontal verschieben. Ich meine, wir müssen die erste Zeile auf die linke Seite verschieben. Was den zweiten betrifft, sollten wir ihn auf die rechte Seite verschieben. Also werde ich das mit der Funktion translate x machen. Für die erste Zeile benötigen wir hier -0,65 RAM. Wie wahrscheinlich die zweite Zeile benötigen wir den gleichen Wert, aber ohne das Minuszeichen. Ordnung, endlich sind die ersten beiden Zeilen korrekt platziert. Das einzige, was ich tun möchte, ist, Teile der Grenzen von beiden Linien zu entfernen . Für den ersten brauchen wir für die Fahrt, den Wert keinen. Was den zweiten betrifft, so brauchen wir eine linke Grenze. Keine. In Ordnung, lassen Sie uns weitermachen und uns um die dritte Zeile kümmern. Wählen wir es erneut mit dem Kinderwähler aus. Im Fall der dritten Linie müssen wir also acht entlang der Z-Achse um 90 Grad drehen der Z-Achse um 90 Grad Außerdem müssen wir es mit der Funktion translate x um eine Rampe von 0,5 verschieben . Was die Grenze zur linken Grenze angeht, keine. In Ordnung, also endlich haben wir hier einen Pfeil. Lassen Sie uns weitermachen und dieses Span-Element anpassen, das derzeit im HTML-Code verborgen ist. Lassen Sie uns diesen Kommentar von hier aus loswerden und dann Span-Elemente in der CSS-Datei auswählen. Zuallererst werde ich diese Position definieren. Machen wir es absolut. Und dann verschiebe es ein wenig nach unten, indem du untere Position mit einem Wert von drei Rampen verwendest, und ändere auch die Farbe, mache es weiß. Hier haben wir also dieses Span-Element. Fügen wir noch ein paar Stile hinzu. Wir müssen die Schriftgröße ändern. Machen wir 1,1 RAM draus. Außerdem werde ich die Schriftstärke erhöhen. Machen wir 600 daraus und transformieren dann Text in Großbuchstaben In Ordnung, das war's also mit diesem Spannelement. Das einzige, was ich in diesem Video tun werde , ist, den Knopf selbst zu drehen. Also lassen Sie uns ihm eine Transformation zuweisen. Um 40 Grad drehen. In Ordnung, lass uns sehen. Die Schaltfläche wurde erstellt und angepasst. Als nächstes müssen wir einen Schwebeeffekt erzeugen. Fahren wir also mit der nächsten Vorlesung fort. 9. Welligkeitseffekt zur Haupttaste hinzufügen: In der vorherigen Lektion haben wir also die Hauptschaltfläche auf der Landingpage erstellt und angepasst . Und jetzt müssen wir einen Schwebeeffekt erzeugen. Schauen wir uns das fertige Projekt noch einmal an. Sobald wir den Mauszeiger über den Button verdeckt der gelbe Kreis den Inhalt Es erscheint genau von der Seite, an der wir in den Mund kommen, und auch der Inhalt dreht sich leicht. Wir werden diesen Effekt mithilfe von JavaScript- und CSS-Animationen erstellen. Okay, gehen wir zur Antwort der Datei script.js, um den Code zu schreiben, neue Kommentare einzufügen, den Main Button und den Main Button Das erste, was wir tun müssen, ist die Koordinaten des Cursors in der Schaltfläche abzurufen. Ich meine, wir müssen die Oberseite ermitteln und die Position des Cursors vom oberen und linken Rand der Schaltfläche aus messen lassen des Cursors vom oberen und linken Rand der Schaltfläche aus messen . Bevor wir das tun, müssen wir die Schaltfläche selbst auswählen. Lassen Sie uns also die variable Haupt-BTN erstellen und den unteren Teil mithilfe der Abfrageauswahlmethode auswählen Wir müssen hier den Klassennamen Main mit ten angeben. Danach müssen wir ihn anhängen und den Event-Listener mit der Maus Ereignisse eingeben Wir müssen also die Event-Listener-Methode als das Ereignis mit der Mauseingabe und auch die Callback-Funktion hinzufügen das Ereignis mit der Mauseingabe und auch die Callback-Funktion Die Enter-Methode mit der Maus wird also nur einmal ausgelöst, wenn wir den Mauszeiger über das Element Wie gesagt, wir müssen die linke obere Position des Cursors innerhalb des Buttons festlegen Um diese Positionen zu bekommen, müssen wir den Kunden X und den Kunden warum Eigenschaften verwenden? Wie Sie sich erinnern, geben sie uns die obere und linke Position des Cursors, gemessen vom oberen und linken Rand des Viewports Um also die Positionen des Kurses innerhalb der Schaltfläche zu ermitteln, müssen wir den Unterschied zwischen den X- und Y-Eigenschaften des Clients und der linken und oberen Position des Kurses ermitteln. Um es verständlicher zu machen, lassen Sie uns den Code schreiben. Zuerst. Lassen Sie uns hier und beim Event-Objekt eine Pause einlegen. Als Nächstes zeige ich Ihnen, wie Sie die Informationen über die Elemente erhalten. Dafür können wir eine der Methoden namens get bounding client rect verwenden get bounding client rect Gehen wir zur Konsole und sehen, was uns diese Methode bietet. Wir brauchen E-Punkt, Ziel, Punkte, die Bounding-Client-Right. Wenn ich also mit der Maus über die Schaltfläche fahre, erhalten wir ein Objekt namens DOM React Wenn ich es runtergelassen habe, finden Sie hier ein paar verschiedene Immobilien. Wir haben die Positionen, ich meine unten, von links nach rechts und oben. Außerdem haben wir hier die Breite und Höhe der Elemente. Außerdem können Sie hier die X- und Y-Eigenschaften sehen. Und eigentlich sind sie die gleichen wie die linken und oberen Eigenschaften. Wir können diese Werte also verwenden, um die linke obere Position des Cursors innerhalb der Schaltfläche zu berechnen die linke obere Position des Cursors innerhalb der Schaltfläche Ich werde eine neue Variable erstellen. Nennen wir es links. Dann brauchen wir E-Punkt-Client X minus E-Punkt, Zielpunkte. Ruft die Methode Bounding Client Rect ab. Und wir müssen unsere linke Position benutzen. Sehen wir uns diese Variable in der Konsole an. Wenn wir den Mauszeiger über den Buxom bewegen, erhalten wir die linke Position des Aber jetzt innerhalb des Buttons. Ich meine, es wird vom linken Rand des Buttons aus gemessen. In Ordnung? müssen wir die Spitzenposition definieren. Wir können diesen Code einfach duplizieren und dann den Namen der Variablen ändern, die wir oben benötigen. Warum brauchen wir auch Ihren Kunden? Und dann wieder top. In Ordnung, also beide Positionen sind definiert und jetzt müssen wir neue Elemente für diese Positionen erstellen Wir werden das mit einer der DOM-Methoden namens create Elements tun . Ich werde außerhalb der Ereignisse eine neue Variable deklarieren . Nennen wir es Ripple. Dann unten müssen wir ein neues Div-Element erstellen. Verwenden Sie die Methode „Element erstellen“. Wir müssen den Tag-Namen in den Klammern angeben den Tag-Namen in den Klammern Danach müssen wir die linken oberen Positionen des Ripple definieren linken oberen Positionen des Ripple Und wir werden die Werte verwenden , die wir hier definiert haben. Also brauchen wir hier Ripple-Punkt, Stil, Punkt links. Dann öffne Backticks und füge links deine Variable ein, die wir gerade definiert haben Dann dupliziere ich diese Codezeile und ändere von links nach oben. Das Element wird also erstellt, aber wir müssen es an die Schaltfläche anhängen Dazu müssen wir eine der Methoden namens prepare verwenden , und sie fügt die Elemente als erstes untergeordnetes Element des übergeordneten Elements hinzu. Wir müssen hier den Wert Ripple übergeben Um zu beweisen, dass das Element beim Zeigen mit der Maus erzeugt, wechseln wir zur Registerkarte Elemente Und dann bewege den Mauszeiger über den Button. Wie Sie sehen können, wird das tiefe Element innerhalb der Schaltfläche erstellt. Und wir haben hier auch die linken und oberen Positionen. Ordnung, als Nächstes klicken Sie auf Dieses Element in der CSS-Datei anpassen Dieses Element in der CSS-Datei Lass uns eine neue Klasse erstellen. Ich nenne es Ripple. Damit die Positionen links oben funktionieren, müssen wir die Position des Ripple definieren Machen wir es absolut. Dann definiere ich Breite und Höhe. Lassen Sie uns beide auf 200 Prozent einstellen und auch die Hintergrundfarbe ändern. Lass uns deine Farbe verwenden, u0, v0. Oh acht. Okay, das war's mit diesen Ripple-Kacheln im Moment Um sie auf die Elemente anzuwenden, müssen wir diese Klasse zur Elementklassenliste hinzufügen. Wir brauchen also eine Ripple-Punktklassenliste. Dann müssen wir eine Methode namens add verwenden. Und wir müssen hier vorbeikommen. Welligkeit. Okay, wenn Sie also den Mauszeiger über die Schaltfläche bewegen, werden die neuen Elemente angezeigt Wenn ich den Mauszeiger mehrmals über die Schaltfläche bewege, werden die verschiedenen Elemente erstellt Aber eigentlich werden wir das bald beheben. Lassen Sie uns zunächst dieses Element mit einem Randradius von 50 Prozent abgerundet machen mit einem Randradius von 50 Prozent Außerdem müssen wir es um -50 Prozent nach links und nach oben verschieben -50 Prozent nach links und nach oben Verwenden wir dafür Transform als die Übersetzungsfunktion mit den Werten -60% und erneut -50% Jetzt haben wir ein besseres Ergebnis und es ist Zeit, eine Animation zu erstellen. Standardmäßig sind Breite und Höhe dieses Elements also Null. Und sobald wir den Mauszeiger über die Schaltfläche bewegen, die Größe des Berichts sollte die Größe des Berichts mit der Animation zunehmen Also müssen wir CSS-Keyframes erstellen. Ich werde es Ripple Anime nennen. Wir werden also zwei Schritte machen. Bei Null Prozent werden Breite und Höhe der Elemente Null sein. Das ist was zu 100%. Ich mache sie zu 100%. In Ordnung, die Keyframes sind fertig. Wie wendet man diese Styles nun an? Also die Elemente, die eine Animationseigenschaft verwenden, müssen wir hier den Namen der Keyframes, Ripple Anime, und auch die Dauer angeben , die 0,5 s sein wird. Wenn ich jetzt also mit der Maus über die Schaltfläche fahre , wird das Element glatt angezeigt Aber wie Sie sehen, haben wir hier ein paar Probleme. Sobald das Element erscheint und seine Größe vergrößert ist , wird es ausgeblendet Wir müssen also den Status, den wir haben, bei 100% beibehalten. Dafür müssen wir einen Wert verwenden, der als vorwärts bezeichnet wird. Jetzt ist dieses Problem behoben und das Element ist nicht mehr hoch. Das nächste Problem ist , dass die Größe des Elements nicht ausreicht, um den Button abzudecken, also müssen wir ihn vergrößern. Machen wir innerhalb der Höhe, beide 200 Prozent. Jetzt ist diese Größe also doppelt so groß, aber sie reicht immer noch nicht aus, denn wenn ich die Maus einführe und sie am Rand des Buttons anhalte, deckt Ripple sie nicht ab Also lasst uns innerhalb von hide etwas erhöhen. Machen wir sie zu 210%. In Ordnung, jetzt ist das Problem behoben. Als Nächstes werde ich mich darum kümmern die äußeren Teile des Ripple zu verstecken Dafür können wir einfach Overflow Hidden verwenden. In Ordnung, jetzt haben wir viel bessere Ergebnisse. Als Nächstes möchte ich den Ripple loswerden, will, dass die Maus die Taste lässt Wir müssen eines der Events namens Mouse Leaf verwenden. Fügen wir also Maus-Live-Events und einer Callback-Funktion an den Haupt-BTM-Event-Listener mit Maus-Live-Events und einer Callback-Funktion an den Haupt-BTM-Event-Listener an Um die Elemente zu entfernen, müssen wir eine der Methoden verwenden, die als Remove Child bezeichnet werden. Und wir müssen hier den Namen multivariabel angeben. In Ordnung, jetzt funktioniert alles perfekt. Das Letzte, was ich tun werde, ist, den Inhalt der Schaltfläche zu drehen, wenn ich mit der Maus darüber Und wir müssen auch die Farbe der Grenze ändern. Lassen Sie uns also weitermachen und die Haupt-BTN auswählen, indem Sie den Mauszeiger bewegen, gefolgt vom Inhalt des Buttons Also werde ich die Elemente um 60 Grad drehen. Wir müssen transformieren, um sechs bis acht Grad drehen. Und außerdem ändere ich die Farbe des Randes , der ihm zugewiesen ist, Punkt in Lauf. Und als Farbe werde ich 90 II verwenden. Außerdem brauchen wir einen Übergang für einen reibungslosen Ablauf. Und eigentlich müssen wir es zweimal benutzen. Ich meine, wir müssen es standardmäßig für die Elemente und auch beim Zeigen mit der Maus verwenden standardmäßig für die Elemente und auch beim Zeigen mit der Maus Standardmäßig benötigen wir also die Übergangstransformation 0,2 s als die Grenze mit derselben Dauer. Für den Übergang beim Zeigen mit der Maus benötigen wir dieselben Werte, aber Transform hat nur eine geringe Verzögerung, 0,5 s. Okay, endlich sind wir fertig Der Button funktioniert perfekt. Es hat einige nette Effekte und Animationen. Ich finde, was interessant und anders ist, und ich hoffe, es hat dir gefallen. Jetzt müssen wir weitermachen und uns um den nächsten Abschnitt kümmern. 10. Abschnitt Über mich erstellen und designen: Okay, wir haben die Arbeit am ersten Abschnitt der vorherigen Vorlesung abgeschlossen , und jetzt ist es an der Zeit, uns um den nächsten Abschnitt zu kümmern, in und jetzt ist es an der Zeit, uns um den nächsten Abschnitt zu kümmern, dem es um mich gehen wird Dieser Abschnitt besteht aus einer Überschrift und einigen Texten, die nette und coole Animationseffekte haben. Standardeinstellung ist die Steuer nicht ganz sichtbar , da sie mit einem dunklen Hintergrund versehen ist Und sobald wir den Mauszeiger darüber bewegen, ändert es seine Farbe Und auch die Vorlesungen werden anfangen zu animieren. Außerdem werden wir hier den Button haben, der dem Button ähnelt , den wir in der letzten Vorlesung erstellt haben. Das war's also mit dem zweiten Abschnitt. Lassen Sie uns anfangen, ein HTML-Markup zu erstellen. Fügen wir neue Kommentare für Abschnitt zwei ein. Öffnen Sie dann den Abschnittsnamen mit der Klasse Abschnitt zwei. Insgesamt werden wir also drei verschiedene Elemente haben. Die erste wird diese Abschnittsüberschrift sein. Also füge ich Ihre Kommentare ein, Überschrift des zweiten Abschnitts. Dann Ende der Überschrift des zweiten Abschnitts. Dann lassen Sie uns das H1-Überschrift-Tag mit der Klasse öffnen, Abschnitt zwei die Überschrift mit dem Inhalt über mich In Ordnung, als Nächstes haben wir einen Absatz für den Text. Lassen Sie uns neue Kommentare über mich und Texte zu, über mich einfügen . Und dann öffne das P-Tag mit dem Text „Klasse über mich“. Eigentlich werde ich dieses Element als typisch belassen. Wir werden hier den Text mit JavaScript einfügen. Okay, schauen wir uns das HTML-Markup des zweiten Abschnitts an. Wir werden hier den Hauptbutton hinzufügen, den ich etwas später aufgelistet habe Im Moment ist die Überschrift also nicht sichtbar, da sie hinter dem Hintergrund platziert ist. Das werden wir bald beheben. Lassen Sie uns fortfahren und mit der Anpassung dieses Abschnitts beginnen. Ich werde neue Kommentare in die CSS-Datei einfügen, Abschnitt zwei und Abschnitt zwei. Wählen Sie dann ein Schnittelement und setzen Sie seine Position auf relativ. Wenn ich nun alle Elemente auswähle, sehen wir die Überschrift über mich. Lassen Sie uns in diesem Abschnitt etwas Platz schaffen. Ich mache das mit Polsterung. Stellen wir es oben auf zehn RAM, dann zehn RAM auf der rechten Seite, 15 RAM unten und zehn RAM auf der linken Seite ein. Okay. Also werde ich mich jetzt um die Texte kümmern. Ich denke, es ist besser, wenn wir die Kommentare für eine Weile veröffentlichen Also wie gesagt, wir werden Texte mit JavaScript erstellen. Aber zuerst wählen wir den Absatz aus, der den Text umschließen soll. Ich werde Ihren neuen Kommentar über mich Text von, Über mich Text einfügen . Erstellen Sie dann eine neue Variable, ich nenne sie About Me-Text und wählen Sie den Absatz mithilfe der Abfrageauswahlmethode Geben wir hier den Klassennamen für Mutex an. Okay, danach erstelle ich eine neue Variable, die den Text des Absatzes speichert den Text des Absatzes speichert Ich werde diese Variable über mich Textinhalt nennen. Der Text selbst wird wie folgt lauten. Ich bin ein Designer und erstelle preisgekrönte Websites. Die beste Benutzererfahrung. Und ich habe nicht viel geredet, kontaktiere mich einfach. Also werden wir diesen Zeichenkettenwert in ein Array umwandeln . Jedes Zeichen, einschließlich der Leerzeichen, wird die separaten Elemente eines Arrays sein Und dann erstellen wir Span-Elemente für jeden Artikel. Und wir werden diese Zeichen in Span-Elementen speichern. Um diesen Zeichenkettenwert in ein Array umzuwandeln, verwende ich die Methode array dot from. Wir müssen hier den Namen der Variablen übergeben. Schauen wir uns in der Konsole an, wie es aussieht. Ich werde die Seite überprüfen und zum Konsolen-Tab wechseln. Wie Sie hier sehen können, haben wir ein Array, in dem Sie alle Zeichen und Leerzeichen als separate Elemente finden können alle Zeichen und Leerzeichen als separate Jetzt müssen wir jedes Zeichen in den Span-Elementen speichern . Dazu müssen wir das Array durchgehen, Span-Elemente erstellen und ihnen jedes Zeichen zuweisen. Um das Array in einer Schleife durchzugehen, verwende ich eine der Array-Hilfsmethoden, die jeweils aufgerufen werden, die einen Parameter benötigt , es wird die Callback-Funktion sein, die selbst einen Parameter benötigt Und es wird das aktuelle Objekt des Arrays während der Schleife sein. Jetzt müssen wir also ein Spanelement erstellen. Und dafür verwende ich die Methode create our. Lassen Sie uns eine neue Variable erstellen und sie span nennen. Und dann verwende die Methode create element. Wir müssen den Tag-Namen in den Klammern angeben den Tag-Namen in den Klammern Also werden die Span-Elemente erstellt und jetzt müssen wir ihnen Array-Elemente als Textinhalt zuweisen . Wir müssen also den Inhalt von Punkttexten umfassen und er sollte dem Zeichen entsprechen. Schließlich müssen wir diese Elemente an den Absatz anhängen diese Elemente an den Absatz Wir brauchen über mich, Text Punkt anhängen, Kind Wir müssen hier die Variablen pan angeben. Ordnung, wie Sie sehen können, wird der Absatz auf der Seite angezeigt Jetzt müssen wir es stylen. Zuerst. Wählen wir einen Absatz aus. Fügt neue Kommentare zu Mutex und deaktiviert zu neuem Text Wählen Sie dann den Absatz aus. Ich werde die Breite verringern. Machen wir acht Prozent draus. Platzieren Sie den Absatz dann mithilfe des Randes oder der Reihe in der Mitte. Danach wähle ich dieses Span-Element aus. also zunächst Lassen Sie uns also zunächst die Schriftfamilie ändern. In diesem Fall verwende ich Telefone namens Poppins San-Serif, um die Schriftgröße zu erhöhen, auf 15 RAM . Also mache ich die Schrift fett, font-weight bold verwende, und ändere dann Mach ein k. Okay, als Nächstes füge ich ein paar weitere Styles hinzu. Lassen Sie uns den Abstand leicht erhöhen und ihn auf 0,5 erhöhen. Rem. Verringern Sie auch die Zeilenhöhe, machen Sie sie auf 0,9 und verwenden Sie Textschatten mit den Werten 001 RAM Und als Farbe verwende ich 90 E 0 E. Okay? Der Text sieht also gut aus. Als Nächstes setze ich seine Position auf relativ, da wir seine Position während der Animation ändern müssen . Das Letzte, was ich tun möchte, ist, den Absatz mit einem Hintergrund zu vermischen. Dafür verwende ich CSS-Eigenschaft namens Mix Blend Mode. Und ich werde es auf Color Dodge einstellen. In Ordnung, der Text ist also gestylt. Und jetzt können wir die Animation erstellen. Während der Animation werden wir die Farbe der Buchstaben ändern und auch die Position leicht ändern. Lassen Sie uns CSS-Keyframes erstellen. Ich werde es Texte über mich nennen, Anime. Bei Null Prozent setze ich die Farbe auf AAA, was die Standardeinstellung ist. Und ich werde auch die oberste Position definieren. Setzen wir es auf Null. Dann ändere ich von 10% auf 90% die Farbe und die oberste Position. Lassen Sie uns die Farbe auf Weiß setzen. Was die Spitzenposition angeht, so wird es Ram sein. Was die hundert Prozent angeht, brauchen wir dieselben Stile, die wir bei 0% verwendet haben. Ordnung, die Keyframes sind fertig und wir müssen die Stile auf den Text anwenden , sobald wir den Mauszeiger über die Elemente dieses Bedienfelds Ich mache das mit Wir müssen diesem Span-Element einen Event-Listener anhängen , indem wir das Ereignis mit der Maus eingeben Also müssen wir die Event-Listener-Methode hinzufügen. Und wir müssen hier die Event-Mauseingabe und auch die Callback-Funktion übergeben die Event-Mauseingabe und auch die Callback-Funktion Als Nächstes übergebe ich hier ein Event-Objekt. Und dann müssen wir die Animation für das Ziel des Event-Objekts definieren . Wir müssen uns also auf Animationen konzentrieren, nicht auf Stilanimationen. Dann müssen wir hier den Namen der Keyframes angeben, bei dem es um meinen Text geht Und der nächste Wert wird die Dauer 10 s sein. Und außerdem müssen wir die Animation unendlich laufen lassen Wenn ich also mit der Maus über den Text fahre, erhalten wir einen schönen Animationseffekt In Ordnung, mit den Texten über mich sind wir also fertig. Und jetzt müssen wir uns um diese Abschnittsüberschrift kümmern. Und wir sollten diesem Abschnitt auch die Schaltfläche „Bleiben“ hinzufügen. Lassen Sie uns zunächst die Überschrift anpassen. Moment ist es versteckt, also lassen Sie uns den Kommentar loswerden Fügen Sie dann neue Kommentare in die CSS-Datei ein, Überschrift für Abschnitt zwei. Und der Überschrift von Abschnitt zwei. Wählen Sie dann die Überschriftenelemente aus. Ich setze die Schriftgröße auf läuft. Machen Sie es dann mit der Schriftstärke 300 etwas heller, ändern Sie auch die Farbe, machen Sie es weiß und wandeln Sie Text in Danach kümmere ich mich um seine Position. Setzen wir es auf absolut. Ich werde die Elemente vertikal zentrieren. Also werde ich die oberen 250 Prozent setzen. Ganz links wird sich Tan RAM befinden. Und um das Element bei der Transformation perfekt zu zentrieren, übersetze y mit dem Wert -50% Okay, als Nächstes werde ich die Überschrift vertikal platzieren. Dafür müssen wir Null sein. Außerdem müssen wir eine dieser CSS-Eigenschaften namens word break mit dem Wert break off verwenden dieser CSS-Eigenschaften namens word . Und schließlich werde ich die Zeilenhöhe erhöhen. Setzen wir es auf vier. In Ordnung, das war's mit der Überschrift. Das Letzte, was ich in dieser Vorlesung tun werde , ist, den Hauptknopf im zweiten Abschnitt einzufügen. Ich nehme es aus dem ersten Abschnitt und füge es hier ein. Ändere auch den Inhalt, den wir hier benötigen. Lass uns reden. Okay, hier haben wir einen Button, aber wir haben ein paar Probleme. Eigentlich ist es nicht zentriert. Und auch wenn ich den Mauszeiger darüber bewege, haben wir keinen Welleneffekt Kümmern wir uns zunächst um seine Position. Ich werde neue Kommentare einleiten. Abschnitt zwei Haupttaste. Und der Hauptknopf von Abschnitt zwei. Um die Stile nur auf diese bestimmte Schaltfläche anzuwenden . Ich meine, wenn wir die Standardstile durch die neuen ersetzen wollen , müssen wir sie mit der Kombination der übergeordneten Elemente auswählen der Kombination der übergeordneten Elemente Wir müssen also zu Abschnitt zwei gehen, gefolgt von der Hauptschaltfläche. Ich setze die linke Position auf 50 Prozent. Dann ändere ich die unterste Position. Machen wir es minus fünf RAM. Und um das Element dann horizontal zu zentrieren, müssen wir es transformieren und x -50% übersetzen Der Knopf ist also zentriert, und jetzt müssen wir uns um den Welleneffekt kümmern Bevor wir das tun, werde ich mir die Styles des Hauptbatson schnappen und sie in die gängigen Styles einfügen Denn während dieses Projekts werden wir ein paar solcher Knöpfe haben. Schließlich müssen wir das Problem mit dem Welleneffekt beheben. Es wird ganz einfach sein. Wir müssen alle Tasten auswählen. Lassen Sie uns also den Namen der Variablen ändern. Ich nenne es Main BTN. Und wählen Sie sie mit der Methode querySelector all aus. Wie Sie wissen, gibt diese Methode eine Knotenliste zurück. Also mussten wir diese Liste durchgehen. Wir brauchen Haupt-BTS mit Futter. Lassen Sie uns hier die BTN weitergeben. Dann müssen wir uns den gesamten Code schnappen und ihn hier einfügen. Und wir müssen die wichtigsten BTN und BTN überall ändern. In Ordnung, jetzt läuft alles perfekt. Wir haben hier einen Welleneffekt. Und schließlich mit dem zweiten Abschnitt sind wir fertig. Gehen wir zum nächsten über. 11. Projektabschnitt erstellen und anpassen - Teil 1: Ordnung, also sobald wir mit dem zweiten Abschnitt fertig sind , in dem wir einen animierten Text erstellt haben Jetzt ist es an der Zeit, weiterzumachen und mit der Arbeit an einem der interessantesten und wichtigsten Abschnitte zu beginnen , nämlich meiner Arbeit. Dieser Abschnitt wird also die Projekte des Designers enthalten . Tatsächlich sind diese Projekte die Teile unseres vorherigen Kurses, in dem wir zehn ziemlich große, responsive Websites von Grund auf neu erstellt haben, sodass Sie es sich ansehen können. In diesem Fall verwenden wir hier die Bilder der Projekte. Derzeit werden nur sechs Projekte angezeigt. Aber unten haben wir eine Schaltfläche „Mehr anzeigen“. Wenn ich darauf klicke, werden die restlichen Projekte mit einem Fade-Effekt angezeigt. Die Schaltfläche wird jetzt angezeigt, zeige weniger. Und wenn ich darauf klicke, bekommen wir nur sechs Projekte zurück. Nochmals. Wenn ich den Mauszeiger über das Projekt bewege, scrollt es schön nach oben Und außerdem wird das Projekt erweitert, wenn ich auf das Projekt klicke. Und Sie können sich das gesamte Projekt ansehen. Eigentlich sind das ähnliche Bilder, aber mit unterschiedlichen Größen. Diese großen Bilder entstehen im Handumdrehen, wenn wir auf das Projekt klicken, Delos soll die Webseite eigentlich nicht überladen, oder? Dieser Abschnitt hat viele coole Funktionen und Effekte, also lasst uns anfangen, ihn zu erstellen. Zunächst beginne ich wie üblich mit dem HTML-Markup Lassen Sie uns neue Kommentare in der HTML-Datei für Abschnitt drei erstellen. Öffnen Sie dann das Abschnitt-Tag mit einer Klasse, Abschnitt drei. Insgesamt werden wir also drei verschiedene Teile haben. Die erste wird die Überschrift sein. Fügen wir neue Kommentare ein. Überschrift des dritten Abschnitts. Und der Überschrift von Abschnitt drei. Öffnen Sie dann das H1-Überschrift-Tag mit der Überschrift Klassenabschnitt drei Und was den Inhalt angeht, lass uns meine Arbeit einrichten. In Ordnung, als Nächstes werden wir Projekte haben. Also brauchen wir hier neue Kommentare. Projekte und von Projekten. Öffnen wir das div-Tag mit einer Klasse. Projekte. Es wird die Zusammenfassung des Projekts Insgesamt wird es zehn verschiedene Projekte geben, ich meine, zehn verschiedene Bilder. Und jeder von ihnen wird von einem div-Element umhüllt. Lassen Sie uns also weitermachen und es mit dem Klassenprojekt öffnen. Und dann füge hier ein Bild ein. Wenn Sie hier den Pfad der Datei angeben. Lassen Sie mich einfach Project One JPG auswählen. Okay, lassen Sie uns dieses Projekt neunmal duplizieren und dann schnell die Namen der Bilder ändern. Wir müssen die Zahlen 2-10 verwenden. In Ordnung, das war's mit den Bildern. Außerdem werden wir den Hauptbutton in diesem Abschnitt haben , aber wir werden uns etwas später darum kümmern. Das war's mit dem HTML-Markup. Derzeit sind Bilder nicht sichtbar, da sie hinter dem Hintergrund platziert werden. Lassen Sie uns also weitermachen und diesen Abschnitt anpassen. Ich werde neue Kommentare für Abschnitt drei einfügen. Wählen Sie dann das Abschnittelement und definieren Sie dessen Breite und Höhe. Ich werde beide auf 100% setzen. Dann werde ich mithilfe von Padding etwas Platz innerhalb des Abschnitts schaffen mithilfe von Padding etwas Platz innerhalb des Abschnitts Wir brauchen 20 RAM oben als Null auf der rechten Seite, Wutanfall unten und Null auf der linken Seite Und setzen Sie die Position auch auf relativ. Okay, jetzt sehen wir hier die Bilder und die Überschrift. Eigentlich wie im vorherigen Abschnitt. Ich werde mich etwas später um die Überschrift kümmern. Also lasst uns weitermachen und es kommentieren und anfangen, an den Projekten zu arbeiten. Wir brauchen neue Kommentare für die Projekte. Wählen Sie dann ein Div-Element aus. Also werde ich zunächst die Projekte aufeinander abstimmen. Und dafür verwenden wir Flexbox. Wie Sie wissen, haben wir ein Klassenzentrum für das Flex-Layout definiert . Lassen Sie uns also weitermachen und es dem div-Element in der HTML-Datei zuweisen . Als Nächstes werde ich die Projekte in verschiedenen Zeilen platzieren. Dafür müssen wir Flex Wrap mit dem Wert rab verwenden. Und außerdem lassen Sie uns etwas Platz am Ende der Projekte schaffen, etwas Platz am Ende der Projekte schaffen indem wir Padding Bottom mit dem Wert 15 ausführen. Okay, schauen wir uns die Div-Elemente des Wrappers an Okay, schauen wir uns die Div-Elemente des . Gerade jetzt. Diese Bilder sehen irgendwie hässlich aus. Sie haben unterschiedliche Größen. Lassen Sie uns also weitermachen und sie anpassen. Ich wähle das Projekt selbst aus. Definieren wir zunächst die Breite und Höhe. Ich setze für die Rampe die Breite auf vier. Was die Höhe angeht, so wird es 45 gelaufen sein. Sobald wir die Breite und Höhe der Bilder definiert haben, verdeckten sie sich gegenseitig. Um die äußeren Teile der Bilder zu verbergen , müssen wir sie verwenden. Überlaufen, versteckt, und zusätzlich etwas Platz um die Bilder herum schaffen , indem Sie den Rand verwenden, der Wert fünf lief Richtig. Danach. Ich werde die Hintergrundfarbe der Projekte ändern. Ich meine, ich möchte schwarzen Raum um die Bilder herum schaffen. Also lasst uns die Hintergrundfarbe ändern und ihn schwarz machen. Als Nächstes wähle ich das Bild und verringere seine Breite. Machen wir 90% draus. Und auch, um die Bildqualität zu erhalten. Ich meine, um es nicht zu verkleinern, werde ich Object Feed Cover verwenden Wir haben hier also den schwarzen Hintergrund, aber wie Sie sehen können, müssen wir die Bilder zentrieren. Und dafür verwenden wir Flexbox. Wir brauchen Display Flex. Und dann verwende ich für die Zentrierung das Justify-Content Ordnung, vorerst haben wir ein schwarzes Feld auf der linken und rechten Seite der Bilder Und wir müssen es auch oben in den Bildern anzeigen . Dafür werde ich die Bilder ein wenig nach unten verschieben. Lassen Sie uns die Position also auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element, das das Projekt ist. Und danach werde ich die Spitzenposition ändern. Machen wir es zum Laufen. In Ordnung, jetzt haben wir schwarze Flächen auf drei Seiten. Als Nächstes werde ich eine Grenze um die Projekte legen. Weisen wir ihm einen Punkt zu, der gepunktet verlaufen soll. Und als Farbe verwenden wir 90 E 0 E. Außerdem werde ich den Rand leicht abgerundet machen. Verwenden wir Border-Radius. Wir werten 0,5 g ab. Und zum Schluss ändern wir den Titel, den Cursorzeiger In Ordnung, das war's also. Die Projekte sind maßgeschneidert und ich werde den Hover-Effekt erstellen Werfen wir einen Blick auf das fertige Projekt. Wenn wir den Mauszeiger über die Projekte als über die Bilder bewegen, scrollen wir schön nach oben Sie werden auch feststellen, dass die Bilder in die verschiedenen Richtungen schief sind in die verschiedenen Richtungen schief Ich meine, die ungeraden und geraden Bilder. Dafür werden wir CSS-Keyframes verwenden. Ordnung, zuerst werde ich schaffen, das Bild beim Zeigen mit der Maus nach oben zu scrollen Und danach kümmern wir uns um diesen Teil der Warteschlange. Ich werde mit JavaScript einen Hover-Effekt erstellen. Sobald also die Maus das Projekt betritt, sollten wir die oberste Position des Bildes definieren. Und das brauchen wir für alle Projekte. Also müssen wir sie zuerst auswählen. Lassen Sie uns neue Kommentare in die JavaScript-Datei einfügen . Wir brauchen Projekte. Und Projekte. Erstellen Sie dann eine Variable und nennen Sie sie Projekte. Also werde ich sie mit der Methode Query Selector All auswählen mit der Methode Query Selector All Geben wir hier das Klassennamenprojekt an. Okay, die Projekte sind also ausgewählt. Als Nächstes müssen wir sie durchschauen und jeden Projektereignis-Listener mit der Maus zur Eingabe des Ereignisses anhängen mit der Maus zur Eingabe des Ereignisses Wir benötigen also für jede Methode , die einen Parameter benötigt, die Callback-Funktion Die Callback-Funktion selbst benötigt einen Parameter, das aktuelle Element während der Schleife ist Also wie gesagt, wir müssen jedem Projekt einen Event-Listener hinzufügen Wir müssen also die Methode Add Event Listener mit der Maus verwenden , um Ereignisse einzugeben Und mit einer Callback-Funktion, die ausgeführt wird, sobald wir den Mauszeiger über das Projekt bewegen Okay, wie gesagt, wir müssen die Position der Bilder ändern. Zuallererst müssen wir auf sie zugreifen. Dafür. Ich werde eine der Kuppeleigenschaften verwenden, die als erstes Element Child bezeichnet wird. Also brauchen wir Projektpunkte. Erstes Element: Kind. Jetzt haben wir Zugriff auf die Bildelemente und müssen dann die oberste Position definieren. Also müssen wir das Top stylen. Alle Bilder haben also unterschiedliche Höhen. Und wir müssen herausfinden, wie weit wir jedem Bild nach oben scrollen müssen Wir müssen die Höhe des Projekts von der Höhe des Bildes abziehen Projekts von der Höhe des Bildes Aus diesem Grund müssen wir das Bild nach oben scrollen. Der Wert der beiden Positionen wird negativ sein. Jetzt müssen wir die Höhe des Bildes definieren. Daher benötigen wir hier den Projektpunkt, das erste Element, die untergeordneten Punkte, die zur Höhe versetzt sind. Und wir müssen die Höhe des Projekts abziehen. Daher benötigen wir für Projekte einen Punktversatz in der Höhe. Und dann brauchen wir deine Stücke. Ordnung, das Letzte, was ich jetzt tun werde , ist, den Scroll-Effekt glatter zu machen Also müssen wir mit Top übergehen. Und die Dauer 4 s. Wie Sie sehen können, scrollen die Bilder also flüssiger nach oben Aber wir haben hier ein paar Probleme. Sobald die Maus das Projekt ausgeführt hat, müssen wir das Bild nach unten zurück zur Standardposition scrollen . Und wir brauchen auch das schwarze Feld unten, das wir hier einfach hinzufügen können, 20. Was das Mausblatt angeht, müssen wir dem Projekt einen neuen Event-Listener hinzufügen Wir benötigen also die addEventListener-Methode mit Maus-Live-Events und auch mit Maus-Live-Events und auch In diesem Fall müssen wir also die Position festlegen, die ausgeführt werden soll. Wir benötigen also den Projektpunkt, erste Element im untergeordneten Punktstil, Punkt oben gleich, um ausgeführt zu werden. Okay, jetzt funktioniert alles perfekt und wir können weitermachen und uns um diesen Cueing-Effekt kümmern Dafür müssen wir CSS-Keyframes erstellen. Zuerst werde ich sie für die alten Bilder erstellen. Während der Animation müssen wir die Bilder also ein paar Mal drehen , horizontal und vertikal. Nennen wir die Keyframes Alt, IMG, Anime. Bei Null Prozent müssen wir die Elemente also nicht drehen. Also müssen wir transformieren, um Null drehen. Dann werde ich im nächsten Schritt, bei 25%, die Elemente entlang der Y-Achse um minus zwei Grad drehen Y-Achse um minus zwei Grad Außerdem müssen wir die Elemente entlang der X-Achse um zwei Grad drehen . Dann füge 30% hinzu. Ich kopiere diese Codezeile und füge sie hier ein. Der Wert von rotation y muss zwei Grad betragen. Für die Funktion „Drehen x benötigen wir hier minus zwei Grad. Was die 100% angeht, müssen wir das Element nicht drehen. Die Keyframes sind fertig. Als Nächstes müssen wir alle Bilder auswählen. Also brauchen wir hier Projekt, gefolgt vom n-ten Child Selector. Und wir müssen hier angeben, dass wir den Mauszeiger gefolgt von einem Bild benötigen Um die CSS-Keyframes anzuwenden, müssen wir also Animationen verwenden Wir brauchen hier den Namen der ausgehenden Keyframes, IMG, anim, gefolgt von der Dauer 4 s. Und außerdem verwende ich hier eine kleine Verzögerungszeit von 0,2 s. Wenn ich also jetzt mit der Maus über das erste Bild fahre kleine Verzögerungszeit von 0,2 s. , nichts Besonderes Wir sehen hier keinen Verzerrungseffekt. Das passiert, weil wir eine 3D-Umgebung für die Elemente erstellen müssen und dafür eine der CSS-Eigenschaften verwenden müssen, die als Perspektive bezeichnet wird. Stellen wir es auf Rampe 20 ein. Wenn ich jetzt den Mauszeiger über das Bild bewege, wird es im 3D-Raum Ordnung, machen wir weiter und machen dasselbe für die geraden Bilder Wir können den gesamten Code duplizieren. Lassen Sie uns alles so ändern, dass die Keyframes gleichmäßig asphaltiert werden. Wir müssen nur die Stellen der Transformationseigenschaften in Schritten von 25,50 Prozent ändern der Transformationseigenschaften in Schritten von 25,50 Prozent Jetzt kann es sehen, dass alles gut funktioniert. Als Nächstes füge ich eine kleine Verzögerungszeit hinzu, bis das Bild nach oben scrollt Machen wir 0,2 s. In Ordnung, also bevor wir diese Vorlesung beenden, werde ich noch eine Sache machen Ich werde standardmäßig die Opazität für jedes Bild verringern standardmäßig die Opazität für jedes Bild verringern Machen wir es auf 0,5 und erhöhen es dann, indem wir den Mauszeiger bewegen. Wir brauchen Opazität 1. Und füge hier auch den Übergang hinzu. In Ordnung, das ist es jetzt. Als Nächstes erstellen wir ein Klick-Event und erweitern die Bilder. Also lass uns weitermachen. 12. Projektabschnitt erstellen und anpassen - Teil 2: Ordnung, in der vorherigen Vorlesung erstellen wir es und passen die Projekte Ich meine, wir haben Bilder ausgerichtet und wir haben auch einen Schwebeeffekt erzeugt Als Nächstes erweitern wir das Projekt, sobald wir darauf klicken, so wie es in der fertigen Version des Projekts ist. Bevor wir das tun, werde ich ein kleines Problem beheben , das wir im vorherigen Abschnitt hatten. Wenn ich den Mauszeiger von unten über den Button bewege, passiert nichts Der Grund dafür ist, dass der Projektbereich die Schaltfläche teilweise abdeckt. Also zwei Spitzen, dass ich die Polsterung oben für diesen Abschnitt verringern werde die Polsterung oben für diesen Abschnitt verringern Machen wir zehn RAM draus. Und außerdem füge ich hier die obere Marge mit dem Wert Tan ran hinzu. Wie Sie sehen können, ist das Problem jetzt behoben. In Ordnung, gehen wir zurück zum Projektbereich. Wenn wir also auf das Projekt klicken, müssen wir neue Elemente erstellen . Ich meine, dieses große Bild. Standardmäßig ist es nicht vorhanden. Es wird nur onClick erstellt. Es hilft uns also, die Webseite nicht zu überladen , weil diese Bilder wirklich die großen sind. Als erstes füge ich den Event-Listener mit dem Click-Event an das Projekt Lassen Sie uns zunächst Ihre neuen Kommentare einfügen. Bild großer Projekte. Und ich wähle das Projektbild aus. Hängen Sie dann den Event-Listener an das Projekt an. Wir klicken auf Ereignisse und erweitern eine Callback-Funktion. Wie gesagt, wir müssen onClick ein neues Element erstellen Aber bevor wir das Bild erstellen, müssen wir zunächst einen Wrapper des Images erstellen Ich bin in dem dunklen Hintergrund , der zuerst erscheint. Um das Element zu erstellen, verwende ich die Methode create. Lassen Sie uns eine neue Variable erstellen. Ich werde es großen IMG-Wrapper nennen. Und dann erstellen Sie die Elemente mit der Methode create element. Wenn Sie hier den Tag-Namen angeben sollten, wird das Element erstellt. Als Nächstes werde ich ihm einen Klassennamen zuweisen. Eigentlich können wir das auf verschiedene Arten tun. In diesem Fall verwende ich die Eigenschaft ClassName Also brauchen wir Big ING, Rapper Dot Class Name Und der Wert wird der Rapper Project IMG sein. Richtig? Jetzt müssen wir dem Container ein neues Element hinzufügen. Wählen wir zunächst den Container selbst aus. Ich werde eine neue Variable erstellen. Und wählen Sie dann den Container mit der Methode querySelector aus. Wenn Sie hier nur den Klassennamen-Container angeben. Nach Schulden. Um den Image-Wrapper an den Container anzuhängen, müssen wir eine der Methoden namens append verwenden Das Kind muss hier ein großes IMG angeben, Robert. In Ordnung, schauen wir uns das Wrapper an. Um zu sehen, dass das Element erstellt wird, klicken Sie auf. Schauen wir uns die Seite an und schauen uns den Tab Elemente an. Sobald ich auf das Projekt klicke, werden die Elemente erstellt. Okay, bevor wir das Bild selbst erstellen, werde ich zuerst den Wrapper stylen Lassen Sie uns neue Kommentare verfassen, großes Projektbild. Und von einem großen Projektimage. Wählen Sie dann den Wrapper aus. Die Position des Wrappers wird festgelegt. Außerdem werde ich die Eigenschaften oben und links definieren. Lassen Sie uns beide auf Null setzen. Dann werde ich Elemente des gesamten Viewports erweitern. Und ich werde auch die Hintergrundfarbe ändern. Lassen Sie uns Breite und Höhe setzen, beide auf 100%. Für die Hintergrundfarbe verwende ich den RGBA-Wert Lassen Sie uns Ihre schwarze Farbe mit der Opazität 0,9 einfügen. Ordnung, wenn ich jetzt auf das Projekt klicke, wird der Wrapper angezeigt Wie Sie wissen, sollte der Wrapper von oben mit einer kleinen Animation angezeigt von oben mit einer kleinen Animation Also werde ich die CSS-Keyframes erstellen. Lassen Sie uns vorher die Höhe des Wrappers verringern und ihn auf Null setzen Und dann erstellen Sie CSS-Keyframes. Ich werde es IMG Wrapper-Anime nennen. Insgesamt werden wir also zwei verschiedene Schritte haben. Bei 0% wird die Höhe Null sein. Was die 100% angeht, werde ich die Höhe auf 100% erhöhen. Dann verwende ich Animationseigenschaften. Wir müssen hier den Namen des Keyframes IMG Wrapper-Anime angeben Keyframes IMG Wrapper-Anime Dann wird der nächste Wert die Dauer einer Sekunde sein. Und außerdem werde ich die Höhe zu hundert Prozent beibehalten, wenn die Animation endet. Also wir brauchen hier vorwärts Also wenn ich auf das Projekt klicke, dann erscheint der Wrapper von oben schön. In Ordnung, das war's gerade mit dem Image-Rapper. Als Nächstes nehme ich hier das Bild selbst, wie den Wrapper, wir müssen dieses Element erstellen Also werde ich eine neue Variable erstellen. Nennen wir es Big IMG. Und dann Elemente erstellen. Geben wir hier den Tag-Namen IMG an. Das Element wird also erstellt. Und als Nächstes werde ich ihm einen Klassennamen für die CSS-Stile zuweisen . Wir brauchen also einen großen IMG-Punktklassennamen. Und der Wert wird ein Projekt sein. Ich habe recht. Um nun zu testen, ob das Bild beim Klicken angezeigt wird, definiere ich seinen Namen im Quellattribut und gebe ihm den Namen eines beliebigen Bildes. Um das Attribut für die Elemente zu definieren, müssen wir eine der Methoden verwenden, die als set-Attribute bezeichnet werden. Es braucht zwei Argumente. Der erste ist der Name des Attributs. In diesem Fall benötigen wir eine SRC-Quelle. Soweit das zweite Argument der Teil des Bildes sein wird. Also brauchen wir Bilder als den Ordner Projekte und das Bild mit dem Namen project, one, big dot jpg. Und schließlich müssen wir mit der Methode append child ein Bild an den Wrapper anhängen Methode append child ein Bild an den Wrapper Wenn ich jetzt auf das Projekt klicke , wird das große Bild angezeigt. Wenn ich jetzt auf eines der Projekte klicke, wird dasselbe Bild angezeigt. Ich meine den ersten. Da wir den Teil des Bildes mit dem ersten Bild definieren , brauchen wir das nicht. Wir müssen für jedes Projekt das gleiche Bild anzeigen. Dazu müssen wir Zugriff auf den Pfad des Bildes erhalten, auf das geklickt wird Lassen Sie uns weitermachen und eine neue Variable erstellen. Ich nenne es IMG-Pfad. Um zunächst Zugriff auf das Quellattribut zu erhalten, müssen wir auf das Bildelement selbst zugreifen. Also brauchen wir Project Dot, First Element Child. Dann müssen wir dieses Quellattribut mit der Methode get attribute abrufen. Wir müssen hier den Namen des Attributs als RC angeben. Sehen wir uns in der Konsole an , was uns diese Variable gibt. Wenn ich auf das Projekt klicke, erhalten wir den Pfad des Images in der Konsole. Wenn wir auf andere Projekte klicken, erhalten wir den richtigen Pfad des Bildes. Okay, von diesem Pfad aus brauchen wir also alles , was auf der linken Seite der Punkte platziert ist auf der linken Seite der Punkte Weil große Bilder einen ähnlichen Pfad haben, die tatsächlichen Bildnamen jedoch unterschiedlich sind. Sie haben große hinter den Zahlen her. Um den ersten Teil des Pfads abzurufen, verwende ich eine der Array-Hilfsmethoden namens split Wir müssen den Pfad punktuell aufteilen. Wenn ich jetzt auf das Projekt klicke, erhalten wir ein Array mit zwei verschiedenen Elementen. Der erste ist der Pfad ohne Erweiterung des Bildes. Was das zweite betrifft, ist das Extinction JPG. Um das erste Element auszuwählen, müssen wir die Indexnummer als Null definieren. Wenn ich jetzt auf das Projekt klicke, bekommen wir das erste Array, oder? Richtig. Jetzt müssen wir diesen Artikel verwenden und dem Namen des Bildes Big Dot JPG hinzufügen . Um das zu erreichen, müssen wir diesen Weg ändern und ihn dynamisch gestalten. Öffnen wir Backticks und fügen Sie hier den variablen Bildpfad und fügen Sie dann einen Strich hinzu, Big Dot JPG Okay, also wenn ich jetzt auf die Projekte klicke, dann bekommen wir die richtigen Bilder, oder? Alles war in Ordnung und wir müssen die Bilder stylen. Ich meine die großen. Wählen wir sie also aus. Lassen Sie uns die Breite auf 100% setzen. Außerdem werde ich den Kongress wie das Abgerundete machen, indem ich den Randradius mit dem Wert 0,5 rem verwende Lassen Sie uns außerdem eine Polsterung erstellen. Ich mache sieben Rem oben und unten und 20 RAM auf der linken und rechten Seite. Und verringern Sie auch die Opazität leicht, machen Sie sie auf 0,9. In Ordnung, die Bilder sehen also gut aus. Jetzt müssen wir sie und Animationen hinzufügen. Standardmäßig blende ich sie aus und zeige sie an, sobald wir auf das Projekt klicken und der Rapper erscheint Lassen Sie uns weitermachen und CSS-Keyframes erstellen Ich werde sie IMG-Anion nennen. Insgesamt werden wir also zwei Schritte haben. Bei 0% setze ich die Skala der Elemente auf Null. Was die 100% angeht, werde ich die erste Skala machen. Und verwende auch Animationen. Wir benötigen hier den Namen der Keyframes, IMG-Anime, auch die Dauer 1 s. Und wir benötigen eine Verzögerungszeit, die 1 s betragen wird. In diesem Fall müssen wir die Skala Null als Standardstil des Bildes festlegen die Skala Null als Standardstil des Bildes Und wir müssen auch den Maßstab beibehalten , damit die Animation endet. Dazu können wir entweder die Transformationsskala standardmäßig auf Null setzen und dann in der Animationseigenschaft vorwärts verwenden, wie wir es bereits für den Image-Wrapper getan haben Oder wir können hier einfach den Wert beide verwenden , der den gleichen Job macht. Wenn ich also auf das Projekt klicke, erscheint das Bild. Im Moment erscheint es von unten und ich möchte es von oben anzeigen. Also müssen wir den Ursprung der Transformation ändern. Wir brauchen das obere Zentrum. In Ordnung, jetzt haben wir ein viel besseres Ergebnis. Im Moment können wir das Bild nicht nach unten scrollen. Wir scrollen auf der Seite selbst, die versteckt ist. Um das zu tun, verwende ich die Overflow-Eigenschaft mit versteckten Werten Scrollen. Jetzt können wir im Bild nach unten scrollen, aber wie Sie sehen können, haben wir hier zwei Scrollbalken. Eine für das Bild und die zweite für die Seite. Um das zu beheben, sollten wir dem Hauptelement einen mit JavaScript versteckten Überlauf zuweisen mit JavaScript versteckten Überlauf Wir benötigen also Punkt, Hauptteil, Punktstil, Punktüberlauf Y mit dem Wert ausgeblendet In Ordnung, jetzt funktioniert alles perfekt. Und das einzige, was ich in diesem Video tun werde , ist die Schaltfläche zum Schließen zu erstellen. Sobald wir das Bild erweitert haben. Lassen Sie uns zunächst das HTML-Markup für den Buxton erstellen HTML-Markup für den Buxton Ich werde neue Kommentare einrichten, Schaltfläche zum Ausblenden des Projekts. Und des Projekts Schaltfläche „Ausblenden“. Öffnen Sie dann das Button-Tag mit Höhe des Klassenprojekts, btn. Ich werde hier eine der HTML5-Entitäten übergeben. Es wird der Pfeil sein. Wir brauchen hier, l AQ, U0, Semikolon, gefolgt vom Danach werde ich den Button anpassen. Fügen wir neue Kommentare in die CSS-Datei für die Schaltfläche ein. Wählen Sie es dann aus. definiere ich die Position des Buttons. Es wird in der oberen rechten Ecke platziert. Also werde ich die Position festlegen, um sie zu korrigieren. Und dann mache ich die besten und die richtigen Eigenschaften, beide fünf sind gelaufen. Als Nächstes. Ich werde die Hintergrundfarbe transparent machen. Entfernen Sie auch den Standardrahmen. Dann ändere ich die Farbe des Textes. Lass es uns weiß machen. Erhöhen Sie dann die Schriftgröße und machen Sie es zu Ram. Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen. Machen wir 0,1 RAM draus und ändern wir auch den Typ des Kurses, um es auf den Punkt zu bringen. Okay, hier haben wir das Schlussmuster. Wenn ich auf die Projekte klicke, deckt der Image-Wrapper sie ab Also müssen wir das beheben. Und dafür verwenden wir die Z-Index-Eigenschaft mit einem höheren Wert als Null. Sagen wir zehn. Ordnung, also standardmäßig müssen wir die Schaltfläche ausblenden und anzeigen Sobald wir auf das Projekt klicken. Um die Elemente zu verbergen, verwende ich Transform. Skalieren Sie mit einem Wert von Null. Auch die Sichtbarkeit ist versteckt. Um die Schaltfläche wieder anzuzeigen, verwende ich, sobald wir auf das Projekt geklickt haben, sobald wir auf das Projekt geklickt haben, eine neue Klasse in CSS, in der wir die neuen Stile definieren, diese Stile, um die Schaltfläche anzuzeigen. Also werde ich den Klassenwechsel ausrufen. Und dann müssen wir Project Hide auswählen, übrigens. Wir haben hier kein Leerzeichen zwischen diesen beiden Klassen verwendet , da wir dasselbe Element mit zwei verschiedenen Klassennamen auswählen. Wenn das Element keine dieser Klassen hat, werden diese Stile nicht auf das Element angewendet. Wir müssen also die erste Skala transformieren und die Sichtbarkeit sichtbar machen. Ordnung, als Nächstes sollten wir mithilfe von JavaScript eine Klassenänderung zum Button onclick hinzufügen mithilfe von JavaScript eine Klassenänderung zum Button onclick Soweit wir eine Schaltfläche selbst auswählen müssen. Lassen Sie uns eine neue Variable erstellen und sie Project hide btn nennen. Wählen Sie dann eine Schaltfläche mit der Methode querySelector aus. Geben wir hier den Klassennamen an, project hide, btn. Dann müssen wir der Schaltfläche einen Klassenwechsel hinzufügen, sobald wir auf die Projekte klicken. Also brauchen wir hier Projekthöhe, BTN, Punkte, Klassenliste, Punkt hinzufügen Ich muss hier nicht den Namen der Klassenänderung angeben . Außerdem sollten wir es entfernen, wenn wir auf die Schaltfläche selbst klicken. In diesem Fall werde ich den OnClick-Event-Handler verwenden , da im Fall des Event-Listeners das Click-Ereignis mehrfach hinzugefügt wird und wir das nicht benötigen Wir müssen ein Klick-Event nur einmal auslösen. Also schreibe ich hier die Projekthöhe, btn dot onclick, was einer Pfeilfunktion entsprechen sollte Und hier müssen wir den Klassenwechsel aus der Klassenliste entfernen . Außerdem müssen wir die Hülle des großen Bildes entfernen die Hülle des großen Bildes Also werde ich hier großes IMG, Rapper Dot, Remove schreiben. Und wir müssen auch den Wert des alten Flusses ändern. Warum Eigenschaft für das Körperelement zurück zum Scrollen. Wir benötigen also einen Aufruf für die Werte Punkt, Hauptteil, Punktstil, Punktüberlauf und Y-Werte In Ordnung, also funktioniert alles gut. Das einzige, was ich tun werde, ist, der Schließen-Schaltfläche einen kleinen Übergang hinzuzufügen . Wir müssen nur wechseln , wenn die Schaltfläche erscheint. Also müssen wir den Klassenwechsel einleiten. Stellen wir es auf Transformation und Dauer 0,5 s ein. In Ordnung, also sind wir endlich fertig Alles funktioniert perfekt. Als Nächstes müssen wir uns um diese Schaltfläche „Mehr anzeigen“ kümmern . Also lass uns weitermachen. 13. Die Funktion „Mehr anzeigen“ zu Projekten hinzufügen - Teil 1: Okay, also haben wir die Projekte erstellt und angepasst. Wir haben ihnen ein paar verschiedene Effekte hinzugefügt, wie die Ereignisse, die mit dem Mauszeiger verbunden sind und klicken Moment werden alle zehn Projekte auf der Seite angezeigt, und ich denke, es sieht nicht ganz gut aus. Und es wird auch nicht gut aussehen, wenn wir unser Projekt auf kleinere Bildschirmgrößen reagieren lassen würden. Also werde ich einige der Projekte verstecken. Fügen Sie hier auch eine Schaltfläche „Mehr anzeigen“ hinzu. Und sobald der Benutzer darauf klickt, werden wir alle zehn Projekte anzeigen. Anstatt mehr zu zeigen, werden wir zeigen, das zeigen. Und wir werden auch die Richtung des Pfeils ändern. Tatsächlich zeigt uns der Pfeil die Richtung des Scrollens, was beim Klicken passiert. Außerdem werden die Projekte mit einigen Fade-Effekten angezeigt und ausgeblendet. In Ordnung, das war's also. Was wir in diesem Video machen werden. Lass uns anfangen. Als erstes werde ich die letzten vier Projekte verstecken. Und das werde ich mit JavaScript machen . Wir haben alle schon hier für jede Methode. Um die Projekte durchzugehen. Projekte sind eine Knotenliste und jedes Projekt hat seine eigene Indexnummer. Wir müssen die letzten vier Projekte verstecken. Die Projekte mit Indexnummern von sechs bis neun. Wir müssen also auf diese Projekte zugreifen. Dafür müssen wir hier einen weiteren Parameter übergeben, der die Indexnummer sein wird. Jetzt müssen wir eine If-Anweisung verwenden , in der wir definieren müssen ob I größer oder gleich sechs ist. Wenn diese Bedingung zutrifft, müssen wir die Projekte verstecken. Also brauchen wir hier Projekt- und Punkt-CSS-Text im Punktstil. Und wir müssen hier zu den CSS-Eigenschaften übergehen. Die erste wird mit dem Wert none angezeigt. Für den zweiten benötigen wir Opazität Null Wie Sie sehen können, sind die letzten vier Projekte hier. Eigentlich funktioniert dieser Code, ich meine, die IF-Anweisung, gut, aber wir können kürzer schreiben. Anstelle der if-Anweisung können wir den logischen Operator und den Operator verwenden. So können wir das Schlüsselwort loswerden, auch die geschweiften Klammern Und wir müssen hier einen Operator hinzufügen, der durch zwei Ampersanden ausgedrückt wird Wenn also die linke Seite wahr ist, können wir einfach einen Codeblock auf der rechten Seite des Operators hinzufügen . Wie Sie sehen können, haben wir hier genau das gleiche Ergebnis. Jetzt ist es an der Zeit, hier den Button hinzuzufügen. Es bleibt der Knopf , den wir schon ein paar Mal benutzt haben. Gehen wir also zur Datei index.html. Schnappen Sie sich den Button aus dem vorherigen Abschnitt und fügen Sie ihn hier ein. Ich werde den Inhalt, den wir hier benötigen, ändern und mehr anzeigen. Und fügen wir noch eine weitere Klasse hinzu, Projekte, BTN. Und ändere auch die Kommentare, die wir hier benötigen, Projekte. Aber wie Sie hier sehen können, haben wir gerade den Button, er befindet sich auf der linken Seite der Seite. Also müssen wir es zentrieren. Lassen Sie uns neue Kommentare in die Schaltfläche Projekt der CSS-Datei einfügen. Und von der Schaltfläche „Projekte“. Wählen Sie dann die Schaltfläche mit den neu hinzugefügten ClassName-Projekten btn Um das Element zu zentrieren, verwende ich die linke Position mit einem Wert von 50%. Und für eine perfekte Zensur müssen wir Translate X mit dem Wert -50 Prozent transformieren X mit dem Wert -50 Prozent Wie Sie sehen können, befindet sich der Button in der Mitte. Ordnung, jetzt füge ich der Schaltfläche mit dem Click-Event einen Event-Listener hinzu Sobald wir darauf klicken, müssen wir die versteckten Projekte anzeigen. Lassen Sie uns zunächst Kommentare einfügen. Schaltfläche Projekt und Schaltfläche Projekt, und wählen Sie dann die Schaltfläche selbst aus. Ich werde eine neue Variable erstellen. Nennen wir es Projects btn und wählen Sie Schaltfläche mit der Abfrageauswahlmethode Wir brauchen hier übrigens Klassenprojekte. Okay, als nächstes müssen wir einen Event-Listener mit Klick-Events und mit einer Callback-Funktion anhängen einen Event-Listener mit Klick-Events und mit einer Callback-Funktion Das erste , was wir tun werden, ist die Standardaktion zu verhindern. Wenn wir auf die Schaltfläche klicken, meine ich, sobald wir auf die Schaltfläche klicken, navigieren wir zur oberen Seite der Seite. Das brauchen wir also nicht. Ich werde hier ein Event-Objekt übergeben. Und dann brauchen wir Punkte. Standardeinstellung verhindern. Wie Sie sehen, navigieren wir jetzt nicht mehr nach oben. Moment ist es an der Zeit, die Projekte ein- und auszublenden. Dazu müssen wir zunächst die Projekte durchgehen, also werde ich für jede Methode eine Callback-Funktion verwenden jede Methode eine Callback-Funktion Ich gebe Ihnen zwei verschiedene Parameter. Das erste wird das Projekt sein. Für die zweite benötigen wir wieder eine Indexnummer. Ich meine, ich weiß wir müssen Zugriff auf die versteckten Projekte bekommen. Wie Sie sich erinnern, haben wir das mit der Indexnummer gemacht. Die Indexnummer ist größer oder gleich sechs, dann bedeutet das, dass wir nur Zugriff auf die versteckten Projekte haben . Also verwende ich hier und wenn Aussagen, die wir definiert haben, ob I größer oder gleich sechs ist. Wenn diese Bedingung also zutrifft, müssen wir es schaffen, die Projekte ein- und auszublenden. Dafür erstelle ich eine neue Variable, die der boolesche Wert sein wird Ich nenne es Show, Hide, Bu. Und standardmäßig setze ich es auf „True“. Als nächstes benötigen wir eine weitere if-Anweisung , in der wir überprüfen müssen, ob der boolesche Wert wahr oder falsch ist Also werde ich hier den Namen der Variablen übergeben. Wenn das stimmt, müssen wir die Projekte anzeigen. Wir brauchen also eine Punktanzeige im Projektpunktstil. Es sollte gleich Flex sein. Dann werde ich diese Codezeile duplizieren. Und wir brauchen hier Opazität mit dem Wert Eins. Wenn es dann falsch ist, müssen wir die Projekte verstecken. Also brauchen wir die Else-Aussage. Dann nehme ich diese beiden Zeilen und ändere die Werte. Wir brauchen Ausstellungseigentum, damit es keine gibt. Was die Opazität angeht, wird sie Null sein Okay, schließlich müssen wir den Wert dieser show hide bull Variablen auf True umstellen , dann müssen wir ihn auf falsch setzen und umgekehrt. Wir müssen also Show Hide bull gleich Not Show Hide book sein . Wenn ich auf die Schaltfläche klicke, werden die versteckten Projekte angezeigt. In der nächsten Woche werden sie sich verstecken. Ordnung, danach ändere ich den TextContent der Schaltfläche Sobald wir die Projekte angezeigt haben, sollte der Button den Inhalt wie show less haben. Und außerdem müssen wir zuerst den Pfeil drehen. Kümmern wir uns um den Inhalt des Textes. Zunächst wähle ich ein Span-Element aus. Lassen Sie uns eine neue Variable erstellen. Eigentlich werde ich diese Codezeile duplizieren und dann den Namen der Variablen ändern. Es werden übrigens Projekte sein, Text. Und ich werde hier auch Span hinzufügen. In Ordnung. Wenn wir also die Projekte anzeigen, sollten wir dafür sorgen, dass der TextContent weniger anzeigt Wir brauchen hier Projekte als Texte, Texte müssen inhaltlich gleich sein, um weniger zu zeigen Wenn wir die Projekte ausblenden, sollten wir Lektion anzeigen ändern, um mehr zu zeigen. Also werde ich diese Codezeile duplizieren. Und wir müssen uns hier weniger ändern als morgen. Wenn ich also klicke, ändert sich der Textinhalt des Buxoms In Ordnung, als Nächstes drehe ich den Pfeil onClick. Dafür erstelle ich eine neue Klasse und CSS und wähle die Zeilen mit dieser Klasse aus. Wir definieren neue Stile und fügen diese Klasse dann dem übergeordneten Element der Linien hinzu. Ich bin im Button-Inhalt. Fügen wir zunächst die Klasse hinzu, in der Elemente nicht erwähnt wurden. Wir brauchen Projekte BTN. Dann müssen wir auf das erste untergeordnete Element der Schaltfläche zugreifen . In diesem Fall wird es die Welle sein. Wir brauchen also das erste Element Child, und dann müssen wir Zugriff auf den Inhalt erhalten , der das Schwesterelement des Repos sein wird Also werde ich hier die Eigenschaft Next Element Sibling verwenden Next Element Sibling Jetzt müssen wir also auf den Inhalt zugreifen und dazu einen Klassenwechsel hinzufügen. In diesem Fall verwende ich eine Methode namens Toggle. Es ermöglicht uns, die Klasse zu dem Element hinzuzufügen , wenn es sie nicht hat, und die Klasse zu entfernen, wenn sie sie hat. Wir brauchen also einen Punktschalter für die Klassenliste. Und ich werde hier den Namen der Klasse als Änderung angeben . In Ordnung, schauen wir uns JavaScript an. Jetzt müssen wir Styles und CSS definieren. Wir müssen Linien mit dem Klassenwechsel auswählen. Als Nächstes benötigen wir einen der CSS-Kombinatoren namens Child Selector , der alle Elemente auswählt, die den angegebenen Elementen untergeordnet sind Und jetzt müssen wir den Klassennamen der Zeile angeben, gefolgt vom n-ten Child-Selektor innerhalb der ersten Zeile. Ordnung, also müssen wir die erste Linie entlang der Z-Achse um 45 Grad drehen Z-Achse um 45 Grad Und außerdem müssen wir es leicht entlang der X-Achse bewegen . Welcher Wert? -0,65 Runde. Das war's mit der ersten Zeile. Ich werde diesen Code zweimal duplizieren und dann einige Änderungen vornehmen. Für die zweite Zeile müssen wir Z um einen Wert von -45 Grad drehen Was den Wert der Übersetzungsfunktion angeht, so wird x 0,65 rem betragen Als nächstes kommt die dritte Zeile. Wir müssen Z um einen Wert von 90 Grad drehen. Was den Translate betrifft, so wird X -0,5 RAM sein. Außerdem müssen wir den linken Rand auf 2.1 RAM setzen, einfarbig und weiß. Und wir müssen auch die Grenze auf der rechten Seite loswerden. Okay, wenn wir also auf die Schaltfläche klicken, dreht sich der Pfeil. Alles funktioniert gut. Bisher. Wir müssen den Projekten einen Fade-Effekt hinzufügen. Als Nächstes müssen wir unseren Code ein bisschen sauberer machen. Außerdem müssen wir die Überschrift dieser Aktion anpassen. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 14. Die Funktion „Mehr anzeigen“ zu Projekten hinzufügen - Teil 2: Okay, in der letzten Vorlesung haben wir es geschafft, die Projekte ein- und auszublenden Sobald wir auf die Schaltfläche Mehr anzeigen geklickt haben, müssen wir ihnen jetzt einige Fade-Effekte hinzufügen. Und sobald wir auf die Schaltfläche klicken, müssen wir die Seite reibungslos nach unten scrollen. Um verschiedene Effekte zu erzeugen. Wir müssen die Projekte mit einigen Intervallen anzeigen. Deshalb werden wir die Methode setTimeout verwenden. Wir müssen also die verschiedenen Verzögerungszeiten für Display Flex und Opazität 1 definieren für Display Flex und Opazität 1 Zuerst müssen wir den Projekten Display-Flex zuweisen. Und dann müssen wir nach einiger Zeit beginnen, die Projekte in unterschiedlichen Intervallen anzuzeigen. Also werde ich die Methode set timeout verwenden. Dann füge ich diese Codezeile als zweites Argument in die Funktion ein. Ich meine die Zeit, die ich hier verbringen werde, 600 Millisekunden Sobald ich jetzt auf die Schaltfläche klicke, werden die Projekte nach einer kleinen Verzögerung angezeigt. Okay, jetzt müssen wir uns um die Opazität kümmern. Wie ich bereits sagte, benötigen wir für jedes Projekt unterschiedliche Verzögerungszeiten. Verwenden wir erneut die setTimeout-Methode und fügen Sie hier diese Codezeile Jetzt müssen wir das zweite Argument definieren. Ich bin in der Wartezeit. Um für jedes Projekt unterschiedliche Verzögerungszeiten zu definieren , verwende ich den Parameter i. Und wir müssen es mit einer gewissen Zeit multiplizieren , sagen wir 200. Wenn ich jetzt auf die Schaltfläche klicke werden die Projekte in bestimmten Abständen angezeigt. Richtig? Jetzt haben wir den Fade-Effekt nicht mehr , weil wir Transition verwenden müssen. Wir müssen es den Projekten zuweisen. Wir benötigen Opazität und die Dauer 0,5 s. Wie Sie sehen können, haben wir jetzt also den Fade-Effekt Richtig? Sobald ich auf die Schaltfläche klicke, scrollt die Seite nicht automatisch nach unten. Wir müssen es manuell machen. Lassen Sie uns also weitermachen und das Problem beheben. Ich werde eine der Methoden verwenden, die als Scrollen in die Ansicht bezeichnet werden. Und wir müssen es an die Abschnittselemente anhängen. wir es also zunächst Wählen wir es also zunächst aus und wollten eine neue Variable erstellen. Nennen wir es Abschnitt drei. Und wählen Sie dann Elemente mithilfe der Abfrageauswahlmethode aus. Wir müssen hier den Klassennamen Abschnitt drei angeben und dann in der ersten setTimeout-Methode Folgendes übergeben in der ersten setTimeout-Methode Wann soll die Scroll-in-View-Methode an Abschnitt drei angehängt werden? Es wird ein Argument erfordern. Es wird das Objekt sein. Wir brauchen hier eine Eigenschaft namens Block mit einem Wert. Und jetzt, wenn ich auf die Schaltfläche klicke, die Seite oder scrolle nach unten, aber ohne glatte Fakten. Um das zu beheben, müssen wir den HTML-Elementen eine der Eigenschaften zuweisen den HTML-Elementen eine der , die als Scrollverhalten mit den Werten bezeichnet werden. Wie Sie jetzt sehen können, funktioniert alles einwandfrei. In Ordnung, jetzt müssen wir die gleichen Dinge tun. Sobald wir die Projekte verstecken. Wir müssen die Projekte verstecken, damit sie ihre Wirkung verblassen. Und wieder müssen wir bei einigen Intervallen den Projekten die Opazität Null mit unterschiedlichen Intervallen zuweisen , bis die Projekte keine angezeigt bekommen Also müssen wir erneut die setTimeout-Methode verwenden. Aber jetzt fügen wir in der else-Anweisung diese Codezeile ein. Und als zweites Argument meine ich die Menge an Zeit. Fügen wir 1.200 Millisekunden ein. Außerdem müssen wir die Projekte mithilfe von Opazität mit unterschiedlichen Intervallen ausblenden Opazität mit unterschiedlichen Intervallen Also noch einmal, wir brauchen die Methode setTimeout. Dann platzieren wir diese Codezeile in der Funktion. Und als zweites Argument, das ich hier durchgebe, habe ich mit 100 multipliziert Wenn ich jetzt auf die Schaltfläche klicke, werden die Projekte mit Fade-Vets ausgeblendet Und das einzige, was wir tun müssen, ist zur Seite hochzuscrollen. Also müssen wir erneut in die View-Methode scrollen. Nehmen wir diese Codezeile und fügen sie ein. Moment haben wir also das gleiche Ergebnis, weil wir den Inhalt nach dem Abschnitt noch nicht haben. Sobald wir den Inhalt hinzugefügt haben, funktioniert er wie im fertigen Projekt. Ordnung, bevor ich weitermache und die Überschrift dieses Abschnitts anpasse, werde ich diesen Code etwas übersichtlicher gestalten. Ich werde zwei verschiedene Funktionen zum Ein- und Ausblenden der Projekte erstellen . Lassen Sie uns eine neue Funktion außerhalb des Klickereignisses erstellen. Ich werde die Funktion show projects aufrufen Sie benötigt zwei Parameter. Das erste wird das Projekt sein. Was die zweite betrifft, sollte es die Indexnummer sein. Dann hole ich mir diese setTimeout-Methoden aus den if-Anweisungen und füge sie in die Funktion Und dann müssen wir diese Funktion innerhalb der if-Anweisung als Argumente aufrufen . Wir müssen Ihre Projekte bestehen. Und lassen Sie uns dasselbe für die anderen Aussagen tun. Lassen Sie uns eine neue Funktion erstellen. Ich nenne es Höhenprojekte. Es werden auch zwei Parameter benötigt, projects und ich hole mir dann die setTimeout-Methoden aus der else-Anweisung, füge sie in die Funktion ein und rufe dann die Funktion in der else-Anweisung mit den Argumenten Und ich kann sehen, dass alles auf die gleiche Weise funktioniert. Aber jetzt haben wir einen etwas saubereren Code. Ich möchte noch ein paar Dinge tun. Anstelle der If-Aussagen verwende ich wieder den logischen Operator und den Operator. Lassen Sie uns das Schlüsselwort if und die geschweiften Klammern loswerden. Und dann füge hier zwei Ampersand hinzu. Was die zweite If-Else-Aussage angeht, verwende ich einen ternären Operator Lassen Sie uns die Klammer öffnen und die Bedingung einfügen, ich meine den Bullen Show, Hide Als nächstes brauchen wir ein Fragezeichen. Wenn also der boolesche Wert wahr ist, müssen wir die Funktion show projects aufrufen Und wenn es falsch ist, müssen wir die Funktion Höhenprojekte aufrufen. In Ordnung? Als Nächstes kümmere ich mich um den TextContent der Schaltfläche Wir benötigen diesen Code nicht für jede Methode, da er diesen Code bei jeder Iteration ausführt Also werde ich es für jede Methode außerhalb von platzieren. Wir benötigen den booleschen Wert. Ich meine, Show Hide Bull, gefolgt vom ternären Operator Wenn diese Bedingung also zutrifft, muss der Textinhalt weniger angezeigt werden. Also holen wir uns diesen Code von hier. Wenn es falsch ist, müssen wir mehr zeigen. Also werde ich mir diese Codezeile schnappen. Lassen Sie uns abschließend die If-Else-Aussagen von hier loswerden . In Ordnung, also nochmal, alles funktioniert auf die gleiche Weise. Eigentlich ist mir aufgefallen, dass der Pfeil ohne Übergang seine Richtung ändert. Und es sieht nicht ganz gut aus. Lassen Sie uns also weitermachen und den Linien einen Übergang hinzufügen. Wir müssen zunächst die Projekte auswählen, gefolgt von den wichtigsten PT in der Reihe Lassen Sie uns Transition mit Ihren Werten all und 0,5 s verwenden . In Ordnung, jetzt ist das Problem behoben und der Pfeil rotiert gleichmäßig Schließlich müssen wir uns um die Überschrift dieses Abschnitts kümmern . Es wird der Überschrift des vorherigen Abschnitts ähneln . Um zu vermeiden, dass immer wieder derselbe Code geschrieben wird, werde ich ihnen einen gemeinsamen Klassennamen zuweisen und denselben Code für beide Überschriften und auch für die Überschriften verwenden denselben Code für beide Überschriften und auch für , die wir in Zukunft erstellen werden Zuallererst werde ich die Kommentare aus der Überschrift entfernen . Dann weisen wir beiden Überschriften zu, Klasse, Abschnittsüberschrift Dann nehme ich den Code und füge ihn ein. Es ist in den üblichen Stilen. Ändere auch die Kommentare. Wir brauchen die Abschnittsüberschrift und den Klassennamen. In Ordnung, wir haben hier die Überschrift dieses Abschnitts. In Zukunft werden wir also die Klassennamen einfach zu Überschriften hinzufügen und sie werden automatisch positioniert und formatiert In Ordnung, das ist es. Schließlich haben wir die Arbeit am Projektabschnitt abgeschlossen. Lass uns weitermachen. 15. Abschnitt Services erstellen und entwerfen: Okay, sobald wir mit dem Projektabschnitt fertig sind ist es an der Zeit, weiterzumachen und mit der Arbeit am nächsten Abschnitt zu beginnen , nämlich diesen Diensten. Schauen wir uns das fertige Projekt an. Hier haben wir also ein paar verschiedene Dienste. Sie werden in einer großen Schrift angezeigt. Und wenn wir sie anklicken, erscheint Text mit einigen schönen Fade-Effekten. Außerdem werden die Dienste reibungslos auf die linke Seite verschoben. Das werden wir in diesem Abschnitt erstellen. Ich beginne mit dem HTML-Markup. Fügen wir neue Kommentare in die HTML-Datei für Abschnitt vier ein. Das Open-Section-Tag mit dem Klassenabschnitt für. Dieser Abschnitt wird aus zwei Hauptteilen bestehen. Wir werden eine Abschnittsüberschrift und dann die Dienste haben. Lassen Sie uns neue Kommentare für die Abschnittsüberschrift einfügen. Dann öffne ich das H1-Überschrift-Tag mit einer Überschrift für den Klassenabschnitt Und mit dem Inhalt. Was ich kann. In Ordnung, als Nächstes werden wir die Dienste haben. Lassen Sie uns wieder neue Kommentare, Dienste und Dienste erstellen . Öffnen Sie dann den Geschenkanhänger, die Verpackung der Dienste sein wird, die ich jedem Cluster-Services-Wrapper zuweisen werde zuweisen Insgesamt werden wir also sechs verschiedene Dienste haben. Öffnen wir das div-Tag, das der Dienst selbst sein wird. Jeder Dienst wird aus zwei verschiedenen Elementen bestehen. Das erste wird das Link-Tag mit einem Klassenservice sein , übrigens. Dann füge ich dein Span-Element ein. Es wird der Leiter des Dienstes sein. Lassen Sie uns Ihre UI UX einfügen. Was das zweite Element innerhalb des Dienstes angeht, so wird es der Text sein. Öffnen wir das P-Tag mit einem Klassendiensttext. Eigentlich bereite ich die Service-Tags für jeden Dienst vor, also kopiere ich das erste aus diesem Textdokument. Es wird an die Quelldatei angehängt , damit Sie es herunterladen und verwenden können. Wie gesagt, wir werden sechs verschiedene Dienste haben. Also werde ich diesen Code fünfmal duplizieren und dann den Inhalt ändern. Der zweite Service wird die Icon-Illustration sein. Dann werden wir Branding haben. Der nächste Schritt wird die Entwicklung sein. Außerdem werden wir Bewegung und dann Fotografie haben . In Ordnung, das war's also mit dem HTML-Markup. Im Moment ist der Inhalt nicht sichtbar, er ist hinter dem Hintergrund gelandet. Lassen Sie uns fortfahren und mit der Anpassung dieses Abschnitts beginnen. Ich werde neue Kommentare in den Abschnitt mit der CSS-Datei für das Ende von Abschnitt vier einfügen . Wählen Sie dann das Abschnittelement aus und definieren Sie seine Position. Ich werde es zu einem Verwandten machen. Und ich werde mich auch auf 200 Prozent festlegen. Wie Sie jetzt sehen können ist der Inhalt dieses Abschnitts möglich. Wir haben hier eine Überschrift , die bereits positioniert und formatiert ist. Und auch hier können Sie den Service sehen. In Ordnung, schauen wir uns dieses Abschnittselement an, oder? Jetzt. Lassen Sie uns weitermachen und den Wrapper der Dienste anpassen Fügen wir neue Kommentare, Dienste und Dienste ein. Ich setze die Breite des Wrappers auf 100%. Als Nächstes müssen wir diese Dienste mithilfe von Flexbox aufeinander abstimmen. Ich werde es dem Wrapper-Classcenter zuweisen. Es enthält einige Flexbox-Stile. Und außerdem werde ich die Spalte mit der Flex-Richtung des Wrappers erweitern Spalte mit der Flex-Richtung des Wrappers Es wird also davon ausgegangen, dass sich die Dienste in der Mitte dieses Abschnitts befinden. Ordnung, danach werde ich den Service selbst anpassen Wählen wir es also aus. Zunächst definiere ich die Breite. Setzen wir es auf 70%. Außerdem werde ich am oberen und unteren Rand der Elemente etwas Platz schaffen , sagen wir, Abstand zu, zu RAM und Null. Und dann erstelle unten einen Rand. Wir brauchen hier 0,5 Rem Feststoff. Und als Farbe verwende ich 90 E 0 Okay, als Nächstes definiere ich die Breite für den Serviceunterteil Wählen wir den Dienst btn aus und stellen seine Breite auf 200 vorhanden ein. Danach passen wir die Span-Elemente an. Zuallererst werde ich die Schriftfamilie ändern. In diesem Fall verwende ich ein Telefon namens Poppins, Erhöhen Sie dann die Schriftgröße und machen Sie zehn RAM daraus. Außerdem werde ich den Stil der Schrift ändern. Es wird Italica sein, dann brauchen wir die Schriftstärke, um fett zu sein Und schließlich ändere die Farbe. Lass es uns noch einmal verwenden. Ordnung, wie Sie sehen können, sind die Überschriften der Dienste angepasst Standardmäßig. Wir müssen sie auf der rechten Seite platzieren. Machen wir das mit Positionen. Ich setze die Position auf absolut. Dann müssen wir für das übergeordnete Element relativ positionieren , da wir Span-Elemente entsprechend den Eltern positionieren werden. Nun, wie Sie sehen können, ist das Layout irgendwie durcheinander. Um das zu beheben, müssen wir die Anzeigeeigenschaft für die Serviceteile in den Block setzen . Weil das Link-Element standardmäßig in einer Zeile ist. Und wir müssen auch die Höhe definieren. Machen wir eine 15-Rampe draus. Ordnung, jetzt wird davon ausgegangen, dass das Problem behoben ist und wir können diese Dienste auf die rechte Seite verschieben Lassen Sie uns also gleich auf Null setzen. Richtig? Das war's mit dem Link-Element. Lassen Sie uns weitermachen und den Text anpassen. Wählen wir die besteuerte Dienstleistung aus. Ich werde die Schriftgröße erhöhen. Machen wir fünf Rem draus. Ändere auch die Farbe. Mach 777 draus. Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen. Mach 0,1 Zimmer draus. Und zuletzt ändere die Höhe. 15 sind gelaufen. In Ordnung, das war's also. Alles ist angepasst und bereit, diesem Abschnitt einige Effekte hinzuzufügen. Daher werden wir standardmäßig den Text des Dienstes ausblenden. Dazu setzen wir die Höhe der Texte auf Null. Außerdem verwende ich Visibility Hidden und Opazität Zero Ordnung, der Text ist versteckt und jetzt müssen wir ihn anzeigen, sobald wir auf diese Serviceschaltfläche klicken Also werde ich eine neue Klasse und CSS mit neuen Stilen erstellen . Und dann fügen wir diesen Cluster hinzu, den Absatz onclick mithilfe von JavaScript Gehen wir zur Datei script.js und fügen neue Kommentare für Abschnitt vier ein. Zuallererst müssen wir also ein Link-Element auswählen. Dann sollten wir sie durchschauen und ein solches Ereignis anhören, um jeden von ihnen zu Also wähle ich Link-Elemente mit der Query Selector, All-Methode Wir müssen hier den Klassennamen service btn angeben, benötigen wir für jede Methode mit einer Callback-Funktion als Parameter, ich füge Ihren Und dann müssen wir dem Service einen Event-Listener mit einem Klick-Event und einer Callback-Funktion Ordnung, also zunächst werde ich die Standardaktion der Link-Elemente verhindern , wie wir es zuvor getan haben Ich meine, sobald wir auf den Link klicken, navigieren wir zur oberen Seite der Seite. Um dies zu vermeiden, benötigen wir die PreventDefault-Methode Lassen Sie uns hier zunächst das Event-Objekt übergeben und dann die Standardmethode prevent verwenden. Jetzt ist das Problem behoben. Als Nächstes müssen wir Zugriff auf den Absatz erhalten und ihn in der Variablen speichern. Lassen Sie uns eine neue Variable mit dem Namen Service Text erstellen. Wir brauchen hier, Service Dot. Nächstes Element Geschwister, weil Absatz ein Geschwister des Dienstes btn ist Jetzt müssen wir zu diesem Element eine Klassenänderung hinzufügen, die wir in der CSS-Datei definieren. In diesem Fall verwende ich die Toggle-Methode, weil wir die Klasse des Elements onClick hinzufügen und es dann entfernen müssen Beim nächsten Klick. Wir müssen als Textpunktklassenliste, Punkt-Umschalter dienen. Und wir müssen hier die Änderung des Klassennamens angeben. Jetzt müssen wir neue Styles in der CSS-Datei definieren. Wählen wir Service-Tags mit Klassenwechsel aus. Um den Text anzuzeigen, benötigen wir die folgenden Stile. Wir müssen die Höhe wieder auf 15 RAM setzen. Dann müssen wir Sichtbarkeit sichtbar machen. Und wir müssen auch die Opazität erhöhen . Machen wir es zu einem Wenn ich jetzt auf die Überschriften klicke, werden die richtigen Service-Tags angezeigt Im Moment haben wir das hier nicht und es sind sanfte Effekte. Also müssen wir Transition nutzen. Wir müssen die Übersetzung in beiden Fällen definieren, ich meine, standardmäßig und mit dem Klassenwechsel. Im ersten Fall müssen wir also alle 0,2 s mit den Werten wechseln . Im zweiten Fall müssen Sie Höhe und Opazität angeben Die Dauer wird also in beiden Fällen 0,5 s betragen. Bei der Opazität benötigen wir jedoch eine gewisse Verzögerungszeit. Sagen wir 0,5 s. Wie Sie sehen können, funktioniert alles einwandfrei. Das einzige, was wir tun müssen, ist, diese Serviceschaltfläche bei Click auf die linke Seite zu verschieben diese Serviceschaltfläche bei Click auf die linke Seite zu Dafür müssen wir JavaScript verwenden, da wir einige Berechnungen benötigen. Sie denken vielleicht, dass wir nur die Position dieses Panelelements ändern müssen , aber das reicht nicht aus. Wenn wir die Lag-Position mit einem Wert von Null verwenden, können wir Transition nicht verwenden. Wenn wir zum Beispiel die richtige Position ändern und sie zu 100% festlegen, dann werden Sie sehen, wo sich die Spanelemente positionieren werden. Um ihre Positionen anzupassen, müssen wir also die Breite dieses Spanelements auf 100% subtrahieren die Breite dieses Spanelements auf 100% Ich werde eine neue Variable erstellen. Nennen wir es richtige Position. Wie gesagt, wir müssen die richtige Position des Dienstes btn definieren Und wir müssen es nur ändern , wenn bei den Service-Tags die Klasse geändert wird. Also müssen wir hier eine Bedingungsanweisung einfügen , in der wir überprüfen müssen , ob dieser Service Desk Klassenwechsel beinhaltet oder nicht. Wir brauchen also Punkte für die Dienstleistungssteuer, Klassenliste, Punkte, die enthalten. Und wir müssen hier den Klassenwechsel angeben. Wenn das stimmt, müssen wir die Breite dieses Spanelements auf 100% subtrahieren die Breite dieses Spanelements auf 100% Also werde ich eine der Methoden namens Calc verwenden. Dann brauchen wir 100% Minus. Um also Zugriff auf die Breite von Span-Elementen zu erhalten, verwende ich eine der Methoden namens get computed style Diese Methode gibt ein Objekt mit den Werten aller CSS-Eigenschaften zurück , die das Element besitzt. In der Klammer müssen wir die Span-Elemente angeben, die das untergeordnete Element des Dienstes Also brauchen wir Service Dot First Element Child. Und jetzt müssen wir auf die Breite zugreifen. Das passiert also, wenn die Bedingung wahr ist, aber wenn sie falsch ist, müssen wir die richtige Position auf Null setzen. In Ordnung? Schließlich müssen wir den Spanelementen die richtige Position zuweisen . Wir brauchen Servicepunkt als erstes Element, Kind, Punkt im Punktstil, rechts. Und es sollte der richtigen Position entsprechen . Wenn ich nun auf diese Oberflächendiagramme klicke und sie auf die linke Seite verschoben werden, müssen wir diesen Moment eigentlich glatter gestalten. Verwenden wir also Transition. Wir brauchen die richtige Dauer, 0,5 s. Ordnung, also wie Sie sehen, funktioniert alles perfekt Und mit diesem Abschnitt sind wir fertig. Als nächstes müssen wir uns um den Inhaltsbereich kümmern. Also lass uns weitermachen. 16. Kontaktformular erstellen und anpassen: Okay, in der vorherigen Vorlesung haben wir die Arbeit am Projektabschnitt abgeschlossen, und jetzt ist es an der Zeit, weiterzumachen und uns um den nächsten Abschnitt zu kümmern , der eine Kontaktaufnahme mit mir sein wird Dieser Abschnitt besteht aus verschiedenen Teilen. Wir haben hier die Überschrift, gefolgt von ein paar Eingabefeldern mit einer Schaltfläche zum Senden. Und unten haben wir auch eine Diashow der Social-Media-Symbole In dieser Vorlesung werden wir uns um das Formular kümmern. Was diese Vorlesung angeht, werden wir sie später erstellen. Die Überschrift, die oben in den Eingabefeldern platziert wird, ist dynamisch. Ich meine, standardmäßig sehen wir hier den Text. Lass uns reden. Aber wenn ich die Eingabefelder fokussiere , ändert sich das dynamisch. In Ordnung, schauen wir uns an, was wir erstellen werden. Wie üblich beginne ich mit dem HTML-Markup. Fügen wir neue Kommentare in die HTML-Datei ein. Abschnitt fünf. Aus Abschnitt fünf. Öffnen Sie dann den Abschnittsnamen mit einer Klasse, Abschnitt fünf. Im ersten Teil dieses Abschnitts werden wir also eine Abschnittsüberschrift und die Eingabefelder haben. Fügen wir neue Kommentare für die Überschrift von Abschnitt 5 ein. Öffnen Sie dann das H1-Überschrift-Tag mit der Überschrift des Klassenabschnitts. Und mit dem Inhalt. Kontaktiere mich. Als Nächstes erstelle ich ein Formularelement, aber vorher benötigen wir einen Formular-Wrapper Fügen wir eine neue Formularform für Kommentare und öffnen dann ein Div-Tag mit einer Klasse für Rubber. Dieses Element wird also die Überschrift und das Formular selbst enthalten . Öffnen wir das H2-Überschrift-Tag mit einer Klasse von Formularüberschriften. Und mit dem Inhalt. Lass uns reden. Richtig. Nach den Schulden werde ich selbst ein Formularelement erstellen, das jeder Klasse zugewiesen ist. Kontaktformular. Insgesamt haben wir also drei verschiedene Eingabefelder, Text, Bereich und eine Schaltfläche zum Senden. Öffnen wir das Eingabe-Tag. Der Typ wird besteuert. Außerdem benötigen wir hier ein Klassenattribut, Kontakt, Formulareingaben. Und dann brauchen wir einen Platzhalter. Mit dem Content Knee. Lassen Sie uns diese Codezeile zweimal duplizieren. Das zweite Eingabefeld wird für E-Mail sein. Also werde ich den Typ und auch das Platzhalterattribut ändern und auch das Platzhalterattribut Das nächste Eingabefeld wird Text enthalten. Was das Platzhalterattribut angeht, füge ich Ihren Betreff In Ordnung, danach erstelle ich einen Textbereich. Es wird zwei verschiedene Klassen geben. Einer für die gängigen Stile, ich meine Kontaktformulareingabe. Was den zweiten betrifft, so wird es für einzelne Stile sein. Lassen Sie uns den Textbereich Ihres Kontaktformulars einfügen. Außerdem benötigen wir ein Platzhalterattribut mit der Inhaltsnachricht Lassen Sie uns abschließend eine Schaltfläche zum Senden erstellen. Ich werde es mit Eingabeelementen erstellen. Der Typ wird eingereicht. Außerdem benötigen wir ein Klassenattribut mit dem Wertformular submit btn. Und dann brauchen wir das Attribut value mit den Inhalten, die Anfragen senden. In Ordnung? Das HTML-Markup ist also fertig, aber im Moment ist es nicht sichtbar Es befindet sich hinter dem Hintergrund. Also müssen wir anfangen, etwas CSS zu schreiben. Schreiben wir neue Kommentare in die CSS-Datei, Abschnitt fünf. Aus Abschnitt fünf. Wählen Sie dann die Elemente dieses Abschnitts aus. Zuallererst werde ich die Position ändern. Machen wir es zu einem Verwandten. Und dann definiere ich die Höhe. Machen wir es zu 100% aus dem Viewport. Wie Sie jetzt sehen können, ist der Inhalt sichtbar. Ich werde es in der Mitte dieses Abschnitts platzieren. Und dafür verwenden wir Flexbox. Ich werde dem Abschnitt Element Class Center zuweisen. Es wird also davon ausgegangen, dass der Inhalt in den Mittelpunkt dieser Aktion gestellt wird , und jetzt können wir die Elemente anpassen. Lassen Sie uns mit der Formularüberschrift beginnen. Ich füge neue Kommentare für das Formular ein. Wählen Sie dann die Formularüberschrift aus. Und lassen Sie uns zunächst die Schriftfamilie definieren. Ich werde hier Poppins San-Serif verwenden, um die Schriftgröße zu erhöhen, sechs RAM draus zu machen. Außerdem werde ich die Schrift etwas fetter machen. Lassen Sie uns die Schrift auf 400 setzen und dann die Farbe ändern. Ich verwende die U-Farbe 90, E 0 E. Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen. Und wir brauchen auch etwas Platz am Ende einer Überschrift. Verwenden wir also den seitlichen Abstand mit einem Wert von etwa 0,3. Und dann brauchen wir Margin Bottom mit Wert drei. Rampe. In Ordnung, schauen wir uns die Überschrift an. Lassen Sie uns weitermachen und uns um die Eingabefelder kümmern. Ich werde sie mit Flexbox ausrichten. Lassen Sie uns also weitermachen und dem Formularelement Klassenzentrum zuweisen . Außerdem müssen wir die Biegerichtung ändern um die Eingabefelder vertikal in einer Spalte zu platzieren . Wählen wir also „Kontaktformular“ und legen die Flexrichtung auf Spalte fest. Ordnung, wie Sie sehen können, sind die Eingabefelder ausgerichtet und jetzt müssen wir sie starten. Beginnen wir mit den Eingaben des Kontaktformulars. Zunächst definiere ich die Breite. Machen wir 60 RAM draus. Dann werde ich mithilfe von Padding etwas Platz innerhalb der Eingabe schaffen mithilfe von Padding etwas Platz innerhalb der Eingabe Wir erhalten den Wert 0,5 RAM. Lassen Sie uns außerdem etwas Platz am oberen und unteren Rand der Eingabefelder schaffen etwas Platz am oberen und unteren Rand der , indem wir Margin mit den Werten eins, RAM und Null verwenden . Okay, als Nächstes ändere ich die Hintergrundfarbe und auch den Rand Ich setze die Hintergrundfarbe auf Weiß. Aber bei einer niedrigeren Opazität verwende ich den RGBA-Wert mit weißer Farbe und mit der Opazität Und ändere auch die Grenze. Ordnen wir dem Punkt 1 g Feststoff zu, und wir färben 90 E 0 E. Gut, danach kümmere ich mich um die Schrift Erhöhen wir die Schriftgröße auf 1,7 Rem. Außerdem werde ich die Schrift fett machen. Dann ändere die Farbe. Sie verwenden Ihre Farbe AAA und schaffen auch etwas Abstand zwischen den Buchstaben. Machen wir 0,1 Rem daraus. In Ordnung, die Eingabefelder sehen also viel besser aus. Als Nächstes kümmere ich mich um die Höhe der Eingabefelder und auch um den Textbereich. Sie werden unterschiedliche Höhen haben. Lassen Sie uns die Höhe der Kontaktformulareingaben auf fünf RAM festlegen . Wählen Sie dann den Textbereich aus und stellen Sie den Wert auf 20 Runs ein. Ordnung, wie Sie sehen können, sehen die Eingabefelder und auch der Textbereich gut aus Bevor wir weitermachen und den Senden-Button anpassen, werde ich hier ein kleines Problem beheben. Im Falle des Textbereichs können wir seine Breite und Höhe manuell von der unteren rechten Ecke aus ändern , wo wir den Größenänderungscontroller haben Sobald wir die Größe des Textbereichs ändern, wird das Layout unterbrochen. Also werde ich diese Funktion deaktivieren. Dafür müssen wir eine der CSS-Eigenschaften namens resize verwenden der CSS-Eigenschaften namens resize Und wir müssen es auf Null setzen. Ordnung, wie Sie sehen können, können wir die Größe des Textbereichs nicht mehr ändern Das letzte Element , das wir benötigen, um diesen Senden-Button anzupassen, wählen wir aus. Zunächst definiere ich Breite und Höhe. Stellen wir die Breite auf 20 RAM ein. Was die Höhe angeht, werde ich fünf RAM draus machen. Dann ändere die Hintergrundfarbe. Ich werde hier dieselbe rote Farbe verwenden. Und dann werde die Standardgrenze los. Machen wir keinen draus. Okay, als Nächstes platziere ich es auf der linken Seite. Dafür verwende ich eine Eigenschaft namens align self. Wir könnten Flex schätzen, starten. Erhöhen Sie auch die Schriftgröße und ändern Sie die Farbe des Textes. In Ordnung, das ist es. Alle Elemente sind gestylt und jetzt ist es an der Zeit, das Formular dynamischer zu gestalten Sobald wir uns auf die verschiedenen Eingabefelder konzentriert haben, müssen wir die richtige Überschrift anzeigen. Dafür. Ich werde JavaScript verwenden. Gehen wir zur Datei script.js und fügen neue Kommentare für Abschnitt fünf ein. Zunächst wähle ich die Formularüberschrift und auch alle Eingabefelder, einschließlich des Textbereichs. Lassen Sie uns Ihr neues Kommentarformular einfügen. Dann wähle ich aus der Überschrift aus. Lassen Sie uns also eine neue Variable erstellen Rufen Sie sie von der Überschrift aus auf und wählen Sie diese Elemente dann mit der Abfrageauswahlmethode Dann müssen wir die Eingänge auswählen. Also werde ich diese Codezeile duplizieren und dann den Namen ändern. Wir benötigen Formulareingaben. Außerdem brauchen wir hier Query, Selector, alle Methoden. Und dann geben wir hier den Klassennamen und die Eingabe des Kontaktformulars an. In Ordnung. Danach müssen wir die Eingabefelder durchgehen und das Ereignis namens focus verwenden. Also werde ich für jede Methode mit Formulareingaben verwenden. Lassen Sie uns eine Callback-Funktion mit der Parametereingabe übergeben. Wir müssen also den Event-Listener mit dem Ereignis Focus an die Eingaben anhängen Event-Listener mit dem Ereignis Focus an die Eingaben anhängen Sobald wir also die Eingabefelder fokussiert haben, müssen wir den Textinhalt der Überschrift ändern. Also brauchen wir hier Formularüberschrift, Punkt, Textinhalt. Dann öffne ich Backticks. Der Text beginnt mit deinem. Und dann benötigen wir den Wert des Platzhalter-Attributs. Also werde ich hier Eingaben, Punkte, Ort, Halter weitergeben. Es gibt uns den Wert des Platzhalter-Attributs. Wenn ich mich also auf eine der Eingaben konzentriere, ändert sich der Standardinhalt der Überschrift. Alles funktioniert gut, aber wir müssen den Inhalt der Überschrift mit einem Fade-Effekt ändern . Sobald wir die Eingaben fokussiert haben, müssen wir die Überschrift ausblenden und nach einer gewissen Zeit wieder einblenden, was der Dauer des Übergangseffekts entsprechen sollte . Zuallererst müssen wir die Überschrift Institutionelles Formular Überschrift Punktstil, Punktopazität gleich Null ausblenden die Überschrift Institutionelles Formular Überschrift Punktstil, Punktopazität gleich Null Dann müssen wir eine setTimeout-Methode verwenden. Platzieren wir diese Codezeile in der Funktion. Und fügen Sie hier aus der Überschrift den Punktstil hinzu, wobei Punktopazität gleich eins ist Die Dauer des Übergangs wird 0,3 s betragen. Ich werde hier also 300 Millisekunden verstreichen Und dann müssen wir Transition in der CSS-Datei mit den Werten Opazität 0,3 s verwenden der CSS-Datei mit den Werten . Gut, wenn man bedenkt, dass wir jetzt einen schönen Fade-Effekt haben Das einzige, was wir tun müssen, ist, den Standardinhalt der Überschrift wieder hierher zu bringen , sobald wir das Eingabefeld nicht mehr fokussiert Um das zu erreichen, verwende ich ein anderes Ereignis namens Bluer, das auftritt, sobald wir die Eingabefelder unfokussiert Lassen Sie uns weitermachen und diesen Code duplizieren. Dann ändere das Ereignis, das wir hier brauchen, blauer. Und wir müssen auch den Inhalt der Überschrift ändern. Es wird der Standardinhalt sein. Lass uns reden. Wenn ich also irgendwo außer den Eingabefeldern klicke, ändert sich die Konstante und die Standardkonstante wird angezeigt. Ordnung, das war's also mit dem ersten Teil des Inhaltsabschnitts Als Nächstes erstellen wir eine Diashow mit den Social-Media-Symbolen Gehen wir also zur nächsten Vorlesung über. 17. Diashow von Social-Media-Links erstellen: Okay, also im letzten Video haben wir Kunden den ersten Teil des Kontaktbereichs erstellt des Kontaktbereichs Jetzt muss ich mich um diese Diashow der Social Media-Icons kümmern diese Diashow der Social Media-Icons Wie Sie sehen können, befinden sie sich unter den Eingabefeldern. Ich meine, unten auf der Seite bewegen sich die Symbole in einigen Intervallen. Das Symbol in der Mitte wird heller. Die übrigen Symbole sind standardmäßig dunkler. Ordnung, lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen Lassen Sie uns neue Kommentare für die Diashow einfügen. Öffnen Sie dann das div-Tag, das der Wrapper dieser Diashow sein wird Insgesamt werden wir also fünf verschiedene Social-Media-Symbole haben . Sie werden durch die Bilder dargestellt, und sie werden auch von den Link-Elementen umhüllt. Also öffne ich das Link-Tag mit dem Link zur Diashow der Klasse Und dann werde ich hier erläutern, in welchen Elementen. Geben wir das Quellattribut an. Wir benötigen Ordner, Bilder, soziale Symbole und dann die Image-Diashow, MG F1, PNG Insgesamt werden wir also fünf Icons haben. Lassen Sie uns das Link-Element viermal duplizieren und dann schnell die Namen der Bilder ändern. Okay, hier haben wir die Icons. Im Moment sind sie zu groß und das Layout ist durcheinander. Also kümmern wir uns darum. Ich werde die Symbole horizontal in einer Reihe platzieren. Verwenden wir also Flexbox. Soweit ich Ihre Kommentare für die Diashow einfügen werde Ihre Kommentare für die Diashow Wählen Sie dann die ihm zugewiesenen Wrapper-Div-Elemente aus. Flex anzeigen. Außerdem werde ich seine Breite definieren. Als Nächstes müssen wir ein Linkelement auswählen und die Breite ändern. Ich setze die Breite auf 20%. Und schließlich müssen wir die Breite des Bildes selbst definieren . Wählen wir also ein Bild aus. Stellen Sie die Breite auf 100% ein. In diesem Fall nimmt das Bild 100% der Breite seines übergeordneten Elements ein. Wie Sie sehen können, haben wir hier also viel bessere Ergebnisse. Im Moment werden die Eingabefelder und die Symbole nebeneinander platziert , um sie übereinander zu platzieren Lassen Sie uns also weitermachen und die Biegerichtung des Schnittelements ändern . Wir müssen daraus eine Kolumne machen. Okay, jetzt brauchen wir etwas Platz zwischen den Eingaben und den Symbolen Verwenden wir Margin Top, den Wert zehn RAM, und schaffen wir zusätzlich etwas Platz auf der linken und rechten Seite, indem wir Padding verwenden Setzen wir es auf Null und starten es. Abschließend werde ich den Symbolen auf der linken und rechten Seite ein Padding zuweisen auf der linken und rechten Seite ein Padding Dadurch werden die Bilder verkleinert. Lassen Sie uns also Padding auf 0.1 run setzen. In Ordnung, schauen wir uns das CSS an. Vorerst. Wir müssen dafür sorgen, dass die Diashow mit JavaScript funktioniert. Gehen wir also zur Datei script.js. Zunächst füge ich Ihre neuen Kommentare für die Diashow Dann müssen wir die Wrapper-Entwicklung auswählen. Lassen Sie uns eine neue Variable erstellen. Ich nenne es Slideshow und wähle es mit der Methode querySelector Ordnung, lassen Sie mich Ihnen sagen, wie wir diese Diashow zum Laufen bringen Wir werden das erste Symbol aus der Liste entfernen und es als letztes Symbol wieder zur Liste hinzufügen. Wir werden das mit einigen Intervallen und auch mit einigen sanften Übergängen Lassen Sie uns alles über den Ablauf dieser Diashow erzählen. Wie gesagt, wir brauchen einige Intervalle und dafür verwende ich eine der eingebauten Methoden namens set interval. Es braucht zwei Argumente. Die erste ist eine Callback-Funktion, die nach jedem Intervall ausgeführt wird Was das zweite Argument betrifft, so wird es der Betrag des Integrals selbst sein. Wir werden die Bilder nach 3 s ändern. Ich werde also 3.000 Millisekunden überschreiten Okay, wie gesagt, wir müssen das erste Symbol entfernen und es dann als letztes zur Liste hinzufügen. Wählen wir also zunächst das erste Symbol aus. Ich werde eine neue Variable erstellen. Nennen wir es erstes Symbol. Dann benötigen wir den Slideshow-Punkt, das erste Element, ein Kind , um Zugriff auf das erste Symbol zu erhalten Jetzt ist das erste Symbol ausgewählt und um es aus der Wrapper-Entwicklung zu entfernen, verwende ich eine der Dome-Methoden namens removed child Also brauchen wir Diashow-Punkte, entferne das Kind. Und wir müssen das für eine Sekunde spezifizieren. Wie Sie sehen können, werden die Symbole alle 3 s entfernt. Wie gesagt, wir müssen sie wieder zur Liste hinzufügen. Und dafür verwende ich eine weitere Dome-Methode namens Append Child Standardmäßig fügt es ein Element als letztes Kind hinzu. Also brauchen wir Slideshow Dot Append Child. Und wir müssen hier noch einmal für seine Ikone angeben. Okay, wie Sie sehen können, funktioniert die Diashow, alles, aber wir müssen ein paar verschiedene Effekte hinzufügen Als erstes werde ich das erste Symbol sanft mit einem Fade-Effekt entfernen . Um das zu tun, erstelle ich eine neue Klasse und CSS, nennen wir es ausgeblendet Diese Klasse wird also zwei Zellen enthalten. Um die Elemente auszublenden, müssen wir sowohl die Opazität als auch die Breite auf Null setzen. Und außerdem müssen wir Transition für das erste Symbol verwenden . Um das erste Symbol auszuwählen, verwende ich die Kinderauswahl Dann lassen Sie uns den Übergang einleiten. Wir benötigen Breite, die Dauer 0,5 s und dann Opazität mit der gleichen Dauer Okay, das war's mit dem CSS. Gehen wir zurück zur JavaScript-Datei. Jetzt müssen wir Klasse hinzufügen, ausgeblendet. Das erste Symbol. Wir brauchen das erste Symbol, den Punkt, Klassenliste, den Punkt hinzufügen. Und wir müssen hier angeben, dass der Klassenname ausgeblendet ist. Jetzt wird das Symbol entfernt, aber ohne Fade-Effekt, da Übergangseffekt irgendwann auftritt, eigentlich in der halben Sekunde. Wir müssen also die Hälfte dieser Sekunde warten , bevor wir das Element aus der Liste entfernen. Um das zu tun, verwende ich eine der Metriken namens setTimeout Wir werden zwei Argumente haben. Die erste wird eine Callback-Funktion sein. Fügen wir hier diese beiden Zeilen ein. Was die Zeit angeht , werde ich 500 Millisekunden verwenden Jetzt wird das Symbol mit einem schönen Fade-Effekt entfernt. Jetzt müssen wir es wieder mit Fade-Effekt zur Liste hinzufügen . Um das zu tun, müssen wir die ausgeblendete Klasse aus den Elementen entfernen Also müssen wir zuerst das Symbol Punkt Klasse auflisten, Punkt entfernen, ausgeblendet Jetzt wird das Symbol zur Liste hinzugefügt, jedoch ohne Fade-Effekt. Denn auch hier müssen wir auf die halbe Sekunde warten. Also müssen wir die setTimeout-Funktion mit der gleichen Zeit, 500 Millisekunden, erneut verwenden der gleichen Zeit, 500 Millisekunden, Jetzt haben wir hier also immer noch keinen Fade-Effekt , weil wir den Übergang für das letzte Symbol definieren müssen . Eigentlich brauchen wir den gleichen Übergang , den wir für das erste Symbol verwendet haben. Also füge ich hier nur den Selektor für das fünfte Symbol Moment funktioniert alles gut und wir können weitermachen und uns um den zweiten Effekt kümmern. Ich meine, wir müssen die Symbole standardmäßig dunkler machen, und wir müssen sie heller machen, sobald sie den dritten Platz in der Liste einnehmen. Lassen Sie uns zunächst alle Symbole dunkler machen. Dafür verwende ich eine der Eigenschaften namens Filter mit einer Funktion namens Helligkeit. Danach erstelle ich eine neue Klasse und CSS, die die höhere Helligkeit beinhalten werden. Und wir werden diese Klasse als Elemente hinzufügen, die JavaScript verwenden. Nennen wir diese Klasse Licht und weisen ihr eine Filterhelligkeit mit dem Wert 1,5 zu. Jetzt müssen wir das dritte Symbol auswählen und ein neu erstelltes Klassenlicht hinzufügen. Erstellen wir eine neue Variable, nennen wir sie drittes Symbol. Um Zugriff auf das dritte Symbol zu erhalten, benötigen wir Slideshow-Kinder Und wir mussten hier die Zahl drei angeben. Jetzt haben wir das dritte Symbol ausgewählt und müssen seiner Klasse Licht hinzufügen. Wir brauchen also ein drittes Symbol, einen Punkt, eine Klassenliste. Punkte, Licht. Wie Sie jetzt sehen können, wird das Symbol heller, aber die Helligkeit bleibt erhalten. brauchen wir nicht. Wir müssen das Klassenlicht wieder entfernen. Wir müssen es also aus dem vorherigen Geschwistersymbol des dritten Symbols entfernen , denn sobald es sich bewegt, ist es nicht mehr das dritte Symbol in der Liste, sondern das zweite Also brauchen wir den dritten Symbolpunkt, vorherige Elemente, Geschwister, Punkt, Klassenliste, Punkt, entferne das Licht für den Klassennamen Also jetzt funktioniert alles gut. Wir müssen diesem Effekt nur einen Übergang hinzufügen. Lassen Sie uns also weitermachen und das dritte Symbol auswählen, indem wir den dem Übergang zugewiesenen untergeordneten Selektor mit dem Wertefilter 0,5 s verwenden. Jetzt haben wir also viel bessere Ergebnisse Das Symbol wird langsam dunkler. Aber wie Sie sehen können, brauchen wir einen Übergang sobald das Symbol ebenfalls heller wird. Also fügen wir hier Übergangsfilter und die Dauer 1,5 s hinzu. Okay, jetzt war alles in Ordnung. Und bevor wir diese Vorlesung beenden, werde ich noch eine Sache machen. Wenn ich die Seite neu lade, werden alle fünf Icons dunkler. Eigentlich brauchen wir das nicht. Wir müssen das Food Icon standardmäßig heller machen. Und um das zu tun, füge ich dem dritten Symbol in der HTML-Datei eine Klasse hinzu, die gelogen wurde. Okay, das ist alles. Endlich sind wir fertig. Wir haben die Arbeit am Kontaktbereich abgeschlossen. Lass uns weitermachen. 18. Navigation erstellen und anpassen: Okay, sobald wir mit dem Kontaktbereich fertig sind, werde ich die Navigation erstellen und anpassen. Schauen wir uns das fertige Projekt an. Wie Sie sehen können, haben wir hier ein paar verschiedene Navigationspunkte. Sobald wir auf der Seite nach unten scrollen , verwandelt sich das Navigationsmenü in ein Symbol, das aus zwei Zeilen besteht. Wenn wir erneut darauf klicken, werden die Menüelemente angezeigt. Wenn ich danach scrolle, werden die Elemente ausgeblendet und das Menüsymbol wird angezeigt. Wenn ich bis zum Anfang der Seite scrolle, die Menüelemente automatisch angezeigt. Wenn ich auf die Menüpunkte klicke, navigieren wir außerdem problemlos zu den richtigen Abschnitten. In Ordnung, genau das werden wir in dieser Vorlesung tun. Lassen Sie uns anfangen, ein HTML-Markup zu erstellen. Ich füge direkt nach dem Seitenhintergrund neue Kommentare ein. Dann füge ich hier wieder neue Kommentare für das Menüsymbol ein. Öffnen Sie dann das Div-Tag mit dem Klassenmenüsymbol. Wie Sie gesehen haben, wird das Menüsymbol aus zwei Zeilen bestehen. Also öffne ich das Div-Tag mit der Klassenmenü-Symbolzeile. Dann lass es uns duplizieren. Als Nächstes erstelle ich Navigationselemente. Lass uns deine neuen Kommentare einfügen, Navbar und los geht's. Öffnen Sie dann das HTML5-Navigationselement mit einer Klassen-Navigleiste. Insgesamt werden wir also fünf verschiedene Navigationspunkte haben. Öffnen wir das Link-Tag mit einem Nickerchen in der Klasse oder verlinken wir auf die Startseite des Inhalts. Dann werde ich die Linkelemente viermal duplizieren und den Inhalt ändern. Im zweiten Artikel geht es um mich. Dann werden wir Projekte, Dienstleistungen und Kontakte haben. In Ordnung, das war's also mit dem HTML-Markup. Alles ist vorbereitet, aber im Moment ist nichts sichtbar. Das werden wir bald beheben. Fangen wir an, CSS zu schreiben. Zunächst werde ich die Navigationselemente anzeigen und anpassen. Lassen Sie uns neue Kommentare, Navigation und Navigation einfügen . Dann brauchen wir wieder Kommentare für Navbar. Wählen wir Navigationselemente aus. Definieren Sie zunächst, dass die Position festgelegt werden soll. Und ich werde auch Top-Immobilien definieren. Machen wir 2,5 Rem daraus. Jetzt sind die jetzt vier sichtbar. Ich meine, wenn ich alle Elemente auswähle, werden Sie die Navigationselemente in der oberen linken Ecke der Seite sehen . Dafür müssen wir sie auf der richtigen Seite platzieren. Ich werde Flexbox verwenden. Definieren wir zunächst diese Breite. Ich setze es auf 100%. Dann benutze Flexbox. Wir brauchen Display Flex. Und um die Artikel auf der rechten Seite zu platzieren, begründen wir Inhalte mit Value Flex End. Wie Sie sehen können, befindet sich die Navigationsleiste auf der rechten Seite der Seite Okay, lassen Sie uns mit Polsterung etwas Platz auf der rechten Seite schaffen mit Polsterung etwas Platz auf der rechten Seite Ich werde die Polsterung nach rechts stellen, Rampe 23. Schauen wir uns jetzt oben rechts an, als Nächstes werde ich die Links anpassen. Wählen wir nun pro Link aus. Zunächst definiere ich die Schriftgröße. Lass es uns 1,5 laufen lassen. Dann mache ich das Telefon mutiger. Lassen Sie uns die Schriftstärke auf 700 setzen. Verwandeln Sie auch Text in Großbuchstaben und ändern Sie die Farbe, machen Sie ihn weiß Als Nächstes werde ich mithilfe von Margin etwas Abstand zwischen den Elementen schaffen . Setzen wir es oben und unten auf Null und links und rechts auf 2,5 rem. Ordnung, wie Sie sehen können, sind die Menüelemente angepasst Wenn ich auf der Seite nach unten scrolle, werden Sie feststellen, dass die Elemente hinter den Elementen landen. Ich werde das mit der Z-Index-Eigenschaft beheben. Setzen wir es auf 100. Und außerdem werde ich den Objekten einen kleinen Schatteneffekt hinzufügen. Verwenden wir Textschatten mit den Werten 0,3 RAM, 0,5 RAM und der schwarzen Farbe. In Ordnung, das ist es. Unsererseits sind wir fertig. Jetzt werde ich das Menüsymbol gestalten. Zuerst. Lassen Sie uns weitermachen und die Zahl mit Opazität Null und sichtbarer Sichtbarkeit ausblenden Opazität Null und sichtbarer Sichtbarkeit ausblenden Fügen Sie dann neue Kommentare für das Menüsymbol ein und wählen Sie es aus. Zuerst werde ich die Position des Menüsymbols festlegen . Dann definieren wir diese Breite und Höhe. Ich werde mit 212 RAM beginnen. Was die Höhe angeht, machen wir sieben RAM daraus. Und außerdem werde ich eine temporäre Hintergrundfarbe verwenden . Stellen wir es auf Rot. Also hier haben wir das Menüsymbol. Im Moment befindet es sich in der oberen linken Ecke der Seite, sodass wir seine Position ändern müssen. Setzen wir die obere Position auf Null und die rechte Position auf die sechste Rampe. In Ordnung, jetzt ist es an der Zeit , die Linien anzuzeigen. Lassen Sie uns also weitermachen und das Menüsymbol, Linie, die definierte Breite und Höhe auswählen. Ich setze die Breite auf vier RAM. Was den Hybrid angeht, wird es 0,1 RAM sein. Und ändere auch die Hintergrundfarbe, mache sie weiß. Hier haben wir also die Linien, aber wie Sie sehen können, brauchen wir etwas Abstand zwischen ihnen. Lassen Sie uns Raum schaffen, indem wir den Rand 0,5 rem und Null verwenden. Und lassen Sie uns den Linien auch einen kleinen Schatteneffekt hinzufügen. Die Verwendung von Box-Shadow ergibt die Werte 0,31, 0,5 RAM und die schwarze Farbe Ordnung, danach platziere ich das Symbol in der Mitte der Box Dafür können wir einfach ein Klassenzentrum nutzen. Außerdem müssen wir die Biegerichtung ändern. Stellen wir es so ein, dass es sie anruft. Ordnung, das Menüsymbol ist also angepasst und wir können den roten Hintergrund entfernen Das Symbol ist fertig und jetzt müssen wir die Navigation zum Laufen bringen. Standardmäßig blende ich das Menüsymbol aus und zeige die Navigationselemente wieder an. Wir brauchen also Opazität Null, Sichtbarkeit versteckt. Und außerdem müssen wir diese beiden Leitungen von hier aus loswerden. Sobald wir auf der Seite nach unten scrollen, müssen wir die Menüelemente ausblenden und das Menüsymbol anzeigen. Also müssen wir das Scroll-Event verwenden. Gehen wir zur JavaScript-Datei und wählen Sie zunächst das Menüsymbol aus. Und dann Albert, lassen Sie uns zuerst Kommentare, Navigation, Navigation einrichten. Dann wähle ich das Menüsymbol aus. Lassen Sie uns eine neue Variable erstellen und sie als Menüsymbol bezeichnen, und wählen Sie dann die Elemente mit der Methode querySelector Dann werde ich diese Codezeile duplizieren und den Namen der Variablen ändern. Wir brauchen Navbar. Und ich werde auch den Klassennamen ändern. Wir brauchen jetzt nochmal für okay, danach müssen wir den Dokumenten mit Scroll-Event einen Event-Listener anhängen Dokumenten mit Scroll-Event Wie gesagt, wir müssen es schaffen, das Menüsymbol beim Scrollen auszublenden und anzuzeigen. Ich werde neue Klassen und eine neue CSS-Datei mit neuen Stilen erstellen . Und dann fügen wir sie mithilfe von JavaScript zu den Elementen hinzu. Also lass uns eine neue Klasse erstellen, ich nenne sie Menüsymbol anzeigen. Um das Menüsymbol anzuzeigen, benötigen wir Opazität eins und Sichtbarkeit sichtbar bei der Zahl, wir müssen es ausblenden Also werde ich eine neue Klasse erstellen. Nennen wir es „Jetzt ausblenden“ -Bar. In diesem Fall benötigen wir Opazität Null und versteckte Sichtbarkeit. Okay, die Klassen sind fertig und jetzt müssen wir sie zum Menüsymbol hinzufügen Und dann unser oberes Menü, ich kann Klassenliste und Punkt hinzufügen. Und wir müssen hier den Klassennamen angeben und das Menüsymbol anzeigen. Und als nächstes benötigen wir im Fall eines Flughafens jetzt Portpunkt, Klassenliste, Punkt , fügen Sie den Klassennamen und die Höhe der Navigationsleiste Wenn ich also auf der Seite nach unten scrolle, werden die Navigationselemente ausgeblendet und das Menüsymbol wird angezeigt. Wir müssen diesen Wandel mithilfe eines Übergangs reibungsloser gestalten. Fügen wir dem Menüsymbol einen Übergang mit den Werten Opazität und 0,2 s hinzu. Was die Navigationsleiste betrifft, werde ich wieder Übergangsopacity 0,5 s und auch Sichtbarkeit 0,5 s verwenden s und auch Sichtbarkeit 0,5 s Wenn wir jetzt nach unten scrollen, werden die Elemente ausgeblendet und mit einigen Fade-Effekten angezeigt. Außerdem werde ich dem Napa einen weiteren Effekt hinzufügen Napa einen weiteren Effekt hinzufügen Ich möchte es auf die rechte Seite verschieben, sobald es versteckt ist. Lassen Sie uns also Ihre Transformation einfügen und X mit dem Wert zehn RAM übersetzen. Und füge dem Übergang auch eine Transformationseigenschaft mit derselben Dauer 0,5 s hinzu. Ich denke, wir haben jetzt einen viel besseren Effekt. Als Nächstes werden wir die Navigationselemente wieder anzeigen. Sobald wir zur Seite hochscrollen. Dazu müssen wir If-Anweisungen verwenden , in denen wir überprüfen müssen, ob die Seite gecrawlt wurde oder nicht Wir brauchen also Window Dot Scroll. Warum? Tatsächlich gibt diese Eigenschaft die Anzahl in Pixeln zurück, um die die Seite gerade vertikal scrollt. Wenn also die Eigenschaft scroll why gleich Null ist, bedeutet das, dass die Seite bis zum oberen Rand aufgerufen wird . Und wir müssen die Menüelemente anzeigen und das Menüsymbol ausblenden. Wir brauchen also einen Menüsymbol, einen Punkt, eine Klassenliste, nicht das Klassensymbol entfernen. Und im Fall von jetzt, was wir jetzt für die Punktklassenliste, Punktentfernung, Höhe, Zahl benötigen . In Ordnung? Wenn ich nach oben scrolle, werden authentische Menüelemente angezeigt, das Menüsymbol wird ausgeblendet. Okay, wir sind also fast fertig mit der Navigation. Das einzige , was wir tun müssen, ist die Navigationselemente anzuzeigen. Sobald wir also auf das Menüsymbol klicken, müssen wir die Menüelemente zu richtigen Abschnitten verbinden . Lassen Sie uns weitermachen und mit einem Klick auf ein Event einen Event-Listener an das Menüsymbol anhängen mit einem Klick auf ein Event einen Event-Listener an das Menüsymbol Und dann müssen wir hier diese beiden Linien passieren. Wenn ich also auf das Menüsymbol klicke, passiert nichts, da sich das Menüsymbol gerade hinter dem Mundkreis befindet. Wir müssen also eine Z-Index-Eigenschaft verwenden. Machen wir 100 draus. Und außerdem werde ich den Cursor ändern . Lass es uns klarstellen. In Ordnung, wie Sie sehen können, funktioniert alles einwandfrei. Als letztes müssen wir die Menüelemente mit den Abschnitten verbinden , damit wir ordnungsgemäß zu dem Abschnitt navigieren können. Sobald wir auf die Elemente klicken. Dazu müssen wir die Attribute h reference und id verwenden . Wir müssen die h-Referenzattribute der Links so angeben die h-Referenzattribute der Links so , dass sie mit den Werten der Attribute der Abschnitte übereinstimmen . Lassen Sie uns weitermachen und die h-Referenzattribute spezifizieren. Ich werde Ihre Abschnitte mit den Zahlen weitergeben. Danach müssen wir jedem Abschnittselement das ID-Attribut mit den ähnlichen Werten zuweisen jedem Abschnittselement das ID-Attribut . Wir benötigen Abschnittsnummern von eins bis fünf. Wenn ich also auf die Menüpunkte klicke, passiert nichts. Möglicherweise stimmt etwas mit CSS nicht. Lass uns weitermachen und nachschauen. Wie Sie sehen können, habe ich dem Link in der Navigationsleiste die Z-Index-Eigenschaft zugewiesen und nicht der Nummer selbst. Lassen Sie uns also weitermachen und dieses Problem beheben. Wie Sie jetzt sehen können, funktioniert alles perfekt. Und schließlich sind wir mit der Navigation fertig. Als Nächstes erstellen wir den Fortschrittsbalken. Fahren wir also mit der nächsten Vorlesung fort. 19. Designfortschrittbalkens - Teil 1: Okay, im letzten Video haben wir die Navigation erstellt und angepasst, und jetzt ist es an der Zeit, sich um den Fortschrittsbalken zu kümmern Schauen wir uns das fertige Projekt an. Hier haben wir also den Fortschrittsbalken, der die Form eines Kreises hat und dessen Position festgelegt ist. In der Mitte des Kreises. Wir haben den Pfeil. Sobald wir anfangen, auf der Seite nach unten zu scrollen , erscheint die rote Linie, die den Kreis füllt. Wenn wir bis zur Seite gehen. Sobald wir nach unten scrollen , ändert der Pfeil seine Richtung. Wenn wir anfangen, nach oben zu scrollen, verschwindet die rote Linie. Der Fortschrittsbalken funktioniert auch mit Projekten. Ich meine, wenn wir eines der Projekte erweitern, verschwindet die rote Linie und der Fortschrittsbalken beginnt, mit dem Projekt zu arbeiten. Ich meine, es wird gefüllt, sobald wir im Bild nach unten scrollen. Wenn wir das Projekt schließen, der Fortschrittsbalken entsprechend der Seite weiter funktioniert der Fortschrittsbalken entsprechend der Seite weiter . Ordnung, also lass uns weitermachen In Ordnung, also lass uns weitermachen und mit der Arbeit am Fortschrittsbalken beginnen Ich werde das HTML-Markup erstellen. Lassen Sie uns direkt nach dem Seitenhintergrund neue Kommentare einfügen . Wir brauchen einen Fortschrittsbalken und einen Fortschrittsbalken. Öffne dann ein Link-Tag mit einem Fortschrittsbalken für den Kurs. Innerhalb des Link-Elements benötigen wir vier verschiedene Elemente. Lassen Sie uns sie jetzt einfach erstellen und dann erklären und zeigen, warum wir diese Elemente benötigen. Öffnen wir ein div-Tag mit dem Klassenhalbkreis duplizieren Sie es dann dreimal. Eigentlich müssen wir die zweiten Div-Elemente nicht anfassen. Der dritte wird ein Hub Circle Top sein. Was das letzte Div-Element betrifft, so wird es ein Kreis mit Fortschrittsbalken sein. Wie der Inhalt. Fügen wir hier eine der HTML5-Entitäten Wir brauchen ein Amperand als die gestrichelte Linie 8595, Semikolon. In Ordnung, das war's mit dem HTML-Markup. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Lassen Sie uns neue Kommentare in die CSS-Datei einfügen, Fortschrittsbalken. Und des Fortschrittsbalkens. Wählen Sie dann die Link-Elemente aus. Zuerst setze ich es auf Position fest. Definieren Sie dann Breite und Höhe. Ich werde aus beiden eine Straßenbahn machen. Und ändere auch die Hintergrundfarbe, mache sie weiß. Wie Sie sehen können, befindet sich der Fortschrittsbalken in der oberen linken Ecke der Seite. Wir müssen seine Position ändern. Ich werde die unteren und rechten Eigenschaften definieren. Lassen Sie uns beide auf acht Runden setzen. Ordnung, der Fortschrittsbalken ist also positioniert und befindet sich in der unteren rechten Ecke Als Nächstes mache ich es rund. Dafür benötigen wir einen Grenzradius mit dem Wert 50 Prozent. In Ordnung, das war's mit der Verpackung. Lassen Sie uns weitermachen und uns um den Kreis der Fortschrittsbalken kümmern. Lassen Sie uns diese Elemente auswählen und ihre Breite und Höhe definieren. Ich werde beiden 7,8 RAM geben. Dann ändere die Hintergrundfarbe. Ich mache es schwarz. Als Nächstes müssen wir es mit einem Randradius von 50 Prozent abgerundet machen mit einem Randradius von 50 Prozent Ändern Sie auch die Farbe, machen Sie sie weiß und erhöhen Sie dann die Schriftgröße des Pfeils. Machen wir es zur Miete. Dieses Element hat also einen Titel, aber wir müssen uns um seine Position kümmern. Es sollte in der Mitte der Verpackung platziert werden. Und außerdem müssen wir den Pfeil innerhalb des Kreises zentrieren. In beiden Fällen werde ich ein Klassenzentrum benutzen. Nun wird geprüft, das Problem ist behoben. In Ordnung, der Fortschrittsbalken ist also vorbereitet. Es hat den Standard-Luke, und jetzt müssen wir das zum Laufen bringen. Wie Sie sich erinnern, haben wir verschiedene Entwicklungen entwickelt . Die ersten Entwicklungen, die einen Klassenhalbkreis haben, werden es schaffen, den Fortschrittsbalken mit roter Farbe zu erkennen. Als Erstes werde ich den schwarzen Kreis für eine Weile verstecken, um die Dinge besser zu erklären und zu demonstrieren. Also werde ich zuweisen , keine anzuzeigen. Okay, also der schwarze Kreis ist versteckt, und jetzt müssen wir uns um die drei Div-Elemente kümmern , die uns helfen werden, einen Fortschrittsbalken zum Laufen zu bringen Wählen wir alle drei Elemente gleichzeitig aus. Ich meine, wir brauchen einen halben Kreis mit einem halben Kreis oben. Definieren wir die Position, machen wir sie absolut. Außerdem müssen wir bei 50 Prozent sein. Für die Höhe. Ich mache es zu 100% und außerdem definiere ich die Eigenschaften von oben und links. Machen wir beide zu Null. Im Moment sind die Elemente also nicht sichtbar. Und um das zu beheben, werde ich jedem von ihnen eine andere temporäre Hintergrundfarbe zuweisen . Wählen wir einen Halbkreis mit dem n-ten Kinderwähler aus. Die Hintergrundfarbe für den ersten Halbkreis wird also grün sein. Dann werde ich diesen Code duplizieren. Lassen Sie uns die Hintergrundfarbe ändern und ihn blau machen. Und dann wähle einen halben Kreis oben. Machen Sie die Hintergrundfarbe orange. Ordnung, also werden alle drei Div-Elemente übereinander gelegt Deshalb sehen wir hier die Orange. Nur. Wenn ich diese Zeile kommentiere, werden wir hier die blauen Elemente sehen. Zuerst werde ich dafür sorgen, dass der Fortschrittsbalken beim Zeigen mit der Maus funktioniert , damit er leichter zu verstehen Und dann ändern wir den Mauszeiger und verwenden Scroll-Events mit JavaScript Wir müssen den ersten Halbkreis um 180 Grad drehen. Was den zweiten Halbkreis betrifft, müssen wir ihn um 360 Grad drehen , weil wir den gesamten Kreis ausfüllen müssen . Was die halbkreisförmige Oberseite betrifft, in diesen orangefarbenen Elementen müssen wir sie in diesen orangefarbenen Elementen verstecken. Wählen wir also den Fortschrittsbalken aus, indem wir den Mauszeiger bewegen, gefolgt vom ersten Halbkreis Wie gesagt, wir müssen es mit der Rotate-Funktion mit dem Wert 180 Grad transformieren . Dann duplizieren Sie diesen Code und ändern Sie die n-te Kindernummer. Wir müssen nach dem Wert der Rotationsfunktion fragen. Wir brauchen 360 Grad, oder? Außerdem müssen wir den Übergang nutzen, um den Rotationsmotor herzustellen Wir brauchen also Transformation 1 s. Und außerdem werde ich lineare Transitions-Timing-Funktion verwenden. Kopieren wir diese Codezeile und fügen sie ein. Für das zweite Element. Wir müssen die Dauer erhöhen. Machen wir 2 s. Wenn wir nun also den Mauszeiger über die Elemente bewegen, passiert nichts, weil die es uns nicht erlaubt, den Mauszeiger zu Das spricht dafür, dass die Z-Index-Eigenschaft verwendet wird. Setzen wir es auf 200. Wenn ich jetzt den Mauszeiger bewege, drehen sich die Elemente. Moment sehen wir hier nur das blaue Element, weil das grüne Element darunter ist. Wenn ich hier den blauen Hintergrund poste, wirst du die grünen Elemente sehen. Die Elemente drehen sich also, aber auf die falsche Weise. Ich meine, der Ursprung der Transformation ist standardmäßig auf Mitte gesetzt. Aber in unserem Fall müssen wir es in die richtige Mitte bringen. Lassen Sie uns also den Transformationsursprung mit Werten verwenden, oder? Zentrum. In diesem Fall liegt der Ursprung der Transformation Zentrum des Elements, jedoch auf der rechten Seite. Okay, sobald wir den Mauszeiger über den Fortschrittsbalken bewegen, müssen wir diese orangefarbenen Elemente ausblenden Wählen wir also den Fortschrittsbalken aus, indem wir den Mauszeiger bewegen, gefolgt vom Halbkreis oben, und setzen die Opazität auf Null Nun also die Elementhöhen sobald wir den Mauszeiger über den Fortschrittsbalken Aber eigentlich versteckt es sich zu früh. Wir müssen es verstecken, sobald das grüne Element mit der Drehung fertig ist. Also müssen wir es nach 1 s verstecken. Verwenden wir Transition. Mit Opazität. Die Dauer wird Null sein, und dann brauchen wir eine Verzögerung von 1 s. Ordnung, jetzt funktioniert alles einwandfrei Wir müssen die Farben ändern und wir müssen auch die Elemente drum herum gestalten. Die ersten beiden Entwicklungen sollten eine rote Farbe haben. Ich meine die Farbe B6 und die Nullen. Was das dritte Element betrifft, wird es weiß sein, weil der Fortschrittsbalken selbst einen weißen Hintergrund hat. Jetzt müssen wir diese äußeren Teile der Elemente verstecken. Verwenden wir dafür Overflow Hidden. In Ordnung, jetzt haben wir viel bessere Ergebnisse. Schließlich müssen wir den schwarzen Kreis sichtbar machen. Lassen Sie uns das Display entfernen. Moment ist der Teil des Kreises sichtbar , weil er hinter den div-Elementen gelandet ist. Um das zu beheben, verwenden wir es erneut, da ist die Index-Eigenschaft mit dem Wert 200. Okay? Wenn ich nun den Mauszeiger über den Fortschrittsbalken bewege, wird er schön mit der roten Farbe gefüllt Ordnung, wir haben Ihnen gezeigt, wie Sie solchen Fortschrittsbalken mithilfe von CSS erstellen Und jetzt zeigen wir Ihnen, wie wir es beim Scrollen mithilfe von JavaScript zum Laufen bringen können es beim Scrollen mithilfe von JavaScript zum Laufen bringen Lassen Sie uns zunächst diese Styles auskommentieren. Ich meine diese Handtücher, die schweben. Gehen Sie dann zur JavaScript-Datei. Zunächst wähle ich die div-Elemente aus. Ich meine, für Div-Elemente , die in der Fortschrittsleiste platziert sind. Lassen Sie uns neue Kommentare für den Fortschrittsbalken erstellen. Dann erstelle ich eine neue Variable, nennen wir sie Halbkreise. Und wähle die ersten beiden div-Elemente , die die Klassennamen Half Circle haben. Ich werde die Methode Query Selector All verwenden. Als Nächstes duplizieren wir diese Codezeile. Ändere den Namen der Variablen, sie wird einen halben Kreis oben haben. Außerdem benötigen wir hier eine Abfrage, Auswahlmethode und dann die Änderung des Klassennamens Und schließlich erstellen Sie die Variable für die letzte Entwicklung, ich nenne das einen Kreis mit Fortschrittsbalken. Wählen Sie es dann mit der Methode querySelector aus. Und geben Sie hier auch den Klassennamen, den Fortschrittsbalken und den Kreis an. Okay, als Nächstes erstelle ich eine neue Funktion, die beim Scrollen aufgerufen wird Nennen wir es Fortschrittsbalken f n. Wie Sie wissen, entspricht eine vollständige Umdrehung 360 Grad. Wir müssen diesen Anteil der Menschenmenge an der Höhe in Grad umrechnen . Bevor wir das tun, müssen wir ein paar verschiedene Variablen definieren. Die erste ist die Höhe des Seitenansichtsfensters. Es wird den Fensterpunkten in Ihrer Höhe entsprechen. Die nächste wird die gesamte Höhe der Seite haben. Lassen Sie uns also eine neue Variable erstellen, sie Seitenhöhe nennen. Um die gesamte Höhe der Seite zu erhalten, benötigen wir Dokumente, Punkte und Dokumentelemente. Und dann müssen wir die Eigenschaft Scrollhöhe verwenden . Und die letzte Variable wird dieser gecrawlte Teil der Seite sein dieser gecrawlte Teil der Seite Er sollte dem Y-Offset der Fensterpunktseite entsprechen. Gut, jetzt ist also alles bereit, um die Höhe dieses so genannten Abschnitts in Grad umzurechnen dieses so genannten Abschnitts in Grad Lassen Sie uns eine neue Variable erstellen. Ich nenne es „ Scrolled Portion Degree“. Jetzt müssen wir die Formel verwenden. Wir müssen uns trennen. Es heißt Portion, der Unterschied zwischen Seitenhöhen und Seitenansichtsporthöhe. Und wir müssen das Ergebnis mit 360 multiplizieren. Wir brauchen also eine Portion. Dann die Division. Als Nächstes benötigen wir die Seitenhöhe minus die Höhe des Seitenansichtsfensters. Wir müssen es mit 360 multiplizieren. Okay, schauen wir in der Konsole nach, oder diese Variable gibt uns, lassen Sie uns hier pausieren, den gescrollten Teil Grad Eigentlich müssen wir die Funktion on scroll aufrufen. Wir haben das Scroll-Event bereits mit der Navigation verwendet, also rufen wir die Funktion hier auf. Lassen Sie uns die Seite überprüfen und zum Konsolen-Tab wechseln. Sobald wir also auf der Seite nach unten scrollen und zum Ende gehen, erhalten wir die richtigen Werte von 0-360 Ordnung, wenn Sie jetzt diese Variable verwenden , werden Halbkreise gedreht Also müssen wir sie durchschauen und jeden Halbkreis drehen. Und dann die erste und die zweite Entwicklung in der Fortschrittsleiste. Wir brauchen hier also einen halben Kreis, Punkte für jeden Durchlauf, die Callback-Funktion mit einem Parameter EL , der für Elemente steht Jetzt müssen wir die Elemente drehen. Also lass uns hier eine Pause machen. Punkttransformation im Elementpunktstil. Es sollte gleich sein, sich zu drehen und Ihnen die Variablen übergeben müssen , die als Portionsgrad bezeichnet werden, gefolgt von Graden. Wenn wir jetzt also nach unten scrollen, fühlt sich der Scrollbalken an. Sobald wir die Hälfte erreicht haben, müssen wir den ersten Halbkreis beenden. Außerdem müssen wir das dritte Div-Element und dann den Halbkreis oben verstecken . Wir müssen also eine wenn-Aussage verwenden, in der wir definieren müssen Portionsgrad größer oder gleich 180 bezeichnet wird. Wenn diese Bedingung also zutrifft, müssen wir dem ersten Halbkreis den festen Wert geben , der 180 Grad entspricht. Also brauchen wir deine Halbkreise. Dann die Indexzahl Null, dann Style-Punkttransformation. Und wir müssen den Wert der Drehfunktion auf 180 Grad festlegen. Und wir müssen auch den Halbkreis oben verstecken. Lassen Sie uns also Ihre Punktopazität im Stil eines halben Kreises mit einem oberen Punkt eingeben , der Null entspricht Sobald wir also nach unten scrollen, wird der gesamte Fortschrittsbalken gefüllt. Aber wir haben hier ein kleines Problem. Sobald wir nach oben scrollen und gescrollt haben, wird der Grad des Abschnitts unter 180 Grad liegen. Wir müssen den halben Kreis oben auf der Rückseite zeigen. Also müssen wir die Else-Anweisung erstellen. Dann nehmen wir diese Codezeile, fügen sie hier ein und ändern den Wert der Opazität, machen sie zu einer Wie Sie sehen können, funktioniert jetzt alles einwandfrei. Wir müssen noch ein paar Dinge mit dem Fortschrittsbalken machen. Und dafür fahren wir mit der nächsten Vorlesung fort. 20. Designfortschrittbalkens - Teil 2: Okay, im letzten Video haben wir angefangen, am Fortschrittsbalken zu arbeiten Sobald wir auf der Seite nach unten scrollen fühlt sich die rote Linie auf dem Kreis an. Und jetzt füge ich dem Fortschrittsbalken ein Klickereignis hinzu . Schauen wir uns das fertige Projekt an. Sobald wir also auf den Fortschrittsbalken klicken, scrollen wir die Seite Abschnitt für Abschnitt nach unten. Und sobald wir ganz unten auf der Seite sind, dreht sich der Pfeil. Beim nächsten Klick navigieren wir zum Anfang der Seite. Außerdem dreht sich der Pfeil wieder, wenn ich nach unten gehe und dann anfange, nach oben zu scrollen . Und wenn wir auf den Fortschrittsbalken klicken, navigieren wir zum Ende der Seite. Richtig? Das werden wir also in dieser Vorlesung tun. Wir haben bereits eine Funktion für den Fortschrittsbalken erstellt. Lass uns weitermachen und anfangen , den Code zu schreiben. Als erstes müssen wir einen Klick-Event-Handler an den Fortschrittsbalken anhängen einen Klick-Event-Handler an den Fortschrittsbalken In diesem Fall verwenden wir den OnClick-Event-Handler da er das Klick-Ereignis nur einmal an die Lassen Sie uns neue Kommentare verfassen. Klicken Sie auf den Fortschrittsbalken und klicken Sie auf den Fortschrittsbalken. Wählen Sie dann einen Fortschrittsbalken aus. Ich werde eine neue Variable erstellen. Und wählen Sie dann die Elemente mit der Abfrageauswahlmethode aus. Dann müssen wir den OnClick-Event-Handler an den Fortschrittsbalken anhängen OnClick-Event-Handler an den Fortschrittsbalken Als erstes müssen wir also die Standardaktion verhindern, sobald wir auf den Fortschrittsbalken klicken. Also werde ich hier ein Event-Objekt übergeben. Und dann müssen wir die Prevent-Standardmethode verwenden. Danach müssen wir alle Elemente dieses Abschnitts auswählen. Lassen Sie uns also weitermachen und eine neue Variable erstellen , sie Abschnitte nennen. Und wählen Sie dann alle Abschnittselemente mit der Methode Query Selector All Ich werde hier den Abschnitt mit den Tagnamen angeben. Als Nächstes müssen wir die Positionen dieser Abschnittselemente definieren und sie im Array speichern. Also werde ich eine neue Variable erstellen. Nennen wir es Sektionspositionen. An den Positionen dieser Abschnitte meine ich, wo befinden sich die Abschnittsbeginne der gesamten Seite und nicht im Viewport Um diese Position zu ermitteln, benötigen wir die Summe aus dem gescrollten Bereich und dem Abstand zwischen dem oberen Rand des Viewports und der oberen Position dieses Abschnitts selbst Wie gesagt, wir müssen diese Werte im Array speichern. Und dafür verwende ich eine der Array-Hilfsmethoden namens map Es ermöglicht uns, die Funktion für jedes Array-Element auszuführen und die Werte im Array zu speichern. Um die Map-Methode verwenden zu können, müssen wir die Knotenliste in ein Array umwandeln. Sonst funktioniert es nicht. Um also die Knotenliste in ein Array umzuwandeln, müssen wir die Methode array from verwenden und hier Abschnitte übergeben. Dann brauchen wir eine Methode namens map, die einen Parameter benötigt. Es ist die Callback-Funktion, die selbst ein Argument benötigt, das aktuelle Element im Array Um die Position dieses Abschnitts zu ermitteln, müssen wir die folgende Berechnung durchführen. Zuerst müssen wir das Schlüsselwort return verwenden. Jetzt benötigen wir die Summe aus dem quadratischen Teil und dem Abstand zwischen dem oberen Rand des Viewports und der oberen Position dieser Aktion Wenn es also Portion plus Abschnitt heißt Punkt, wird der Bounding Client Rect angezeigt Hier. Immobilie namens Top. Tatsächlich ermöglicht uns die ES6-Syntax , diesen Code prägnanter zu schreiben Wir können lockige Zahnspangen loswerden. Und wir können auch das Schlüsselwort return entfernen. Okay, lassen Sie uns diese Variable zur Konsole ausführen und sehen, was sie uns gibt. Lassen Sie uns die Seite überprüfen und zum Konsolen-Tab wechseln. Wenn ich auf den Fortschrittsbalken klicke, passiert nichts. Aber wenn ich nach unten scrolle und dann auf die Elemente klicke, erhalten wir ein Array mit fünf Elementen. Jeder von ihnen steht für die Position dieses Abschnitts auf der Seite. Das sind die Pixel. Es hat also nicht funktioniert, bis wir auf der Seite nach da die Funktion nur aufgerufen wird , wenn das Scroll-Ereignis eintritt. Deshalb müssen wir es außerhalb der Scroll-Events noch einmal aufrufen . Wenn ich jetzt klicke, bekommen wir das Ergebnis in der Konsole Okay, also müssen wir diese Positionen verwenden, um beim Abschnitt nach unten zu scrollen. Zuerst werde ich diese Werte manuell verwenden , um zu sehen, wie es funktioniert. Und dann werden wir diesen Prozess dynamisieren. Um auf der Seite nach unten zu scrollen, verwende ich auch eine der Methoden, die Scrollen genannt werden. Und wir müssen diese Methode an das Fensterobjekt anhängen. Diese Methode benötigt zwei Argumente. Das werden die Koordinaten sein. Das erste ist ebenfalls das Pixel entlang der horizontalen Achse der Elemente. Das zweite ist das Pixel entlang der vertikalen Achse der Elemente. In unserem Fall sollte das erste Argument Null sein, weil wir vertikal und horizontal scrollen werden. Als zweites Argument übergebe ich einen der Werte aus dem Array, sagen wir den dritten. Wenn ich also auf den Fortschrittsbalken klicke, gelangen wir zum dritten Abschnitt. Okay, also wie gesagt, in diesem Fall geben wir die Position manuell und wir müssen sie dynamisch definieren. Dafür verwende ich eine Array-Hilfsmethode namens find Diese Methode gibt den Wert des ersten Elements im Array zurück , das die Bedingung erfüllt Lassen Sie uns eine neue Variable erstellen. Ich nenne es Position. Und dann müssen wir den Abschnittspositionen eine gute Methode zuordnen . Es dauert. Ein Parameter ist die Callback-Funktion. Außerdem benötigen wir hier einen weiteren Parameter, Abschnittsposition und dann wieder die Schlüsselwortrückgabe. Jetzt müssen wir also die Bedingung definieren, die wir kennen müssen, und das wird Abschnitt. Um zu scrollen und zu diesem Abschnitt zu navigieren. Um diese Informationen zu erhalten, müssen wir die Position dieses Abschnitts mit diesem sogenannten Abschnitt vergleichen . Wir benötigen also, dass die Abschnittsposition größer ist als der gekritzelte Sobald diese Bedingung erfüllt ist, wird die Ausführung der Anweisung eingestellt und wir erhalten die Position des nächsten Abschnitts. Also statt dieses Werts hier werde ich die Position weitergeben. Und außerdem wollen wir in der Konsole sehen, was uns diese Variable gibt. Wenn ich also auf den Fortschrittsbalken klicke, scrollen wir die Seite Abschnitt für Abschnitt nach unten. Sie sehen hier auch deutlich, wie sich die Position verändert. Sobald wir das Ende der Seite erreicht haben und erneut klicken, navigieren wir zum Anfang der Seite, aber die Position wird undefiniert Es ist passiert, weil keine anderen Fälle gefunden wurden , in denen die Bedingung zutraf. Eigentlich brauchen wir das. Wir müssen onClick nach oben scrollen. Aber es wäre komisch, wenn wir es so belassen würden. Und es wird für andere Entwickler schwer zu verstehen sein. Ich denke, es wäre besser, wenn wir eine Bedingung schreiben würden. Lassen Sie uns weitermachen und eine Variable erstellen , in der ich definiere, ob wir das Ende der Seite erreichen oder nicht. Also werde ich die Variablen Bu nennen. Und es sollte gleich sein, dass der Scrollbereich plus die Höhe des Seitenansichtsfensters der Seitenhöhe entspricht Wenn diese Variable also wahr ist, bedeutet das, dass wir das Ende der Seite erreicht haben. Und deshalb müssen wir beim Klicken zum Anfang der Seite navigieren . Ich werde eine Bedingungsanweisung mit dem ternären Operator erstellen eine Bedingungsanweisung mit dem ternären Operator Wir brauchen Scroll Bull. Wenn das stimmt, müssen wir zum Anfang der Seite navigieren . Daher benötigen wir auch Windows Dot Scroll mit den Argumenten Null an beiden Stellen. Und wenn diese Bedingung falsch ist, dann brauchen wir diesen Ausdruck hier. In Ordnung, also funktioniert alles gut. Als nächstes müssen wir die Richtung des Pfeils ändern. Sobald wir das Ende der Seite erreicht haben, müssen wir sie drehen. Dafür verwende ich die If-else-Aussage. Tatsächlich stört das neue Kommentare, Pfeilrotation und die Rotation außerhalb des Pfeils. Wir müssen also denselben booleschen Wert überprüfen. Ich meine, scrolle nach unten. Wenn das stimmt, müssen wir den Pfeil drehen. Schreiben wir hier Fortschrittsbalken, Kreis, Punkttransformation im Punktstil. Es sollte gleich sein, um 180 Grad zu drehen. Und wenn es falsch ist, dann brauchen wir die else-Aussage. Nehmen wir diese Codezeile und ändern den Wert der Rotate-Funktion, die wir hier benötigen, auf Null. Lassen Sie uns abschließend den Übergang verwenden, bei dem die Werte 0,5 s transformiert werden. Wenn ich also den unteren Rand der Seite erreicht habe, dreht sich der Pfeil. Wenn ich anfange, nach oben zu scrollen, dreht es sich wieder. In Ordnung, bisher funktioniert also alles perfekt. Und jetzt müssen wir den Fortschrittsbalken zum Laufen bringen , sobald wir die Projekte geöffnet haben. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 21. Designfortschrittbalkens - Teil 3: Okay, in der letzten Lektion haben wir der Fortschrittsleiste ein Klickereignis hinzugefügt Wir können Abschnitt für Abschnitt nach unten scrollen. Sobald wir auf den Fortschrittsbalken geklickt haben, funktioniert er auf der Seite einwandfrei, aber wir müssen ihn zum Laufen bringen, sobald wir auf das Projekt klicken und das Bild erweitern. Bevor wir uns darum kümmern, haben wir hier ein kleines Problem. Sobald wir das Projekt geöffnet haben, sollten wir das Menüsymbol ausblenden. Ich werde das mit der Z-Index-Eigenschaft beheben. Weisen wir dem Projekt-Image-Wrapper Z-Index-Eigenschaft mit einem Wert Also gerade die Navigation, falls ihr das nicht getan habt, aber wie ihr seht, ist der Schließbutton hinter dem Projekt gelandet. Um das zu beheben, werde ich den Wert der Z-Index-Eigenschaft für die Schaltfläche Ausblenden des Projekts erhöhen Z-Index-Eigenschaft für die Schaltfläche Ausblenden des Projekts Machen wir 200 draus. Ordnung, jetzt war alles in Ordnung und wir In Ordnung, jetzt war alles in Ordnung und wir können weiter am Fortschrittsbalken arbeiten Wie wir wissen, erstellen wir, sobald wir auf das Projekt klicken, ein großes Bild und es ist die Hülle Wir müssen also überprüfen, ob der Image-Wrapper erstellt wurde oder nicht Und dann müssen wir den Fortschrittsbalken bei der Arbeit entsprechend gestalten . Wir müssen hier einen neuen Parameter einfügen. Nennen wir es einen großen IMG-Rapper. Standardmäßig mache ich es falsch. In diesem Fall sagen wir also, dass wir an der Seite arbeiten , weil das Element nicht existiert. Also müssen wir eine If-else-Anweisung erstellen, in der wir definieren müssen, ob der Image-Wrapper existiert oder nicht Lassen Sie uns Ihnen also einen großen IMG-Wrapper geben. Wenn diese Bedingung also zutrifft, bedeutet das, dass das Projekt geöffnet ist und wir hier den Code einfügen müssen , der in diesem Fall funktioniert. Aber ich ziehe es vor, hier den Code für die Seite einzufügen. Also können wir hier einfach einen NOT-Operator hinzufügen. Jetzt müssen wir dir diese beiden Zeilen einfügen. Eigentlich werde ich diese Variablen außerhalb der if-Anweisung deklarieren . Verwenden wir das Schlüsselwort let. Ich werde beide Variablen gleich Null machen. Wie Sie sehen können, funktioniert der Fortschrittsbalken auf der Seite einwandfrei. Jetzt müssen wir eine else-Anweisung erstellen , in der wir den Code für den Image-Wrapper definieren Eigentlich können wir uns diese beiden Zeilen schnappen. Die Seitenhöhe wird der Höhe eines großen Bildes entsprechen. Wir brauchen also einen Rapper-Punkt mit einem großen Bild, das untergeordnet ist, weil das Bild das untergeordnete Element des Wrappers ist Für dieses Publikum wird es eine große Portion geben, AMG, Rapper Dot Scroll Top Diese Eigenschaft gibt uns die Anzahl der Pixel , mit denen der Inhalt eines Elements vertikal gekritzelt wird In Ordnung, jetzt müssen wir eine Funktion aufrufen. Sobald wir auf das Projekt geklickt haben, benötigen wir den Fortschrittsbalken f n. Und wir müssen hier das Argument großer IMG-Wrapper übergeben Wie Sie sehen können, ist der Fortschrittsbalken jetzt aktualisiert. Aber sobald wir im Projekt nach unten scrollen, funktioniert es nicht, weil wir die Funktion auch bei diesem Aufruf aufrufen müssen. Wir brauchen also einen großen IMG-Wrapper, Dots on Scroll Event Handler Und dann müssen wir die Funktion aufrufen. Wie Sie sehen können, funktioniert es jetzt einwandfrei. Aber wir haben hier ein kleines Problem. Sobald das Bild nach unten aufgerufen wurde, dreht sich der Pfeil nicht mehr . Lassen Sie uns in der Konsole überprüfen, ob die Bedingung in der if else-Anweisung wahr oder falsch ist Ich werde die Konsole durchgehen und mit Bu scrollen. Wenn wir also nach unten scrollen und das Ende der Bilddaten erreichen, billiger als der boolesche Wert wieder falsch, was bedeutet, ist billiger als der boolesche Wert wieder falsch, was bedeutet, dass dieser Ausdruck nicht der Seitenhöhe entspricht Lassen Sie uns sie auch in der Konsole überprüfen. Ich werde den Scrollbereich plus die Höhe des Seitenansichtsfensters und auch die Seitenhöhe ausführen Höhe des Seitenansichtsfensters und auch die Seitenhöhe Wenn wir also nach unten scrollen, erhalten wir einen Unterschied von zwei Pixeln zwischen diesen Werten. Das ist eigentlich irgendwie komisch. Aber der Grund ist, dass das Bild ein Inline-Element ist. Und in diesem Fall müssen wir es blockieren lassen. In Ordnung, jetzt funktioniert alles gut. Als Nächstes müssen wir den Fortschrittsbalken zum Laufen bringen , sobald wir darauf klicken, da er im Moment immer noch entsprechend der Seite funktioniert. Wir benötigen diese ähnlichen If-Else-Anweisungen mit dem onClick-Eventhandler Lassen Sie uns hier die Bedingung weitergeben, dass es sich nicht um einen Big-Image-Rapper handelt. Außerdem nehme ich den gesamten Code und füge ihn in die if-Anweisung ein. Danach brauchen wir L-Statements, in denen wir erneut nach Scrollen suchen müssen, Boolean Also, wenn es stimmt, dann brauchen wir auch eine große leere Rapper-Punkt-Schriftrolle. Bei Nullen bedeutet dies, dass das Bild nach oben gescrollt werden sollte Und wenn diese Bedingung falsch ist, müssen wir nach unten scrollen. Wir brauchen also einen großen IMG-Rapper-Punkt, zu dem Sie scrollen. Das erste Argument wird Null sein. Was das zweite Argument angeht, müssen wir Angie Wrapper, Punkte, Scrollhöhe auswählen Wenn wir jetzt auf den Fortschrittsbalken klicken, scrollt das Bild nach unten, aber ohne glatten Effekt. Um das zu beheben, müssen wir dem Image-Wrapper eine Eigenschaft namens Scrollverhalten zuweisen , was Smooth abwerten würde Wie Sie jetzt sehen können, funktioniert alles perfekt und wir sind fast fertig mit dem Fortschrittsbalken. Das einzige , was wir tun müssen, ist die Scrollleiste zu aktualisieren. Sobald wir das Projekt geschlossen haben. Eigentlich müssen wir die Funktion aufrufen , wenn wir auf die Schaltfläche klicken. Lassen Sie uns hier den Fortschrittsbalken pausieren . In Ordnung, jetzt funktioniert alles einwandfrei Und mit dem Fortschrittsbalken sind wir fertig. Wir sehen uns in der nächsten Vorlesung. 22. Code-Refactoring: Okay, in den vorherigen Vorlesungen haben wir es geschafft, den Fortschrittsbalken auf der Seite zu bearbeiten Und wenn wir das Projekt öffnen, bevor wir weitermachen und mit der Arbeit an der nächsten Sache beginnen, werde ich unseren aktuellen Fortschritts-Barcode überarbeiten und ihn übersichtlicher gestalten. Vorher möchte ich ein kleines Problem beheben. Sobald wir auf eines der Projekte klicken und es erweitern. Und wenn wir dann die Seite überprüfen, funktioniert der Fortschrittsbalken nicht richtig. Es wird laut Seite weiterhin funktionieren. Das Problem tritt auf, sobald wir die Größe des Fensters ändern. Es passiert, weil das Scroll-Ereignis aus irgendeinem Grund ausgelöst wird. Um das zu beweisen, lassen Sie uns etwas auf der Konsole ausführen. Wie Sie sehen können, haben wir hier Scroll, was bedeutet, dass das Scroll-Ereignis stattfindet. Um dieses Problem zu beheben, müssen wir den Code aus der Funktion in diesem Call-Event abrufen . Dann deklarieren Sie draußen eine neue Funktion. Ich nenne es scroll f n und füge den Code in diese Funktion ein. Danach müssen wir diese Funktion mit dem Scroll-Event aufrufen . Im Moment hat sich hier also nichts geändert. Alles funktioniert auf die gleiche Weise. Aber jetzt können wir mit der Funktion Scroll-Events entfernen und müssen dies tun, sobald wir auf eines der Projekte geklickt haben. Also brauchen wir hier ein Dokument, Punkt, den Event-Listener entfernen Dann müssen wir das Scroll-Event angeben. Außerdem müssen wir hier die Funktion übergeben , die wir erstellt haben, mit f n. Wenn wir jetzt das Projekt öffnen, funktioniert der Fortschrittsbalken einwandfrei. Wir werden kein Problem haben, sobald wir die Größe des Fensters ändern. Wenn wir das Projekt jedoch schließen, funktioniert der Fortschrittsbalken nicht mehr. Um das zu beheben, müssen wir das Scroll-Ereignis an das Dokument anhängen , wenn wir das Projekt schließen. Also brauchen wir hier document.write im Event-Listener. Dann scrollt das Event. Und die Funktion heißt f n. Wenn wir das überprüfen, werden Sie sehen, dass alles einwandfrei funktioniert. Und jetzt können wir beginnen , unseren Code zu überarbeiten. Moment haben wir also eine große Funktion , in die wir alles rund um den Fortschrittsbalken eingeben. Das erste , was ich tun werde, ist, mir einen OnClick-Eventhandler zu schnappen ihn aus der Funktion zu entfernen Als Nächstes deklariere ich ein paar Variablen außerhalb der Funktion. Ich mag Variablen , die für die Funktion und den OnClick-Event-Handler üblich sind Funktion und den OnClick-Event-Handler Platzieren wir also den Scrollbereich außerhalb der Funktion. Außerdem müssen wir die Scrollbull-Variable deklarieren. Setzen wir es auf falsch. Als Nächstes müssen wir das Schlüsselwort const von hier entfernen. Und außerdem müssen wir eine weitere Variable deklarieren , den Image-Wrapper Und wir müssen es auf falsch setzen. In Ordnung? Wie Sie sehen können, haben wir hier einen großen IMG-Wrapper mit dem Standardwert false Ich werde es loswerden. Und stattdessen benötigen wir einen Image-Wrapper, der dem großen IMG-Wrapper entspricht Und jetzt müssen wir überall den großen Andrew-Wrapper in Image-Rapper umwandeln Okay, schließlich können wir den OnClick-Event-Handler in einen Click-Event-Listener ändern den OnClick-Event-Handler in einen Click-Event-Listener Also müssen wir den Event-Listener hinzufügen. Ich muss dieses Gleichheitszeichen nicht loswerden. Ordnung, also wenn wir jetzt nachschauen, dann wird alles perfekt funktionieren Aber jetzt haben wir viel saubereren Code als zuvor. Okay, fahren wir mit der nächsten Vorlesung fort. 23. Klebrige Elemente: Okay, sobald wir mit dem Fortschrittsbalken fertig sind, müssen wir jetzt weitermachen und mit der Arbeit am nächsten Feature unseres Projekts beginnen , das ich ein klebriges Element nenne Schauen wir uns das fertige Projekt an. Wenn ich den Mauszeiger über das Menüsymbol oder den Fortschrittsbalken bewege, bleiben diese Elemente am Cursor haften Sobald wir den Cursor jedoch weit von der Standardposition des Elements entfernt bewegen weit von der Standardposition des , werden die Elemente wieder an ihre eigenen Positionen gebracht. Ich finde es ist ein netter und cooler Effekt. Also lass uns weitermachen und loslegen. Dieser Effekt sollte bei Mausbewegungsereignissen auftreten. Zuerst wird der Code hier geschrieben, und dann erstellen wir eine Funktion und rufen die Funktion hier auf. Fügen wir neue Kommentare ein. Klebrige Elemente. Von klebrigen Elementen. Wir müssen einen Effekt erzielen. Sobald wir den Mauszeiger über das Menüsymbol und den Fortschrittsbalken bewegen, werde ich beiden Elementen zusätzliche Klassen zuweisen Klebrig. Als Nächstes müssen wir herausfinden, über welchem Element wir den Mauszeiger bewegen Dafür können wir eine der eingebauten Funktionen verwenden , die als Elemente aus Punkten bezeichnet werden. Ich werde eine neue Variable erstellen. Nennen wir es Elemente, die mit der Maus über E L schweben . Es sollte genauso sein, Punktelemente von Punkten aus zu dokumentieren Diese Funktion benötigt zwei Argumente, x und y. Sehen wir uns in der Konsole an, was uns diese Variable gibt. Lassen Sie uns Elemente mit dem Mauszeiger ausführen. Wenn ich also den Mauszeiger über eines der Elemente auf der Seite bewege, werden wir es in der Konsole abrufen Richtig? Jetzt müssen wir überprüfen, ob ein Harvard-Element Cluster Tiki enthält oder nicht Wir müssen also eine if-Anweisung verwenden , in der wir die folgende Bedingung benötigen. Elemente, Punkte, Klassenliste, Punkt enthält. Und wir müssen hier die Klasse Sticky angeben. Lassen Sie uns außerdem zur Konsole laufen. Klebrig. Wenn ich jetzt mit der Maus über das Menüsymbol fahre, bleiben wir in der Konsole hängen Aber wenn ich den Mauszeiger über den Fortschrittsbalken bewege, bleiben wir in der Konsole nicht Das passiert, weil der Kreis der Fortschrittsleiste den Fortschrittsbalken selbst bedeckt. Und wir können den Mauszeiger nicht über den Fortschrittsbalken bewegen. Um dieses Problem zu beheben, können wir Zeigerereignisse für den Fortschrittsbalkenkreis deaktivieren . Lassen Sie uns die Zeigerereignisse auf num setzen. Übrigens, lassen Sie uns diesen kommentierten Code von hier löschen. Wenn ich jetzt den Mauszeiger über den Fortschrittsbalken bewege, bleiben wir in der Konstante hängen Ordnung, bisher funktioniert alles einwandfrei In Ordnung, bisher funktioniert alles einwandfrei. Als Nächstes müssen wir die Positionen der Elemente im Array speichern Also werde ich eine neue Variable außerhalb der Mausbewegungsereignisse erstellen . Nennen wir es Position des schwebenden Elements und setzen es auf ein leeres Array Also nochmal, wir werden hier die Position der Elemente speichern . Ich befinde mich in den Koordinaten oben und links indem ich die Eigenschaften Offset Top und Offset Left verwende. Zunächst müssen wir überprüfen, ob das Array leer ist oder nicht. Wenn es leer ist, müssen wir die Positionen speichern. Ich werde es benutzen. Wenn Anweisungen, in denen ich überprüfen werde , ob das Array leer ist oder nicht. Wir müssen also die Positionspunktlänge des Harvard-Elements mit eins vergleichen . Wenn diese Bedingung zutrifft, bedeutet das, dass ein Array keine Elemente enthält und wir die Positionen im Array speichern müssen . Wir benötigen also die Position des Elements, Mauszeiger schwebt, einem Array mit den folgenden Elementen entspricht Wir brauchen das schwebende Element des Set-Tops und dann Harvard-Elemente des Sets In Ordnung, lassen Sie uns weitermachen und testen, ob es gut funktioniert. Und sobald Sie jedoch zur Konsole laufen , Elementposition. Wenn ich also mit der Maus über das Menüsymbol fahre, erhalten wir seine Positionen im Array Wenn wir nun den Mauszeiger über den Fortschrittsbalken bewegen, erhalten wir wieder die Positionen des Menüsymbols Weil die Bedingung in der if-Anweisung falsch ist . Sie aktualisiert die Positionen im Array nicht. Wenn ich die Seite neu lade, wird das Array leer. Und wenn ich den Mauszeiger über den Fortschrittsbalken bewege, werden wir hier die Positionen des Fortschrittsbalkens Ordnung, jetzt müssen wir die obere und linke Position der Elemente ändern , über denen der Mauszeiger schwebt. Also brauchen wir hier Harvard-Elemente, Punktstil, Punkt-CSS-Text. Dann öffne ich die Zecken auf der Rückseite. Die oberste Position wird y sein. Mit Pixeln. Was die linke Position angeht, so wird es x sein. Ordnung? Wenn ich jetzt den Mauszeiger über die Elemente bewege, bewegt es sich, aber nicht ganz richtig. Es ist nicht klebrig. Um das zu beheben, müssen wir die Elemente um -50% nach oben und nach links bewegen -50% nach oben und nach links Dafür werde ich Transform Translate zweimal mit -50 Prozent verwenden Transform Translate zweimal mit -50 Prozent Jetzt haben sich die Positionen des Menüsymbols geändert, sodass wir die obere und rechte Position anpassen müssen. Tatsächlich haben wir die Elemente um 50 Prozent verschoben. Das bedeutet also, dass wir die Positionen um 50% der Breite und Höhe verringern müssen. Die oberste Position wird 3,5 RAM sein. Was die richtige Position angeht, so wird sie Null sein. Wie Sie sehen können, ist das Element jetzt korrekt positioniert, und sobald wir den Mauszeiger darüber bewegen, wird es klebrig Moment bewegt es sich auf der gesamten Seite, aber das werden wir bald beheben. Lassen Sie uns dasselbe auch für den Fortschrittsbalken tun. Wir müssen transformieren, zweimal mit den Werten -50 Prozent übersetzen Und wir müssen auch die untere und rechte Position ändern . Wir benötigen vollen RAM für beide Eigenschaften. Wenn ich jetzt den Mauszeiger über den Fortschrittsbalken bewege, funktioniert er immer noch nicht richtig. Es scheint, dass von der linken Seite nicht die ganze Welt passiert. Der Grund dafür ist, dass wir Zeigerereignisse für die Halbkreise deaktivieren müssen. Verwenden wir also Zeigerereignisse. Keine. In Ordnung, jetzt sieht alles gut aus. Als Nächstes haben wir definiert, wie weit sich das Element bewegen soll. Es wird 100 Pixel auf allen vier Seiten sein. Wir müssen also eine IF-Aussage erstellen , in der wir die Positionen definieren müssen. Wie Sie wissen, speichern wir Standardpositionen im Array. Das erste Element im Array ist die Position der Elemente, über denen der Mauszeiger schwebt Ich meine Offset-Top. Also müssen wir 100 Pixel addieren und subtrahieren, um sie zu verteilen. Und man muss es mit der Spitzenposition des Harvard-Elements vergleichen . Lassen Sie uns also weitermachen und eine IF-Anweisung erstellen , in der wir die folgende Bedingung benötigen. Wenn Sie mit der Maus auf Elemente zeigen, ist der Punktversatz nach oben geringer als die Position des Elements als die Position des Elements beim ersten Element — 100 Pixel. Wenn diese Bedingung also zutrifft, müssen wir das Element wieder an seine Standardposition bringen. Wir brauchen also schwebende Elemente. Punktstil, Punkt-CSS-Text, der einer leeren Zeichenfolge entspricht. Und außerdem müssen wir das Array löschen. Schwebeposition. Es sollte einer leeren eckigen Klammer entsprechen. Wenn ich nun nach 100 Pixeln anfange, die Elemente nach oben zu bewegen, bewegt sie sich zurück zu ihrer Standardposition. Ordnung, in diesem Fall lassen wir den Effekt nur in eine Richtung wirken Wir brauchen alle vier Richtungen. Verwenden wir hier den logischen OR-Operator. Dann kopiere ich diese Bedingung. Jetzt müssen wir 100 Pixel hinzufügen. Außerdem müssen wir das Kleiner-als-Zeichen in ein Größer-als-Zeichen ändern . Jetzt funktioniert der Effekt, sobald wir den Cursor nach unten bewegen. Als nächstes müssen wir uns um die linke und rechte Seite kümmern. Verwenden wir erneut den logischen ODER-Operator und fügen Sie die Bedingung ein. Bei der linken und rechten Richtung müssen wir das zweite Array-Element überprüfen, ich meine Versatz nach links. Also müssen wir die Indexnummer ändern. Es wird eins sein. Außerdem müssen wir nach links versetzten. Jetzt funktioniert der Effekt auf der linken Seite. Und schließlich brauchen wir die richtige Richtung. Also lasst uns weitermachen und diese Bedingung kopieren. Wir brauchen hier ein Plus-Schild. Und auch das Größer-als-Zeichen. Wie Sie sehen können, funktioniert das klebrige Element auf allen vier Seiten einwandfrei. Wir sind also fast fertig mit diesem Effekt. Wir müssen nur ein kleines Problem lösen. Wenn ich zum Beispiel das Menüsymbol nach oben bewege , die Elemente nicht ihre Standardposition, sobald der Cursor die Seite verlässt erhalten die Elemente nicht ihre Standardposition, sobald der Cursor die Seite verlässt. Dies passiert, weil in diesem Fall die zurückgelegte Entfernung weniger als 100 Pixel beträgt weniger als 100 Pixel und die if-Anweisung nicht ausgeführt wird. Also müssen wir dem Element die Standardposition zuweisen dem Element die Standardposition sobald die Maus das Element verlässt. Wir brauchen also Harvard-Elemente. Punkte auf dem Mausblatt. Dann müssen wir funktionieren. Nehmen wir diese beiden Zeilen und fügen sie hier ein. Okay, jetzt funktioniert alles perfekt und wir haben hier einen schönen und coolen Effekt Bevor wir diese Vorlesung beenden, werde ich den Code leicht ändern , um ihn übersichtlicher zu machen. Lassen Sie uns eine neue Funktion außerhalb der Mausbewegungsereignisse erstellen . Ich werde diese Funktion Sticky Elements nennen. Es werden drei Parameter benötigt. Wir benötigen X- und Y-Koordinaten und auch das gesamte Element. Dann hole ich mir die gesamte IF-Aussage von hier. Fügen wir es in die Funktion ein. Eigentlich werde ich diese IF-Aussage hier ändern. Verwenden wir den logischen Operator und den Operator. Danach rufen wir diese Funktion innerhalb der Mausbewegungsereignisse mit den Argumenten x, y und Harvard-Element auf. Wie Sie sehen, funktioniert alles perfekt. Endlich sind wir fertig. Sehen wir uns in der nächsten Vorlesung? 24. Mauskreis transformieren-Effekt: Ordnung, es ist also an der Zeit unserem Projekt ein weiteres Feature hinzuzufügen, was ich für einen schönen und coolen Effekt halte Wenn ich den Mauszeiger über einige Elemente wie die Navigationselemente oder die Projekte bewege, auch über die Dienste und die Eingabefelder Dann verwandelt sich der Mundkreis in die Form des Harvard-Elements. Und sobald wir die Elemente mit der Maus verlassen, bekommt es seine Standardform zurück, ich meine den Kreis. Ordnung, also lassen Sie uns weitermachen und diese Effekte der Projekte hinzufügen Ich werde direkt nach den Sticky-Elementen neue Kommentare in die Java-Datei einfügen . Lassen Sie uns Ihre Mauskreis-Transformation und Ihre Mundkreis-Transformation einfügen . Und dann erstelle eine neue Funktion. Ich nenne es Mauskreis-Transformation. Es benötigt einen Parameter und es wird das gesamte Element sein. Zuallererst werde ich diesen Effekt in Projekten erzeugen . Und am Ende des Tages werden wir diese Funktion auch zu anderen Elementen hinzufügen. Ich werde allen Projekten neue Klassen hinzufügen, so wie wir es bei den Sticky-Elementen gemacht haben . Lassen Sie uns also weitermachen und den Wrappern der Bilder eine neue Klasse hinzufügen den Wrappern der Bilder eine neue Klasse Ich nenne diesen Klassenzeiger Enter. Als Nächstes müssen wir definieren, ob der Mauszeiger auf das Element gesetzt wird, das diese neu hinzugefügten Klassen enthält Wir müssen also eine if-Anweisung verwenden, in der wir definieren müssen, ob das mit der Maus verbundene Element den Klassenzeiger Enter enthält Wir benötigen also eine Punktklassenliste mit schwebenden Elementen. Das beinhaltet muss hier den Klassennamen angeben, Zeiger eingeben. Lass uns testen, ob es gut funktioniert. Ich werde etwas auf der Konsole ausführen. Sagen wir Zeiger Enter. Und dann rufe diese Funktion mit der Maus auf. Ereignisse verschieben. Ordnung, schauen wir uns die Seite an und wechseln zum Konsolen-Tab Wenn ich also mit der Maus über die Projekte fahre, erhalten wir einen Zeigereingang in der Konsole Aber wenn ich den Mauszeiger über andere Elemente bewege , passiert nichts In Ordnung, bis jetzt funktioniert alles gut. Als nächstes müssen wir anfangen, daran zu arbeiten , die Form des Mundkreises zu ändern. Sobald wir die benötigten Elemente gefunden haben, müssen wir den Event-Handler für Mausbewegungen verwenden Und bei der Mausbewegung müssen wir die Form des Kreises ändern. Wir brauchen. Mit der Maus bewegen Sie sich mit Harvard-Elementen. Als Nächstes müssen wir ein paar verschiedene CSS-Stile für den Mauskreis definieren . Wir brauchen also Texte im Mauskreis, Punktstil und Punkt-CSS-Texte. Fangen wir mit der Breite und Höhe an. Um die Breite der Hubbard-Elemente zu ermitteln, verwende ich eigentlich die Breite der Hubbard-Elemente zu ermitteln, eine Methode namens get bounding client rect Und wir müssen es mit den Harvard-Elementen verbinden. Als nächstes benötigen wir hier die Eigenschaft, die mit Pixeln aufgerufen wird. Definieren wir auf die gleiche Weise die Höhe. Danach definiere ich die Eigenschaften oben und links. Wir können diese Codezeile duplizieren und die Höhe nach oben ändern. Und dann brauchen wir dasselbe auch für die linke Position. Wenn ich jetzt also mit der Maus über die Projekte fahre, passiert nichts, weil jetzt die meisten Kreisfunktionen funktionieren Sobald wir den Mauszeiger über die Elemente bewegen , für die der Klassenzeiger eingegeben wird, müssen wir die Ausführung der Funktion Code in der Mundkreisfunktion beenden die Ausführung der Funktion Code in der Mundkreisfunktion Und das mache ich mit einem booleschen Wert. Lassen Sie uns weitermachen und eine neue Variable erstellen. Ich nenne es Maus, eingekreister Stier. Und ich werde es wahr machen. Dann müssen wir innerhalb der Mundkreisfunktion eine If-Anweisung erstellen , in der wir überprüfen müssen, ob der boolesche Wert der Mausrückgewinnung wahr oder falsch ist Wenn diese Bedingung also zutrifft, müssen wir diese Codezeile ausführen. Eigentlich werde ich hier einen logischen und Operator anstelle der if-Anweisung verwenden einen logischen und Operator anstelle der if-Anweisung Danach müssen wir den Wert dieser booleschen Variablen innerhalb der Transformationsfunktion für den Mundkreis ändern dieser booleschen Variablen innerhalb Transformationsfunktion für den Mundkreis Und wir müssen es falsch machen. Im Moment ist es also immer noch so, dass nichts passiert, weil der Mauskreis standardmäßig die Opazität auf Null hat Und wir haben aufgehört, den Code dort auszuführen , wo er die Opazität hat Also müssen wir eine neue Opazität einführen. Jetzt funktioniert der Code, aber das wollen wir natürlich nicht. Der Mauskreis hat standardmäßig Transformationsumrechnung mit -50 Prozent Eigentlich brauchen wir das nicht. Wir müssen die Werte der Übersetzungsfunktion auf Null setzen. Also müssen wir transformieren, übersetzen und wir brauchen Null für beide Richtungen. Jetzt wird die Position des Kreises geändert. Als Nächstes beende ich die Animation, denn wie gesagt, der Kreis wird animiert Also brauchen wir hier Animationen, keine. Jetzt wird der Kreis also nicht mehr animiert und er erhält auch die Breite und Höhe der Elemente , über denen der Mauszeiger schwebt. Als Nächstes müssen wir den Grenzradius definieren. Dafür verwende ich eine der Methoden namens gets computed style Wir müssen hier schwebende Elemente angeben. Und dann müssen wir eine Eigenschaft namens Border-Radius verwenden. Wenn ich jetzt den Mauszeiger über das Projekt bewege, erhält der Mauskreis die Form der Elemente, über die der Mauszeiger schwebt. In Google Chrome funktioniert eigentlich alles einwandfrei. Aber wenn ich das Projekt in Mozilla Firefox überprüfe, werden Sie feststellen, dass der Grenzradius aus irgendeinem Grund nicht funktioniert Lassen Sie uns in der Konsole überprüfen, welchen Border-Radius uns in beiden Browsern gibt Ich werde die Konsole durchgehen. Für den Radius. In Google Chrome erhalten wir fünf Pixel. Aber in Mozilla Firefox erhalten wir eine leere Zeichenfolge Das ist ein kleines Problem für Mozilla Firefox. Und die Lösung, die ich mir ausgedacht habe, besteht darin, den Grenzradius in den Randradius einer beliebigen Ecke zu ändern den Grenzradius in den Randradius einer beliebigen Ecke zu . Weil alle Elemente, für die wir diese Tatsache verwenden werden , auf allen vier Seiten den gleichen Grenzradius Also verwende ich hier, sagen wir, Rand, unten, links, Radius. Lassen Sie uns weitermachen und überprüfen, ob dies in beiden Browsern einwandfrei funktioniert. Wie Sie sehen können, funktioniert alles einwandfrei. In Ordnung, bevor wir weitermachen, werde ich ein politisches Problem lösen Wenn ich anfange, den Mauszeiger vom unteren Rand des Projekts aus zu bewegen, ändert sich die Form des Kreisknochens weil wir gerade über dem Bild schweben Daher müssen wir Zeigerereignisse für die Projektbilder deaktivieren . Also lassen Sie uns dem Projekt Bildzeigerereignisse zuweisen. Keine. In Ordnung, jetzt war alles in Ordnung Als Nächstes füge ich diesem Effekt einen Übergang hinzu. Wir brauchen hier ein paar verschiedene Immobilien. Beginnen wir mit, mit, ich werde Ihre Übergangsdauer verwenden, 0,5 s. Als Nächstes haben wir die Höhe als obere und linke Position. Als nächstes kommt die Transformation. Und schließlich für den Radius. Okay, wie Sie sehen können, haben wir jetzt ein viel besseres Ergebnis. Aber trotzdem müssen wir einige Themen auswählen. Sobald die Maus die Elemente verlässt, müssen wir die Form des Kreises wieder ändern. Dafür müssen wir den Mouse-Live-Event-Handler verwenden. Wir müssen es mit dem Harvard-Element verbinden. Will die Maus die Elemente leben, müssen wir den booleschen Wert des Mundkreises in True umwandeln den booleschen Wert des Mundkreises Wenn nun die Maus das Projekt verlässt, wird die Standardform des Gepäckstücks abgerufen. Als Nächstes werde ich ein anderes Problem beheben. Wenn wir die Seite scrollen, kreist der Mauskreis und die Elemente stimmen nicht überein. Wir müssen also den Scroll-Event-Handler verwenden und ihn an das Dokument anhängen Sobald wir die Seite gescrollt haben, sollten die oberste Position des Mauskreises und die Harvard-Elemente übereinstimmen. Dies sollte jedoch passieren, sobald der boolesche Wert falsch ist, was bedeutet, dass wir den Mauszeiger über das Element bewegen, auf das der Klassenzeiger antwortet Also brauchen wir hier eine IF-Aussage. Und als Bedingung brauchen wir den booleschen Mauskreis nicht. Wenn diese Bedingung also zutrifft, sollten die oberen Positionen des Mundkreises und der schwebenden Elemente übereinstimmen Wir brauchen also Mauskreis Punkt, Stil, Punkt oben, gleich den Harvard-Elementen. Lass dich nicht einschränken. Client mit rechtem Punkt oben mit Pixeln. In Ordnung, jetzt ist das Problem behoben. Als Nächstes werde ich mich um ein anderes Problem kümmern. Wenn ich auf das Projekt klicke und es erweitert habe, wird die Form des Projekts weiterhin angezeigt. Also müssen wir es mit einem Klick loswerden. Wir müssen dafür sorgen, dass sich die Opazität der Maus an Null erinnert, sobald wir auf das Projekt klicken Also müssen wir Ihren Mundkreis punktförmig, Punkt, Opazität gleich Null einfügen Punkt, Opazität gleich Null In Ordnung, jetzt war alles in Ordnung. Und das Letzte, was wir tun müssen, ist, diesen Effekt auch mit anderen Elementen zu erzeugen. Ich werde wieder den Klassenzeiger Enter verwenden. Lassen Sie uns weitermachen und es zu den Navigationselementen hinzufügen. Als nächstes müssen wir dieses Glas zu den Diensten hinzufügen. Und zum Schluss fügen wir die Klasse zu den Eingabefeldern und der Schaltfläche „Senden“ hinzu. Lassen Sie uns diesen Effekt mit den Navigationselementen überprüfen. Wie Sie sehen können, funktioniert alles einwandfrei. Dann werde ich das bei den Diensten überprüfen. Wie Sie sehen, haben wir hier ein kleines Problem, eigentlich das gleiche Problem, das wir mit den Projekten hatten. Die Dienste beinhalten die Span-Elemente und wir haben zwei deaktivierte Zeigerereignisse für die Spans Lassen Sie uns ihnen also Zeigerereignisse zuweisen, keine. Jetzt ist das Problem behoben. Was die Eingabefelder betrifft, funktioniert alles einwandfrei. Okay, das ist alles. Wir haben die Arbeit an dem Feature abgeschlossen. Als Nächstes müssen wir damit beginnen, das Projekt an verschiedene Bildschirmgrößen anzupassen. Also lass uns weitermachen. 25. Projekt reaktionsfähig machen - Teil 1: Okay, wir haben den Bau unserer Projekte abgeschlossen. Ich bin dabei, dass alle Abschnitte erstellt wurden. Und jetzt müssen wir, wie bereits gesagt, unser Projekt an verschiedene Bildschirmgrößen anpassen. Das Projekt basiert auf einer extra großen Bildschirmgröße. Bildschirmgröße mit 1920 Pixeln Breite und 1080 Pixeln Höhe. Und wir müssen dafür sorgen, dass es auf kleinere Bildschirmgrößen reagiert. In diesem Teil werden wir CSS-Medienabfragen verwenden. Bevor wir anfangen, den Code zu schreiben, schauen wir uns die Seite an. Wechseln Sie in den responsiven Modus und überprüfen Sie das Projekt auf verschiedenen Bildschirmgrößen. Wie Sie sehen, sieht es auch auf kleineren Bildschirmgrößen gut aus. In Ordnung. Ich habe bereits verschiedene Breakpoints vorbereitet , an denen wir einige Änderungen vornehmen werden. Also werde ich keine Zeit damit verschwenden, sie zu finden. Im Allgemeinen müssen Sie die Änderungen vornehmen und den Bruchpunkt festlegen, an dem das Projekt sie benötigt. Ich denke, das ist der beste Weg , um Ihr Projekt verantwortlich zu machen. Wir sind also bereit zu beginnen. Lassen Sie uns neue Kommentare in diese CSS-Datei für Responsive einfügen . Der erste Breakpoint , an dem wir einige Änderungen vornehmen werden, wird also 1.500 Pixel sein An den Breakpoints. Ich werde die Kreise auf dem Treppenabsatz kleiner machen. Lassen Sie uns also weitermachen und eine CSS-Medienabfrage erstellen. Geben Sie dann die maximale Breite als 1.500 Pixel an. Dann wähle ich einen Kreis aus und setze Breite und Höhe, beide auf 15 Rampen. Außerdem werde ich diesen Hauptkreis auch kleiner machen . Lassen Sie uns also weitermachen und es auswählen und seine Breite und Höhe festlegen, beide auf 45. Miete. Außerdem müssen wir den Hauptkreis verkleinern , sobald wir den Mauszeiger darüber bewegen Lassen Sie uns also weitermachen und den Hauptkreis auswählen, indem Sie den Mauszeiger bewegen. Und dann mache Breite und Höhe. 55 Rampe. Außerdem werde ich die Größe des Bildes selbst ändern. Wählen wir also den Hauptkreis, IMG, und legen wir Breite und Höhe fest. Beide auf 160%. Ordnung, das war's mit dem ersten Abschnitt Lassen Sie uns weitermachen und den Text Über mich ein Jahr frei nehmen Ich werde die Schriftgröße des Textes verringern. Wählen wir also den Text Über mich aus, gefolgt von den Span-Elementen und setzen die Schriftgröße auf 11 rent. Das war's mit dem zweiten Abschnitt. Als nächstes kommt der Projektabschnitt, aber wir müssen ihn jetzt nicht bearbeiten. Als nächstes müssen wir den Abstand zwischen den Diensten und dem Kontaktbereich vergrößern . Wählen wir also Abschnitt vier aus und legen Sie den unteren Rand fest, um die Rampe abzubiegen. Außerdem müssen wir die Schriftgröße des Service Batson und der Servicetexte verringern . Lassen Sie uns also weitermachen und service btn with span auswählen. Stellen Sie die Schriftgröße auf neun Rem ein. Wählen Sie außerdem Servicetexte und stellen Sie die Schriftgröße so ein, dass RAM aufgerufen wird. Ordnung, das war's mit diesem Breakpoint , alles sieht gut aus Wir können weitermachen und den nächsten Breakpoint finden, der 1.350 Pixel groß sein wird Lassen Sie uns eine neue CSS-Medienabfrage erstellen und maximale Breite als 1.350 Pixel angeben An den Breakpoints werde ich die Größe des Haupt-Batson verringern Wählen Sie die Hauptbtn-Datei aus und stellen Sie die Breite und Höhe ein, beide auf 12,5 g. Gut, danach werde ich die Kreise überhaupt ausblenden Wählen wir also einen Kreis aus und weisen ihn ihm zu. Keine anzeigen. Ordnung, wie Sie sehen können, sind die Kreise versteckt Als Nächstes ändere ich die Positionen des Fortschrittsbalkens, da er, wie Sie sehen, die Texte teilweise abdeckt. Lassen Sie uns also weitermachen und den Fortschrittsbalken auswählen. Ich setze die richtige Position auf ein RAM. Was die unterste Position angeht, machen wir sie auf Null. Okay, der Fortschrittsbalken ist also positioniert und das Letzte, was wir an diesem Breakpoint tun müssen , ist die Schriftgröße des Textes Über mich zu verkleinern die Schriftgröße des Textes Über mich zu Weil alle anderen Abschnitte gut aussehen. Wählen wir also den Text „Über mich“, gefolgt von den Span-Elementen, und legen die Schriftgröße auf zehn Rampen fest. In Ordnung, das war's mit diesem Breakpoint. Lassen Sie uns weitermachen und den nächsten suchen, der 1.150 Pixel groß sein wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage mit der maximalen Breite von 1.150 Pixeln erstellen eine neue CSS-Medienabfrage mit der maximalen Breite von 1.150 Pixeln Das erste, was ich tun werde, ist die Schriftgröße des HTML-Elements zu verringern. Dies wirkt sich auf die Größe aller Elemente aus. Lassen Sie uns also weitermachen und die Schriftgröße für das HTML-Element auf 55% festlegen . Es ist also zu sehen, dass alle Elemente kleiner wurden. Und mit der Codezeile haben wir ein viel besseres Ergebnis. Als Nächstes werde ich die Maus und den Mauspunkt überhaupt ausblenden , da wir auf kleineren Bildschirmgrößen keine Maus mehr haben. Wählen wir also beide Elemente aus, Mauskreis und Mauspunkt. Und ihnen zugewiesen, zeigen keine an. Okay, danach kümmern wir uns um die Navigationselemente Ich werde den Abstand zwischen ihnen verringern. Wählen wir also den Navbar-Link und weisen ihm einen Rand mit den Werten Null oben und unten und zwei RAM links und rechts zu. Okay, als Nächstes verringern wir die Größe des Hauptkreises. Und ich werde auch die Größe verringern, wenn der Mauszeiger darauf zeigt. Wählen wir also den Hauptkreis aus und stellen Breite und Höhe ein, beide auf vier für Ram. Dann dupliziere ich diesen Code hier, bewege den Mauszeiger. Und ändere auch die Werte, die wir hier brauchen. 45 Lauf. Okay, das war's mit dem ersten Abschnitt. Als Nächstes werde ich den Text, der über mir steht, verkleinern . Wählen wir also diese Elemente aus, gefolgt von span und setzen Sie die Schriftgröße auf 7,5 rund. Ordnung, wie Sie sehen können, wird der Text kleiner. Es sieht nett aus. Als Nächstes werde ich mich um das Projekt kümmern. Ich meine, sobald wir es erweitern, können Sie sehen, dass wir auf der linken und rechten Seite des Bildes viel Platz haben . Also kümmern wir uns darum. Ich werde IMG Projekte auswählen. Und ich definiere Topfen als sieben Rem oben und unten und 11 Rem auf der linken und rechten Seite Außerdem müssen wir den Schließknopf ein wenig nach rechts bewegen . Wählen wir also project hide btn aus und legen die richtige Position für die Ausführung In Ordnung, das Projekt sieht also gut aus. Als Nächstes werde ich mich um den Bereich Dienste kümmern. Lassen Sie uns zunächst die Höhe der Servicetaste verringern . Wählen Sie service btn aus. Und grüßte 12 Uhr. Als Nächstes werde ich die Schriftgröße der Span-Elemente reduzieren und dieser Service wird ebenfalls besteuert Wählen wir also service btn, span und setzen die Schriftgröße auf acht RAM Was den Servicetext angeht, werde ich die Schriftgröße 3,5 ändern. In Ordnung, der Servicebereich sieht also gut aus. Außerdem müssen wir den Kontaktbereich nicht ändern. Was die Diashow der Social Media-Symbole angeht, werde ich den Platz oben verkleinern und unten etwas Platz schaffen Lassen Sie uns also weitermachen und den für die Slideshow definierten Rand als fünf Rem oben und unten und Null auf der linken und rechten Seite auswählen Slideshow definierten Rand als fünf Rem oben und unten und Null auf der linken und rechten In Ordnung, das war's also. In Bezug auf diese Breakpoints sieht alles gut aus. Also müssen wir weitermachen und den nächsten Breakpoint finden. Und das machen wir in der nächsten Vorlesung. 26. Projekt reaktionsfähig machen - Teil 2: In Ordnung, wir haben also bereits ein paar verschiedene Breakpoints erstellt Der letzte hatte 1.150 Pixel. Lass uns weitermachen und den nächsten Breakpoint finden. Der nächste wird also 900 Pixel haben. Wie Sie sehen, sind einige dieser Abschnitte durcheinander. Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Geben wir hier die maximale Breite als 900 Pixel an. Das erste, was ich tun werde, ist die Position des Menüsymbols zu ändern. Wählen wir es aus und setzen die rechte Position auf minus vier RAM. Danach werde ich die Navigationselemente anpassen. Wählen wir eine App oder einen Link aus. Lassen Sie uns zunächst die Schriftgröße ändern und 1,5 RAM daraus machen. Und ich werde auch den Abstand zwischen den Objekten ändern. Lassen Sie uns den Spielraum auf 0,1 setzen. Lauf. Ordnung, als Nächstes verschiebe ich den Feature-Text in die Nähe der Seitenränder Wählen wir den ersten Text und definieren den Rand oben als Null. Dann unsere Reihe auf der rechten Seite, Null am unteren Ende, fünf Rem auf der linken Seite. Dann werde ich diesen Code duplizieren. Ändern Sie den Klassennamen, den wir auch für den Feature-Text benötigen, und ändern Sie auch die Werte der Margin-Eigenschaft. Wir brauchen 05 rem, dann wieder 0,0. In Ordnung, das war's mit dem ersten Abschnitt. Als Nächstes verschiebe ich die Abschnittsüberschriften ein wenig nach links Wählen wir also die Abschnittsüberschrift aus. Wie Sie wissen, ist dies ein gebräuchlicher Klassenname. Setzen wir die linke Position auf fünf Runs. Ordnung, danach werde ich mich um den obigen Text kümmern Wählen wir also den Text Über mich aus, gefolgt vom Span-Element und setzen die Schriftgröße auf 5,5 ran. Außerdem werde ich die Schrift etwas heller machen um den Text auf kleineren Geräten sichtbar zu machen. Stellen wir die Farbe auf ein hellgraues ccc ein. Ordnung, als Nächstes werde ich diesen Servicebereich anpassen Lassen Sie uns die Höhe der Oberflächenschaltfläche verringern und ich werde auch die Schriftgröße verringern. Wählen wir also service btn und setzen die Höhe auf neun RAM. Dann müssen wir Service Btn Span auswählen. Ändern wir die Schriftgröße, machen wir sechs RAM daraus. Und wir müssen auch Servicetexte auswählen. Lassen Sie uns die Schriftgröße auf drei Punkte setzen, um sie auszuführen. In Ordnung, schauen wir uns den Abschnitt Dienste an. Es sieht gut aus. Und tatsächlich, am Breakpoint, sind wir fertig. Lass uns weitermachen und den nächsten suchen , der 700 Pixel groß sein wird. Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage mit der maximalen Breite von 700 Pixeln erstellen eine neue CSS-Medienabfrage mit der maximalen Breite von 700 Pixeln Das erste, was ich tun werde, ist die Schriftgröße des HTML-Elements zu verringern. Lassen Sie uns die Schriftgröße auf 50% setzen. Wie Sie sehen können, wurden die Elemente kleiner. Und fast jeder Abschnitt sieht gut aus, außer dem Kontaktbereich. Wir müssen die Breite der Eingabefelder verringern. Wählen wir also Contact Form Input und setzen die Breite auf 50 ran. Ordnung, das war's mit diesem Breakpoint Lassen Sie uns weitermachen und das Projekt beim nächsten anpassen Der nächste Breakpoint wird also 550 Pixel sein. Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen und die maximale Breite auf 550 Pixel angeben Auch hier werde ich die Schriftgröße des HTML-Elements verringern . Wählen wir es also aus und setzen die Schriftgröße auf 40%. Als Nächstes ändere ich die Größe des Bildes innerhalb des Hauptkreises. Wählen wir also den Hauptkreis aus, gefolgt vom IMG-Tag. Ich werde Breite und Höhe setzen, beide auf 180 Prozent Ordnung, wir leihen also, es sieht gut aus Ebenfalls. Wir müssen den zweiten und dritten Abschnitt nicht ändern. Was die Dienste angeht, werde ich die Schriftgröße erneut verringern. Wählen wir also service btn mit span aus. Stellen Sie die Schriftgröße auf 4,5 RAM ein. Wählen Sie dann den Servicetext und definieren Sie diese Schriftgröße als drei Rem. Außerdem werde ich die Farbe des Oberflächentextes leicht ändern . Lass es piepen, piep, piep. In Ordnung, schauen wir uns den Abschnitt Dienste an. Als Nächstes kümmere ich mich um den Kontaktbereich. Lassen Sie uns die Breite der Eingabefelder verringern. Nochmals. Ich wähle eine Kontaktformulareingabe aus und definiere dann die Breite. Mach es zum Laufen. In Ordnung. Das Letzte, was ich am Breakpoint tun werde , ist, die Social-Media-Symbole etwas kleiner zu machen. Zunächst wähle ich eine Rapper-Slideshow aus. Ändern wir die Breite, machen wir 45 RAM daraus. Wählen Sie dann Bild und ändern Sie den Abstand. Ich setze die Polsterung oben und unten auf Null und links und rechts auf 1,1. In Ordnung, das war's also. Mit diesem Breakpoint sind wir fertig und jetzt ist es an der Zeit, das Projekt anzupassen Am letzten Breakpoint, der 400 Pixel sein wird Lassen Sie uns eine neue CSS-Medienabfrage mit einer maximalen Breite von 400 Pixeln Zunächst werde ich erneut die Schriftgröße der HTML-Elemente verringern. Setzen wir es auf 35%. Als Nächstes ändere ich die Position des Logos. Ich werde es etwas weiter unten platzieren und auch in den Mittelpunkt der Kreditvergabe stellen. Wählen wir also Logo aus. Lassen Sie uns zunächst die Schriftgröße ändern sie auf 1,7 rem festlegen. Um es dann etwas nach unten zu platzieren, werde ich die obere Position ändern. Machen wir 13 RAM draus. Und um die Elemente dann horizontal zu zentrieren, müssen wir die linke Position auf 50 Prozent setzen. Und außerdem müssen wir für eine perfekte Zentrierung transformieren, also x -50 Prozent übersetzen Lassen Sie uns also sehen, dass das Logo perfekt zentriert ist. Als Nächstes platziere ich den Knopf oder ebenfalls in der Mitte Wählen wir es also aus und setzen die Eigenschaft justify content auf center. Moment ist die Navigationsleiste nicht perfekt zentriert, da sie standardmäßig auf der rechten Seite etwas gepolstert Also müssen wir es loswerden. Lassen Sie uns das Padding auf Null setzen. In Ordnung, das war's mit der Navigation. Als Nächstes kümmere ich mich um den Hauptkreis und das Bild darin. Schauen wir uns den Hauptkreis an und verringern wir seine Breite. Mach 38 RAM draus. Dann werde ich auch die Breite verringern, wenn der Mauszeiger darauf zeigt. Und ändere mit make it 42 RAM. Und wir müssen auch das Bild auswählen. Lassen Sie uns Breite und Höhe festlegen, beide zu 200 Prozent. Die Landung und der Rest der Abschnitte sehen also gut aus. Das einzige, was ich tun werde, ist, die Schriftgröße der Formularüberschrift zu verringern. Denn sobald wir den Betreff oder die Nachricht fokussiert haben , ist das Layout etwas durcheinander Lassen Sie uns also weitermachen und die Schriftgröße ändern. Wählen Sie aus der Überschrift aus. Stellen Sie die Schriftgröße auf fünf Rampen ein. In Ordnung, also endlich sind wir fertig. Unser Projekt ist responsiv. Wenn wir das überprüfen, werden Sie feststellen, dass das Projekt auf verschiedenen Bildschirmgrößen gut aussieht. Kam. Als nächstes müssen wir die Eingabefelder validieren. Denn danach werden wir das Projekt hosten und es live machen. Also lass uns weitermachen. 27. Formularvalidierung: Okay, nachdem wir unsere Projekte auf verschiedene Bildschirmgrößen angepasst haben , ist es jetzt an der Zeit, mit dem nächsten Teil fortzufahren und unser Projekt und andere Funktionen zu erweitern Ich werde unser Formular validieren, denn irgendwann werden wir das Projekt hosten und es einfach machen. Werfen wir einen Blick auf das fertige Projekt. Somit werden alle vier Eingabefelder, einschließlich des Textbereichs, validiert Wenn ich sie leer lasse und auf die Schaltfläche „Senden“ klicke, erhalten wir Fehlermeldungen. Tatsächlich wird das Formular auf unterschiedliche Weise validiert. Wir erhalten Fehlermeldungen, wenn wir die Eingabefelder leer lassen. Auch wenn wir die Längenanforderungen nicht schützen. Wenn ich zum Beispiel nur ein Zeichen in das erste Eingabefeld eingebe, erhalten wir eine andere Fehlermeldung. Wenn wir das Hinzufügenzeichen im E-Mail-Feld übersehen, erhalten wir außerdem eine andere Fehlermeldung die besagt, dass die E-Mail nicht gültig ist. Lassen Sie uns mit der Arbeit an der Formularvalidierung beginnen. Zuallererst müssen wir ein paar Dinge in der HTML-Datei tun . Ich werde allen Formulareingabefeldern die IGA-Attribute zuweisen . Der erste wird Name sein. Kopieren wir es und fügen es für die E-Mail ein. Dann haben wir Betreff und Nachricht. Ordnung, als Nächstes füge ich nach jedem Eingabefeld einen Absatz Diese Elemente werden verwendet , um die Fehlermeldung anzuzeigen. Öffnen wir also das P-Tag mit der Klassennachricht. Mit der inhaltlichen Fehlermeldung. Okay, das war's jetzt mit dem HTML. Bevor wir anfangen, etwas JavaScript zu schreiben, werde ich den Absatz so gestalten , dass er Teil des Kontaktabschnitts ist, also füge ich den Code in den fünften Abschnitt Lassen Sie uns eine neue Validierung des Kommentarformulars erstellen. Und der Formularvalidierung. Wählen Sie dann Absatz aus. definiere ich die Schriftgröße. Lassen Sie uns einen Punkt auf RAM legen. Dann werde ich die Schrift fett machen. Lassen Sie uns die Schriftstärke auf 700 setzen. Ändere auch die Farbe. Ich werde deine Farbe F phi phi e, phi e verwenden. Hier haben wir also die Fehlermeldung. Ich mache es in Großbuchstaben und platziere es auch auf der linken Seite Lassen Sie uns also die Texttransformation in Großbuchstaben setzen. Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen. Setzen wir es auf 0.1 run. Und dann platziere ich den Text auf der linken Seite. Verwenden wir also Margin mit den Werten 01 brand und dann wieder Null. In Ordnung, das war's jetzt mit dem CSS. Jetzt können wir anfangen, etwas JavaScript zu schreiben. Lassen Sie uns weitermachen und neue Kommentare in die Datei einfügen. Wir müssen eine Bestätigung beantragen. Dann Ende der Formularvalidierung. Zunächst erstelle ich ein paar verschiedene Variablen, um alle benötigten Elemente auszuwählen. Lassen Sie uns mit einem Formular beginnen, eine neue Variable erstellen und sie Form nennen. Und wählen Sie dann Formularelemente mit der Methode querySelector aus. Geben wir hier das Kontaktformular für den Klassennamen an. Als Nächstes wähle ich das erste Eingabefeld aus. Lassen Sie uns eine neue Variable erstellen und sie Username nennen. In diesem Fall wähle ich die Elemente mithilfe von id aus. Ich meine, ich verwende die Methode get element by ID. Wir müssen hier den ID-Namen angeben. Lassen Sie uns diese Codezeile dreimal duplizieren. Das nächste Eingabefeld wird also für E-Mail sein. Dann haben wir ein Thema. Dann wird die nächste Nachricht sein. Und außerdem wähle ich alle Nachrichten aus. Ich meine die Absätze. Lassen Sie uns also eine neue Variable erstellen, sie Nachrichten nennen und dann mit der Methode Query Selector, all, alle Absätze auswählen Methode Query Selector, all, alle In Ordnung, also sind alle benötigten Variablen vorbereitet. Und als Nächstes werde ich eine Funktion erstellen, wir überprüfen können, ob die Eingabefelder leer sind oder nicht. Lassen Sie uns also eine neue Funktion erstellen. Ich nenne es „Pflichtfelder überprüfen“. Diese Funktion benötigt einen Parameter, der ein Array sein wird. Und es wird alle Eingabefelder enthalten Um also zu überprüfen ob die Eingabefelder leer sind oder nicht, müssen wir zuerst das Array durchgehen. Und dafür verwende ich eine der Array-Hilfsmethoden namens for-each Es wird ein Parameter benötigt. Es wird die Callback-Funktion sein, die selbst einen Parameter übernimmt, die aktuellen Eingabefelder aus dem Array Jetzt müssen wir überprüfen, ob der Wert der Eingabe leer ist oder nicht. Wir müssen also die IF-Anweisung verwenden. Und als Bedingung müssen wir den eingegebenen Punktwert mit der leeren Zeichenfolge vergleichen. Eigentlich reicht der eingegebene Punktwert hier nicht ganz aus, denn wenn wir etwas mit einem Leerzeichen in die Eingabefelder eingeben , wird dieser Leerraum als der Teil des Werts erkannt , den wir nicht benötigen Um solche Dinge zu vermeiden, meine ich, um den Leerraum zu ignorieren, können wir eine der Methoden namens trim verwenden Wenn diese Bedingung zutrifft, müssen wir eine Fehlermeldung anzeigen. Um das zu tun, werde ich eine neue Funktion erstellen. Nennen wir es Fehler. Es werden zwei Parameter benötigt. Das erste werden die Eingabeelemente sein. Was den zweiten betrifft, so wird es eine Botschaft sein. In Ordnung, die Funktion ist also erstellt. Jetzt müssen wir Zugriff auf den Absatz bekommen und diesen Inhalt definieren. Außerdem müssen wir standardmäßig die Fehlermeldung ausblenden und sie anzeigen, sobald wir den Fehler haben. Gehen wir also standardmäßig zur CSS-Datei und zur Höhe der Absätze. Dafür verwende ich Visibility Hidden und Opazität Zero Dann definiere ich eine neue Klasse, die dann dem Absatz hinzugefügt wird , sobald sie beschuldigen, ich nenne es Fehler, dann brauchen wir Nachricht Und eigentlich brauchen wir hier keinen Speicherplatz weil wir diesen Cluster hinzufügen müssen, das Element selbst und nicht seine Eltern. Um die Nachricht anzuzeigen, müssen wir Sichtbarkeit haben. Und auch Opazität eins. Außerdem werde ich Transition verwenden , um die Fehlermeldung reibungslos anzuzeigen. Verwenden wir Opazität mit der Dauer 0,3. Ordnung, jetzt müssen wir diese Klasse zum Absatz hinzufügen Außerdem müssen wir den Textinhalt der Nachricht definieren . Um Zugriff auf den Absatz zu erhalten, verwende ich eine der Eigenschaften, die als nächstes Element Sibling bezeichnet wird, da der Absatz das Schwesterelement des Eingabeelements ist Schwesterelement des Eingabeelements Wir müssen also Punkt als nächstes Element als Geschwisterpunktklassenliste eingeben als nächstes Element als Geschwisterpunktklassenliste Und wir müssen den Klassenfehler zur Klassenliste hinzufügen. Was den TextContent angeht, wird es die Nachricht sein , die wir hier als Parameter verwenden Wir brauchen also den Eingabepunkt neben dem Element Sibling. Zweifle daran, dass TextContent der Masse entspricht. Okay? Die Funktion für die Fehlermeldung ist also bereit. Wir können es unten in der IF-Anweisung aufrufen. Es werden zwei Argumente benötigt. Die erste wird als Eingabe dienen. Was den zweiten betrifft, so wird es die Botschaft sein. Öffnen wir Backticks. Zuerst. Ich gebe dir die Eingabe-ID. Es gibt uns den Namen des Eingabefeldes. Und dann wird der folgende Text sein, ist erforderlich. Okay, also ist alles bereit. Wir müssen nur einen Event-Listener zu den Formularelementen hinzufügen und die Erforderliche Felder überprüfen“ aufrufen Funktion „Erforderliche Felder überprüfen“ aufrufen, sobald wir das Formular abgeschickt Also müssen wir den Add-Event-Listener bilden. Der Veranstaltungstyp wird eingereicht. Außerdem brauchen wir hier eine Callback-Funktion mit Event-Objekt. Als erstes werde ich die Standardaktion des Formulars verhindern. Wir müssen eine Zahlungsunfähigkeit verhindern. Und dann müssen wir die Funktion Check als Pflichtfelder aufrufen . Wie Sie wissen, hat diese Funktion einen Parameter, nämlich das Array der Eingabefelder. Als Argument müssen wir hier also ein Array der Eingabefelder übergeben . Ich meine, wir müssen deinen Benutzernamen weitergeben. E-Mail-Betreff und Nachricht. Ordnung, wenn ich jetzt die Eingabefelder leer lasse und auf die Schaltfläche „Senden“ klicke, erhalten wir Fehlermeldungen Als wenn ich das Eingabefeld ausfülle. Und klicken Sie erneut auf die Schaltfläche Senden, dann wird die Fehlermeldung nicht ausgeblendet. Eigentlich wollen wir das nicht. Wir müssen eine weitere Funktion erstellen, um erfolgreich zu sein, um die Fehlermeldung zu entfernen. Lassen Sie uns also eine neue Funktion erstellen, nennen wir sie Erfolg. Es wird ein Parameter benötigt, es wird die Eingabe sein. In dieser Funktion müssen wir also den Klassenfehler aus dem Absatz entfernen. Wir müssen also mit dem Eingabepunkt auf den Absatz zugreifen . Nächstes Element Geschwister. Dann brauchen wir eine Klassenliste. Und wir müssen den Klassenfehler entfernen. Als Nächstes müssen wir diese Funktion aufrufen sobald das Eingabefeld nicht leer ist. Wir müssen also eine else-Anweisung erstellen und die Funktion success mit der Argumenteingabe aufrufen. In Ordnung? Wenn ich jetzt auf die Schaltfläche „Senden“ klicke, erhalten wir Fehlermeldungen. Und wenn ich das Eingabefeld ertaste und erneut auf die Schaltfläche „Senden“ klicke, dann entfernt die Fehlermeldung den Rest rund um den ersten Teil der Validierung. Wir können überprüfen, ob die Eingabefelder leer sind oder nicht. Jetzt ist es an der Zeit, weiterzumachen und die Länge der Zeichen zu überprüfen , die wir in das Eingabefeld eingeben. Dafür werde ich eine weitere Funktion erstellen. Nennen wir es Check the length. Diese Funktion benötigt zwei Parameter. Der erste wird ebenfalls ein Input sein. Die zweite wird die Mindestanzahl der Zeichen sein . Wenn also die Länge des Werts des Eingabefeldes weniger als die Mindestanzahl von Zeichen beträgt, sollten wir die Fehlermeldung anzeigen. Wir müssen also eine if-Anweisung erstellen , in der wir die Länge des Werts des Eingabefeldes mit der Mindestanzahl der Zeichen vergleichen die Länge des Werts des müssen. Wir müssen also Punkte, Wert, Punkte, drei Punkte, Länge, weniger als min eingeben . Wenn diese Bedingung also zutrifft, müssen wir die Fehlermeldung anzeigen. Daher müssen wir die Fehlerfunktion aufrufen. Wie Sie wissen, sind zwei Argumente erforderlich. Die erste ist die Eingabe. Denn der zweite ist die Botschaft. Also brauchen wir hier die eingegebene Punkt-ID , dann muss die Steuer sein. Wenigstens. Wir müssen hier den Mittelwert des zweiten Parameters übergeben. Und dann brauchen wir Charaktere. Wenn diese Bedingung falsch ist, müssen wir die Erfolgsfunktion aufrufen. Wir brauchen also eine L-Anweisung, als die Funktion erfolgreich mit der Argumenteingabe ist. Okay, endlich müssen wir die Funktion Check Length für alle Eingabefelder außer der E-Mail aufrufen die Funktion Check Length für alle Eingabefelder außer der E-Mail Denn für die E-Mail-Validierung werden wir eine separate Funktion erstellen. Es heißt also Check length. Zuerst für den Benutzernamen. Die Mindestanzahl von Zeichen wird, sagen wir, zwei sein. Lassen Sie uns diese Codezeile zweimal duplizieren. Das nächste Eingabefeld wird Betreff sein. Und dann haben wir Nachricht als Mindestanzahl von Zeichen für die Nachricht. Ich werde zehn bestehen. Ordnung, lassen Sie uns weitermachen und überprüfen, ob alles gut funktioniert Ich werde nur ein Zeichen in den ersten Eingabefeldern beantworten . Wenn ich auf die Schaltfläche „Senden“ klicke, erhalten wir keine Fehlermeldungen. Für das erste Eingabefeld. Das passiert, weil die Else-Anweisung bei der Funktion „ Erforderlicher Kraftstoff überprüfen“ funktioniert. Also müssen wir es loswerden. Wenn ich jetzt noch einmal teste, erhalten wir die richtige Nachricht. Und tatsächlich wird das Gleiche für die restlichen Eingabefelder passieren . In Ordnung, jetzt ist es an der Zeit, sich um die E-Mail-Eingaben zu kümmern. Wie gesagt, wir werden eine separate Funktion erstellen. Nennen wir es, E-Mail checken Diese Funktion benötigt einen Parameter. Es wird der Input sein. Um die E-Mail-Adresse zu validieren, müssen wir also reguläre Ausdrücke verwenden. Eigentlich werde ich sie nicht manuell schreiben, weil sie aus vielen verschiedenen Zeichen bestehen. Und es könnte ziemlich verwirrend sein. Wir können einfach bei Google danach suchen. Suchen wir nach JavaScript, z. B. nach E-Mail Gehen wir zum ersten Link und holen uns diese Variable hier und fügen sie in die Funktion ein. Lassen Sie uns den Namen der Variablen ändern. Ich nenne es reg X. Jetzt müssen wir überprüfen, ob der E-Mail-Eingabewert diesen Anforderungen entspricht, wir müssen if-Anweisungen verwenden, dann müssen wir eine Methode namens test verwenden Hängen wir es an die Variable reg X an. Und als Argument müssen wir hier wieder einen Eingabewert mit der Baummethode übergeben . Wenn das stimmt, dann haben wir Erfolg. Und wenn es falsch ist, brauchen wir L-Anweisungen, bei denen wir die Fehlerfunktion mit Eingaben und mit einer Nachricht aufrufen müssen. E-Mail ist nicht gültig. Okay, schließlich müssen wir diese Funktion mit dem Argument email aufrufen diese Funktion mit dem Argument email Außerdem werde ich den Typ der Eingabeelemente ändern, da HTML, wie Sie wissen, standardmäßig die Validierung für die E-Mail hat. Und eigentlich brauchen wir es gerade nicht. Also hat es den Typ geändert, mach es zu Text. Okay, wenn ich jetzt einige Zeichen eingebe , die nicht wie die E-Mail-Adresse aussehen, erhalten wir eine Fehlermeldung besagt, dass die E-Mail nicht gültig ist. Aber wenn ich hier eintrage, sagen wir mal john@gmail.com, dann bekommen wir keine Fehlermeldungen. In Ordnung, das war's mit der Formularüberprüfung. Bevor wir diese Lektion beenden, werde ich noch eine Sache machen wie Sie es sehen. Sobald wir die Eingaben fokussieren , werden die zuvor eingegebenen Zeichen angezeigt. Um es zu deaktivieren, können wir eines der Attribute namens Autocomplete mit einem Wert verwenden Autocomplete mit einem Wert Okay, jetzt kann es sehen, dass alles perfekt aussieht. Lass uns weitermachen. 28. Website-Hosting auf Netlify: Ordnung, in der vorherigen Vorlesung haben wir unser Formular und den Inhaltsbereich validiert Und jetzt ist es, wie gesagt, an der Zeit, unsere Website zu hosten und live zu machen. Um dies zu tun, werden wir einen der beliebtesten und am häufigsten verwendeten Dienste namens Netlify verwenden beliebtesten und am häufigsten verwendeten Dienste namens Netlify Es ist heute ein wirklich großartiges Tool. Sie können ein kostenloses Konto mit vielen verschiedenen Funktionen haben und Ihre Website ganz einfach hosten. Sie können auch ein Pro-Konto mit einigen zusätzlichen Funktionen haben . Als erstes muss ich mich auf der Website registrieren. Wie Sie sehen, gibt es verschiedene Möglichkeiten, sich anzumelden. Sie können sich also Zeit nehmen und sich registrieren. Wir haben uns bereits angemeldet, also werde ich keine Zeit damit verschwenden , weil es ein einfacher Vorgang ist. Im Moment haben wir hier also keine gehosteten Websites. Ich werde das Schritt für Schritt mit dir machen. Das erste, was ich tun werde, ist, die allgemeine Eingabeaufforderung zu öffnen und sie als Administrator auszuführen. Eigentlich müssen Sie, wenn Sie einen Mac verwenden, das Schlüsselwort sudo um die Befehle als Administrator auszuführen, dann müssen wir auf die Projekte zugreifen In unserem Fall wird das Projekt auf dem Desktop platziert. Also müssen wir zuerst diese beiden Ordner verlassen. Ich werde die Stadt mit einem Schrägstrich leiten. Und dann brauchen wir den Pfad des Ordners. Wenn Sie den Teil des Projektordners nicht kennen, können Sie den Terminal-Interviewcode öffnen und der Teil des Projekts wird Ihnen automatisch angezeigt. Ich kopiere den Pfad. Tatsächlich bestehen in meinem Fall alle vier Ordinalnamen aus nur einem Wort Wenn Sie die Ordnernamen jedoch mit mehreren Wörtern haben, müssen Sie sie in Anführungszeichen setzen. Gehen wir zum Projektordner. Jetzt müssen wir Netlify mit dem Node-Paketmanager npm installieren dem Node-Paketmanager Dafür sollten Sie Node JS installiert haben. Andernfalls können Sie npm nicht verwenden. Um NodeJS zu installieren, müssen Sie zu Node js.org gehen Laden Sie dann eine der Versionen von hier herunter und installieren Sie sie. Sobald Sie die Datei Node.JS installiert haben, können Sie einen Node Package Manager verwenden. Um Netlify zu installieren, müssen Sie also den folgenden Befehl ausführen, npm I, der für install, dash g, Netlify, CLI steht dash g, Netlify, CLI Es wird einige Zeit dauern. Sobald es installiert ist, müssen wir eine Konfigurationsdatei namens Netlify dots TO und l erstellen Netlify dots TO und . Das ist also eine Konfigurationsdatei angibt , wie nullify erstellt In dieser Datei müssen wir den Build-Ordner angeben. Und dann müssen wir ein Verzeichnis definieren , das die Deploy-Ready-HTML-Datei enthält. In unserem Fall haben wir hier keinen separaten Ordner für unsere HTML-Datei. Wir können das Verzeichnis also einfach auf folgende Weise angeben . Wir müssen veröffentlichen, um den Punkt mit Anführungszeichen zu erreichen. Okay? Der nächste Schritt ist die Initialisierung von Netlify Dafür müssen wir Netlify darin ausführen. Jetzt werden Sie aufgefordert, die Website manuell zu erstellen und bereitzustellen oder das Verzeichnis zuerst mit GitHub zu verbinden Im Moment werde ich mich dafür entscheiden, diese Site manuell zu erstellen und bereitzustellen. Dann fragt es nach dem Namen des Teams. Sie müssen die obere Pfeiltaste und die Eingabetaste verwenden. Der nächste Schritt ist der Name der Site. Sie können es entweder für einen zufälligen Namen leer lassen und nullify generiert ihn für Sie Oder Sie können einen eindeutigen Namen verwenden. In unserem Fall rufe ich den Site-Code auf und erstelle eine Portfolio-Website. Wenn wir nun unsere Projekte überprüfen, finden Sie hier einen neuen Ordner namens Netlify, in dem wir eine JSON-Datei haben die die eindeutige ID unserer Website enthält Richtig? Wenn wir die Seite nun neu laden, kommen wir hier, unsere Portfolio-Website im Seitenbereich. Als Nächstes müssen wir Netlify ausführen, bereitstellen. Es wird uns einen URL-Entwurf geben. Und wenn Sie der Meinung sind, dass auf Ihrem URL-Entwurf alles gut aussieht , können Sie Netlify ausführen, dash, prod bereitstellen Schließlich erhalten wir hier die URL der Website. Wenn wir zu dieser URL gehen, sehen wir unsere Website live im Browser, sodass jeder darauf zugreifen kann. Ordnung, sobald die Website live ist, werde ich jetzt dafür sorgen, dass das Formular funktioniert Ich meine, sobald wir die Informationen in die Eingabefelder eingegeben und das Formular abgeschickt haben, sollten wir es auf unserem Netlify-Dashboard erhalten Werfen wir einen Blick auf die Formulardokumentation. Ich werde nach Netlify-Formularen suchen Hier haben wir also die Dokumentation Sie können es sich ansehen und lernen, wie Sie die Formulare einrichten. Gehen wir zur Datei index.html. Wir müssen hier noch ein paar Dinge tun. Wir müssen den Formularelementen zwei Attribute hinzufügen. Die erste wird Action sein. Mit einem Wert, der veröffentlicht wird, als wir brauchen, verstärken Daten den wahren Wert Als Nächstes müssen wir jedem Eingabeelement und auch dem Textbereich ein Namensattribut hinzufügen . Der erste wird Name sein, dann benötigen wir E-Mail. Der nächste wird Thema sein. Und schließlich brauchen wir eine Nachricht. In Ordnung, das war's mit dem HTML. Als Nächstes müssen wir auch in der JavaScript-Datei einige Dinge tun . Im Moment haben wir hier die Standardfunktion zum Verhindern , mit der wir kein Formular einreichen können. Wir müssen dafür sorgen, dass diese Methoden nur funktionieren , wenn wir den Fehler haben. Um das zu tun, erstelle ich eine neue Variable. Nennen wir es nicht gültig. Um herauszufinden, ob wir einen Fehler haben oder nicht, müssen wir die Nachrichten durchsehen. Sobald wir herausgefunden haben, ob die Fehlermeldung vorhanden ist, müssen wir die Funktion preventDefault ausführen Zuallererst müssen wir Nachrichten in ein Array transportieren, da es sich im Moment um eine Knotenliste handelt. Also brauchen wir Array Punkt von und wir müssen deine Nachrichten weiterleiten. Dann verwende ich eine der Array-Hilfsmethoden namens find Diese Methode unterbricht den Kreislauf, sobald die Bedingung, die ich hier bestehen werde, erfüllt ist. Also müssen wir mit einer Callback-Funktion suchen, die einen Parameter annimmt und es wird die aktuelle Nachricht im Array sein Wenn die Nachricht also einen Klassenfehler enthält, bedeutet dies, dass wir eine Fehlermeldung haben. Wir müssen also überprüfen, ob Nachrichtenklassenliste einen Klassenfehler enthält. Sobald wir die Fehlermeldung haben, müssen wir die Funktion preventDefault ausführen Dafür verwende ich eine bedingte Aussage. Wir brauchen nicht gültig, gefolgt vom logischen Operator und. Und dann müssen wir den Zahlungsausfall verhindern. Okay, endlich müssen wir von hier aus die präventive Fußfunktion loswerden von hier aus die präventive Fußfunktion Außerdem müssen wir unsere Website mit neu hinzugefügtem Code aktualisieren . Dafür müssen wir wieder Netlify, Deploy Dash, Dash Prod ausführen Netlify, Deploy Dash, Dash Prod Jetzt ist die Website aktualisiert und wir müssen das Formular ausfüllen. Klicken Sie nun auf die Schaltfläche Senden. Wie Sie sehen, haben wir hier eine kleine Nachricht erhalten , die uns mitteilt, dass das Formular eingereicht wurde. Wenn wir das Dashboard überprüfen, erhalten wir die Informationen , die wir gerade übermittelt haben. Also funktioniert alles gut. Und tatsächlich haben wir die Arbeit an unserem Projekt abgeschlossen. Ich hoffe, es war interessant und hilfreich und Sie werden einige neue Dinge lernen , die Ihnen helfen werden, Ihre eigene persönliche Portfolio-Website zu erstellen die modern, schön und professionell aussieht und nur mit reinem HTML, CSS und JavaScript verwendet wird schön und professionell aussieht und nur mit . In Ordnung, ich hoffe, Ihnen hat dieser Kurs gefallen. Danke, dass du bei uns bist. Wünsche dir alles Gute. Tschüss.