Website-Design: Hinzufügen von Scrolling und Animationen in EditorX von Wix

1. Willkommen beim Kurs!: Hallo, mein Name ist Patti und willkommen zu meinem Skillshare-Kurs. Ich bin Spezialist für digitales Marketing und arbeite seit einigen Jahren in der Industrie, helfe kleinen und großen Unternehmen der Erstellung der Websites und berate sie bei Best Practices , um dies zu geben nutzt die beste Navigationsreise. In dieser Klasse konzentrieren wir uns auf die Verwendung von Animationen und Bildlaufeffekten in der Plattform Editor X. Dies ist eine intuitive, sehr gut gestaltete Plattform, um Anwendungen wie Ihnen beim Erstellen von Websites in einem sehr einfach zu bedienen. Diese spezielle Website, die Sie vor Ihnen sehen , ist ein Beispiel, das wir verwenden werden, was in meiner ersten Edit-Rennklasse war. Wenn Sie sich also nicht registriert haben oder dem beitreten, ich Sie dringend, dies zu tun , damit Sie mir folgen können während wir diese spezielle Klasse durchlaufen. In dieser Klasse werden wir uns mit Parallaxe befassen , Funktionen, verschiedene Animationstechniken aufdecken und wo sie platziert werden können und wie man das mit dem intuitiven System , das der Verstand hat veröffentlicht, das ist Editor X. Worauf du wartest. Ich hoffe wirklich, dass du mit mir in diesem Kurs teilnimmst und ich freue mich darauf, dich dort zu sehen. Und wie immer, wenn es irgendwelche Fragen gibt , können Sie diese nach Ihrem Beitritt gerne in den Diskussionsbereich stellen , und ich werde mich sicher bei Ihnen melden. 2. So erstellst du eine Website immersiver: Wenn es also darum geht, eine immersive Website zu erstellen, eine der Hauptattraktionen für den Betrachter ist eine der Hauptattraktionen für den Betrachter oder den Benutzer, wie eindringlich die Website ist. Ermöglicht es dem Benutzer , sich zu dem Produkt oder der von Ihnen angebotenen Dienstleistung transportiert zu fühlen . Und eine der Möglichkeiten, wie wir die Website oft immersiver aussehen lassen können , besteht darin, viele Bilder, Videos, das Hinzufügen von Effekten, Animationen und Bildlaufanimationen auf die Website einzubeziehen , Bildlaufanimationen auf die Website einzubeziehen was wirklich wirklich helfen Sie , diese Erfahrung für den Benutzer zu verstärken. 3. Beginne mit dem Hero: Was wir also tun werden, ist dort weiterzumachen, wo wir aufgehört haben. Also, wenn Sie meine erstklassige Klasse noch nicht gesehen haben, um diese Website für Naturtouristen zu erstellen . Ich schlage vor, dass Sie dort anfangen und sich uns dann hier anschließen wo wir etwas fortgeschrittener sein werden und einige nette Animationen und Bildlaufeffekte hinzufügen , die die Website wirklich zum Platzen bringen und hervorstechen. 4. Grund für Effects und Animationen: Sie können sich diese Klasse immer als Add-On für die vorherige vorstellen , bei der wir die Konfiguration der Bilder und Texte ändern werden, die wir hier haben , um sie immersiver zu machen, Nutzung der erweiterten Funktionen, die Editor X ausprobieren muss, um das Erlebnis eindringlicher zu gestalten. Eines der ersten Dinge, die wir tun werden, ist, dieses Heldenbild zu machen, das das Zielseiten-Bild immersiver ist und ein wenig Parallaxen-Scrollen hat. Parallax-Scrollen bedeutet im Wesentlichen, dass dieser Container, der das Bild enthält, zu einem Fenster wird und das Bild dahinter platziert wird. Wenn Sie also scrollen, können Sie das Bild in Bezug auf die Bewegung des Scrollens der Maus nach oben und unten bewegen lassen. 5. Effects und Animationen hinzufügen: Eines der offensichtlichen Dinge, die wir tun können, ist, wenn wir auf diesen Bildbereich klicken und sicherstellen, dass Bilder ausgewählt wurden, können wir in die Registerkarte Animation gehen. Jetzt stehen auf dieser Animationsregisterkarte mehrere Animationen zur Auswahl. Und wenn Sie den Mauszeiger über jeden einzelnen bewegen, werden Sie sehen wie es aussehen könnte. Dies sind offensichtlich sehr einfache Animationen und sie können einem Zweck auf der Website dienen. Aber ich fühle mich nicht wie ein Landungshelden-Bild, sie ergeben am sinnvollsten. Eines der Dinge, die wir tun werden, ist die Inspektorkolumne zu öffnen und wir können zu einigen der Immobilien auf der rechten Seite gehen . Zunächst möchten wir sicherstellen, dass das Bild selbst flüssig ist und sich in diesem Behälter befindet , was offensichtlich der Fall ist. Und das können Sie erkennen, indem Sie sich das blaue Feld unter dem Schnelleinstellungsmenü ansehen, in dem Abschnitt und Bild aufgeführt sind. Das bedeutet, dass das Bild in diesem Container platziert wird. Auf der rechten Seite sehen Sie hier verschiedene Optionen, die wir haben. Vielleicht möchten wir die Fähigkeit wählen , um dies ein wenig zu verringern. Das wird hilfreich sein, um den Titel der Website hervorzuheben. Möglicherweise möchten Sie einen Hintergrund auswählen, daher ist der Hintergrund ein Overlay. Aber wir wollen tun, dass ich vorher erwähnt habe um diesem Hauptbild einige Bildlaufeffekte hinzuzufügen. Um das zu tun, gehen wir in Einstellungen. Solche Dinge werden eine Pop-up-Box öffnen. Wir können das bewegen, wenn du willst. Hier haben Sie die Möglichkeit, die Bildeinstellungen wie den Verlauf, den Farbton, die Helligkeit, den Kontrast usw. anzupassen wie den Verlauf, den Farbton, , aber wir haben hier auch die Möglichkeit, ein Bildlaufverhalten zu haben. Jetzt werden wir uns auf das Verhalten vermasseln. Hier haben Sie zwei Möglichkeiten, Ihre Parallaxe und Sie haben Enthüllung. Wenn wir auf Parallaxe klicken, sehen Sie, wie das Bild jetzt eine andere Perspektive hat. liegt daran, dass Wix automatisch versteht, wie groß das Bild ist und wie viel Bewegung im Bild auftreten kann, während die Auflösung beibehalten wird. Jetzt haben wir auf Parallax geklickt. Klicken wir auf die Vorschau und sehen, wie das aussieht. Wenn ich jetzt nach unten scrolle, wirst du sehen, wie sich das Bild fast langsam hinter dem Text bewegt, während du nach unten scrollst. Dies ist ein wirklich cooles immersives Erlebnis für den Benutzer. Und es macht es fast zu einem 3D-Effekt. Jetzt gefällt mir das wirklich. Und eines der Dinge, die wir tun können, ist, dass ich es weiß, bevor wir über Animationen gesprochen haben , die etwas langweilig aussehen können. Wir werden ein Fade-In hinzufügen. Wenn wir also auf Fade-In klicken und passen wir es an. Jetzt wollen wir, dass es sehr schnell und bissig wird. Anstatt also 1,2 Sekunden zu sein, lassen Sie uns dies auf etwa Fünf Sekunden reduzieren. Wir können uns auch für eine Verzögerung entscheiden , aber wir werden das so behalten, wie es ist, weil wir möchten, dass es sofort geladen wird. Testen wir es jetzt. Sehen Sie sich diese sehr schnelle Animation im Stil an. Genau das ist es, wonach wir suchen. Das ist nur ein Beispiel für die Verwendung von Parallax. Das andere Beispiel, das wir haben, ist das Reveal-Feature. Jetzt hat mir die Reveal-Funktion persönlich sehr gut gefallen da es Ihnen ermöglicht ein Bild fast statisch aussieht, besonders wenn es verschiedene Overlays gibt dass ein Bild fast statisch aussieht, besonders wenn es verschiedene Overlays gibt, auf die Sie legen möchten dieses Bild. Lassen Sie uns also einen neuen Abschnitt erstellen und ein Beispiel geben und sehen, wie das aussieht. Wenn wir hier runter kommen und einen neuen Abschnitt eröffnen. Fügen wir also hier einen neuen Abschnitt hinzu, einen leeren Abschnitt. Und wir werden hier ein paar Elemente hinzufügen. Wir können schnell zum Kompositionswerkzeug kommen. Dies gibt uns ein paar nette Voreinstellungen. Wir können immer eines davon benutzen, oder wir können einfach zu einem schnellen Hinzufügen und Importieren unserer eigenen Dinge gehen . Lassen Sie uns zuerst ein Layout hinzufügen , das ein Raster ist. Das hilft uns also, den Abschnitt zu unterteilen. Also nochmal habe ich das alles in meinem vorherigen Video behandelt. Stellen Sie also sicher, dass Sie dorthin zurückkehren, wenn Sie mehr darüber erfahren möchten , wie all diese Funktionen funktionieren Ich setze einen Link In die Beschreibung dieser Klasse, wenn Sie gehen möchten, werden wir in ein Raster setzen. Lasst uns also hier ein Raster einsetzen und strecken , dass es den gesamten Abschnittsbereich abdeckt. Jetzt haben wir auf der einen Seite Text auf der anderen Seite, wir werden ein Bild haben. Jetzt können Sie Reveal-Funktionen verwenden , um eine Geschichte zu erzählen. Zum Beispiel, wenn wir eines dieser Bilder von hier unten wiederverwenden wollten . So könnten wir zum Beispiel das Vereinigte Königreich benutzen. Was wir tun werden, ist eine Geschichte über das Vereinigte Königreich zu erzählen . Vielleicht möchten wir die erwähnten Länder beibehalten oder entschuldigen, die Städte oder Landkreise oder verschiedene Interessenpunkte von Touristen im Vereinigten Königreich. Das wird eine Geschichte sein, die es zu erzählen gilt. Auf der linken Seite fügen wir etwas Text hinzu. können wir direkt hier machen. Oder wenn Sie über Assets verfügen , die Sie vorinstalliert haben, können Sie diese hier aus dem Ordner für gespeicherte Assets einholen . Dafür bringen wir einfach einen Header ein. Also lasst uns das hier ziehen und ablegen und sicherstellen, dass dies zentriert ist. Sie können dies mit den Schnelleinstellungen hier tun. Stellen Sie also sicher, dass es in der Mitte ist. Und genau in der Mitte. Da sind wir los. Nennen wir das Großbritannien. Und dieser Text ist ziemlich groß. Lasst uns das auf 70 reduzieren. Und strecken Sie es auch aus, damit es in einer Zeile geht. Und dann stellen Sie sicher, dass es gut zentriert ist. Das ist einer. Wir können den Hintergrund wählen, damit wir dies offensichtlich beliebig machen können . Im Hinterkopf behalten. Wir werden ein Bild auf der rechten Seite haben, also wird es jeden Hintergrund abdecken, den wir wählen. Wir können vorerst nur einen schönen leeren weißen Hintergrund wählen. Und auf der rechten Seite werden wir jetzt einige Tonhöhen einbeziehen. Wenn wir zum Medienbereich gehen, haben wir einige Beispiele für Bilder, die wir bereits haben. Also lass uns hierher gehen. Und offensichtlich spiegeln diese Bilder London wider. Aber mit Wix, wenn Sie die Möglichkeit haben , nach Bildern zu suchen. Wenn wir also nur Großbritannien tippen , kommt nichts auf, was zu halten lernt. Versuchen wir es mit Unsplash. Los geht's. Lass uns ein paar Bilder von diesen Typen benutzen. Entsplash oder kostenlose hochauflösende Bilder, die Sie relativ auf Ihrer Website verwenden können, verwenden wir dieses Bild hier. Fügen wir diese beiden Seite und bringen sie dann auf die rechte Seite. Und du wirst sehen, dass dieses Feld erscheint. Dies bedeutet, dass wir es an diesen Abschnitt anhängen werden. Wenn wir hier klicken und strecken, füllt das nun die rechte Seite des Bereichs aus. Cool, das sieht ganz nett aus. Aber was wir sagten , wir wollten eine Geschichte erzählen. Was wir jetzt tun werden, ist, dass wir diesen Rasterabschnitt kopieren und einfügen. Es ist nur eine Kopie und Einfügen. Das ist also ein Steuerelement C und V unter Windows oder Befehl C und V auf Mac. Was wir hier haben, sind jetzt zwei der gleichen exakten Abschnitte. Was wir hier tun werden, ist vielleicht London als unser erster Standort genannt . Bringen Sie das etwas höher und wir werden noch etwas Text hinzufügen. Dies kann nur ein Absatztext sein. Jetzt kann das alles sein. Ich werde in diesem Tutorial nicht zu verrückt werden, aber offensichtlich können Sie wählen, was Sie einbeziehen möchten. So kleine Drähte. Auch hier nur ein Beispiel. London ist die Hauptstadt Großbritanniens und beherbergt einige der einzigartigsten Architektur und historischen Stätten des Landes . Was wir tun können, ist eine Animation für diesen Abschnitt festzulegen . Klicken Sie also mit der rechten Maustaste hier und wir fahren zu den Einstellungen fort und wir wählen Reveal. Jetzt ist es hier wichtig, weil wir auf „Enthüllen“ geklickt haben. Wir können die nächste auch offenbaren lassen. Was wir jetzt hören können, ist, was Reveal tut, ist es das Bild hinter das Fenster legt , wenn Sie daran vorbeiscrollen, die Illusion ist, dass sich der linke Text bewegt während das rechte Bild bleibt. Lassen Sie uns das also eine Vorschau geben. Sieh mal, wie das dort aussieht. Was das getan hat, ist, dass die Illusion gegeben wird, dass das Bild feststeckt und stationär ist, während sich der Text auf der linken Seite bewegt. Wenn ich zum Abschnitt gehe, hast du wahrscheinlich bemerkt, dass eine Art weiße Linie dazwischen lag . Das liegt daran, dass wir den Abschnitt der Hintergrundfarbe von Weiß angegeben haben . Wir können das ändern und wir können dafür sorgen , dass sie keine Hintergrundfarbe haben. Wir können immer nichts machen 0. Und das sollte den unteren loswerden. Und dann lasst uns auch die beste machen. Entschuldigung, Bild, Bilddeckkraft ist da. Lassen Sie uns kein Hintergrundbild haben. Und das Gleiche gilt für diesen. Also sind sie jetzt beide Hintergrund weniger Da gehen wir. Auf diese Weise bekommen Sie die Illusion diese bestimmte Seite ein Bild hinter sich hat. Dies ist ein wirklich einzigartiges Feature , das heutzutage viele Websites enthalten. Denn wie Sie sich vorstellen können, ist es manchmal schön, eine Geschichte erzählen zu lassen. Bevor wir diese Funktionen hatten, bei denen wir Hover-Effekte hatten, bei denen sich die Farbe aufgrund von Schwebebewegungen ändert, wo wir jetzt verschiedene Abschnitte durchlaufen da Sie hier die Option haben um so tief zu gehen wie du willst. Soweit du willst. Es gibt zwei der wichtigsten Parallaxen- und Reveal-Scroll-Animationen, die eine Website wirklich cool aussehen lassen können. Eine andere Sache, die Unternehmen gerne machen oder Websites gerne haben, ist das Azure-Scrollen. Verschiedene Animationen kommen zu verschiedenen Zeiten ins Spiel. Wenn wir zu einer leeren Seite gehen. In diesem speziellen Fall verwenden wir Standorte. Und lasst uns denselben Abschnitt mit London wiederverwenden. Also geh her und wir werden uns auf das Vereinigte Königreich konzentrieren. Was wir jetzt tun werden, ist, wenn wir einen Abschnitt hinzufügen und die Leute durch diese Website blättern. Sehen Sie, wie verschiedene Animationen auftauchen, während sie scrollen. Eine Möglichkeit, dies zu tun, besteht darin, einen weiteren Abschnitt hinzuzufügen. Los geht's. Machen wir es zu einem Zwei-mal-Zwei-Raster. Dies ermöglicht es uns erneut, verschiedene Elemente oder verschiedene Vermögenswerte auf verschiedenen Seiten zu haben verschiedene Elemente oder verschiedene . Und lasst uns eine vorgefertigte Komposition hinzufügen. Wie wäre es, wenn wir es benutzen, verwenden wir etwas Interessanteres. Lass uns das hier benutzen. Im Moment haben wir ein sehr nettes, sage ich präkreatiertes Bild. Wir werden dieses Hintergrundbild durch etwas Interessanteres ersetzen . Lass uns eine Person anziehen, durch einen Wald geht. Offensichtlich gibt es auch in Großbritannien Wald. Wir sind also nicht zu weit weg. Wir sehen uns das schnell an. Sie werden sehen, wie das hier schön sitzt und offensichtlich begonnen hat, den Text zu ändern. Aber eines der Dinge, die wir tun können, ist ein paar Animationen hinzuzufügen. Wenn Sie also das Pop-up scrollen, lassen Sie uns das duplizieren. Kopieren und fügen Sie ein, dass wir zwei davon haben. Und wir werden dieses Bild in etwas anderes ändern. Also nur um der Sache willen werden wir dieses Strandbild benutzen. Jetzt haben wir zwei separate Bilder. Was wir tun können, ist den Schwerpunkt zu ändern. Also im Moment kannst du sehen , dass wir hier anfangen. Vielleicht wollen wir mehr von dieser unteren rechten Ecke mit den Muscheln verwenden . Das ist eine Sache, die wir tun könnten, Animationen hinzuzufügen. Animationen wie diese sehen ganz gut aus , wenn sie einfließen oder verblassen. Ich schwebe immer gerne in Funktion , weil es so aussieht. Es ist eine intuitivere Animation zum Scrollen. Also nehmen wir den Float ein und animieren nur beim ersten Mal. Das ist ziemlich wichtig, denn das Letzte, was wir wollen ist, dass jedes Mal, wenn jemand die Seite ständig animiert, es nach einer Weile ziemlich nervig werden kann. Ich treffe „ Komm“ von links. Also bevorzugen wir Animationen. Das sieht gut aus. Wir können das Gleiche hier machen. Aber was wir tun werden, ist diese Box nach links zu verschieben. Auf diese Weise haben wir einen kleinen Unterschied in den beiden. Wir werden das Gleiche hier machen, aber dieses Mal werden wir es von rechts animieren lassen. Schweben Sie ein, passen Sie Animate von rechts an. Wenn wir nun eine Vorschau anzeigen, sehen Sie, wie die Animation nur dann läuft, wenn Sie zum Ansichtsfenster gelangen. Wieder eine wirklich nette Geste. Dies kann für alles auf Wix getan werden, jedes Element oder Asset, das Sie einbringen, Sie können Animationen hinzufügen. Also nur für ein Beispiel werden wir hier ein paar Dekorationen anbringen. Wir können hier ein schönes großes Image einbringen. Wir werden hier einen Text einlegen , der besagt, dass es einen 50% Rabatt auf den Verkauf oder so ähnlich sagen wird. 50% buchen bis zum fünften Jahr 2022. Dies ist ein Beispiel, das wir hier haben. Wir werden das im Container in den Mittelpunkt stellen. Das ist eine Sache, die ich getan habe , dass ich beide verschoben und gehalten habe, dass es in den Container gelegt wird. Das bedeutet, dass Sie die Grundform sehen und dort hineinlegen können. Kopiere das, gruppiere diese zusammen. Und lassen Sie uns diesen Text einfach schnell bearbeiten, damit er ein bisschen besser aussieht als das, was er tut. So 50% des Buches bis zum fünften Dezember. Lassen Sie uns diesen Text jetzt weiß machen, weil wir alle wissen, dass Weiß auf Grau besser aussieht. Gewinn. Was wir tun wollen, ist auch diese Gruppe animieren zu wollen. Also können wir Animationen machen. Klicken Sie auf Flow in oder erweitern. Fliegen vielleicht. Nochmal coole Animationen hier. Lasst uns noch einmal reinfließen. Nett, das ist ziemlich professionell. Wir können die Länge tatsächlich etwas kürzer machen . Wir waren nicht zu spät. Lassen Sie mich das erste Mal noch einmal 0.8 animieren. Wenn wir das noch einmal anfangen. Sieh dir an, wie es schön und langsam kommt. Auch hier können Animationen und Sie können Schaltflächen hinzufügen, diese können zu Kontaktformularen und ähnlichem gehen. Also haben sie wirklich nützliche Sachen bekommen. Und das sind kleine Dinge, die Sie verwenden können um Ihre Website-Erfahrung zu verbessern. 6. Und Das ist ein WRAP!: Ich hoffe also wirklich, dass Sie diese sehr kurze Klasse nützlich fanden . Ich wollte es nicht zu lange schaffen. Ich plane, jede Woche eine Reihe von zehn bis 15 Minuten Unterrichtsvideos zu erstellen jede Woche eine Reihe von zehn bis 15 Minuten Unterrichtsvideos , die sich mit Editor X auf bestimmte Themen konzentrieren. Das erste war ungefähr anderthalb Stunden, weil ich das Plattform für Sie als neuen Benutzer. Und dieses Mal ging es darum nur auf die Animations-, Scrolling- und Parallax-Effekte zu konzentrieren . Der nächste, den wir tun werden, ist das Content Management. Achten Sie also auf die nächste Klasse, in der wir im Wesentlichen eine Content Management-Datenbank voller Bilder erstellen eine Content Management-Datenbank voller , die auf dynamischen Seiten platziert werden können. Sobald diese Datenbank also Bilder erhält, wird sie automatisch zu bestimmten Seiten und dynamischen Seiten hinzugefügt , was sehr nützlich sein kann, insbesondere für Benutzer, die Geschäfte erstellen oder e- Commerce-Websites wo neue Bilder für Anzeigen oder benutzerdefinierte Geräte oder Dienste durchkommen , was haben Sie? Sie können einfach eine Datenbank ändern und sie wird an andere Teile der Website gesendet , ohne dass hinzufügen ständig Bilder zu verschiedenen Seiten und sich selbst verlieren indem ich Zeit damit verschwende. Achten Sie also auf jeden Fall auf das nächste Video. Und wenn Sie weitere Fragen haben, lassen Sie diese bitte im Fragenbereich. Und ich bin dankbar, wenn Sie dieses und das vorherige Video überprüfen könnten , wenn Sie sie bereits gesehen haben. Und ich freue mich darauf, Sie in Zukunft in einer Klasse zu sehen .