Eine der "heißesten" Techniken im Internet ist das Parallax-Scrollen. Wir waren alle auf den Websites, auf denen Sie das Scrollrad Ihrer Maus drehen und der Inhalt der Seite auf und ab oder über die Seite verschoben wird, wenn Sie das Mausrad drehen.
Für Neueinsteiger im Web- und Grafikdesign ist diese Technik aufgrund der erforderlichen CSS-Menge äußerst schwierig zu erreichen.
Wenn Sie so beschrieben werden, gibt es eine Reihe von Anwendungen, die nur Grafiker ansprechen können. Sie verwenden grundsätzlich einen vertrauten Seitenlayout-Ansatz für Webseiten, was bedeutet, dass nicht viel, wenn überhaupt, Codierung involviert ist. Adobe Muse ist eine Anwendung, die wirklich in den Vordergrund getreten ist.
Die Arbeit, die von Grafikprofis mit Muse geleistet wird, ist erstaunlich und Sie können sehen, was Sie tun können, wenn Sie die Muse besuchen Ort des Tages . Obwohl Webprofis dazu neigen, Muse als eine Art "Wickelspielzeug" zu betrachten, wird es auch von Designern verwendet, um mobile und Webprototypen zu erstellen, die schließlich an die Entwickler ihres Teams weitergegeben werden.
Eine Technik, die mit Muse unglaublich einfach zu bewerkstelligen ist, ist das Parallax-Scrollen und wenn Sie die vollständige Version der Übung sehen möchten. Wenn Sie mit dem Mausrad drehen, scheint sich der Text auf der Seite nach oben oder unten zu bewegen, und die Bilder ändern sich.
Lass uns anfangen.
01 von 07Erstellen Sie eine Webseite
Wenn Sie Muse starten, klicken Sie auf Neue Seite Verknüpfung. Dies öffnet die Neue Site-Eigenschaften. Dieses Projekt wird für eine Desktopanwendung konzipiert und Sie können es im auswählen Anfangslayout Pop-Down-Menü. Sie können auch die Werte für die Anzahl der Spalten, die Rinnenbreite, die Ränder und die Auffüllung festlegen. In diesem Fall waren wir nicht sehr besorgt und haben einfach geklickt OK.
Formatieren Sie die Seite
Wenn Sie die Site-Eigenschaften festlegen und auf klicken OK Du wurdest zu dem gebracht, was heißt Planen Aussicht. Da ist ein Zuhause Seite oben und a Masterseite am unteren Rand des Fensters. Wir brauchten nur eine Seite. Um zur Entwurfsansicht zu gelangen, haben wir auf die Startseite geklickt, wodurch die Benutzeroberfläche geöffnet wurde.
Auf der linken Seite befinden sich einige grundlegende Werkzeuge und auf der rechten Seite befinden sich verschiedene Bedienfelder, mit denen der Inhalt der Seite bearbeitet werden kann. Am oberen Rand befinden sich die Eigenschaften, die auf die Seite angewendet werden können, oder alles, was auf der Seite ausgewählt ist. In diesem Fall wollten wir einen schwarzen Hintergrund haben. Dazu klicken wir auf die Schaltfläche Browser-Füllung Farbchip und wählen Sie Schwarz aus der Farbauswahl.
03 von 07Fügen Sie der Seite Text hinzu
Im nächsten Schritt fügen Sie der Seite etwas Text hinzu. Wir haben das ausgewählt Textwerkzeug und zog ein Textfeld aus. Wir haben das Wort "Welcome" eingegeben und in den Eigenschaften den Text auf gesetzt Arial, 120 Pixel Weiß. Zentriert ausgerichtet.
Wir haben dann zum Auswahlwerkzeug gewechselt, auf das Textfeld geklickt und dessen Wert festgelegt Y-Position bis 168 Pixel von oben. Während das Textfeld noch ausgewählt ist, haben wir das geöffnet Panel ausrichten und richtete das Textfeld auf die Mitte aus.
Schließlich haben wir bei ausgewähltem Textfeld die Taste gedrückt gehalten Option / Alt und Verschiebung Tasten und erstellte vier Kopien des Textfelds. Wir haben den Text und die Y-Position jeder Kopie geändert in:
- Bis 871
- Graphics, 1621
- Software, 2371
Beim Festlegen der Position jedes Textfelds werden Sie feststellen, dass die Seitengröße an die Position des Texts angepasst wird.
04 von 07Fügen Sie Bildplatzhalter hinzu
Der nächste Schritt besteht darin, Bilder zwischen die Textblöcke zu setzen.
Der erste Schritt ist die Auswahl von Rechteckwerkzeug und zeichnen Sie eine Box, die sich von einer Seite der Seite zur anderen erstreckt. Wenn das Rechteck ausgewählt ist, setzen wir sein Höhe bis 250 Pixel und sein Y-Position auf 425 Pixel. Der Plan sieht vor, dass sie sich immer auf die Seitenbreite ausdehnen oder zusammenziehen, um das Browser-Ansichtsfenster eines Benutzers aufzunehmen. Um dies zu erreichen, haben wir auf die Schaltfläche geklickt 100% Breite Schaltfläche in den Eigenschaften. Dadurch wird der X-Wert ausgegraut und um sicherzustellen, dass das Bild in einem Browser immer 100% der Breite des Darstellungsbereichs entspricht.
05 von 07Bilder zu Bildplatzhaltern hinzufügen
Bei ausgewähltem Rechteck haben wir auf die Schaltfläche geklickt Füllen Sie den Link - nicht den Farbchip - und klickte auf das IchMagier Tinte um ein Bild zum Rechteck hinzuzufügen. In dem Passend zu Bereich, den wir ausgewählt haben Anpassen und klickte auf Griff in der Mitte in dem Position Bereich, um sicherzustellen, dass das Bild von der Bildmitte aus skaliert wird.
Als nächstes benutzten wir die Wahl / Alt-Umschalt-Ziehen Um eine Kopie des Bildes zwischen den ersten beiden Textblöcken zu erstellen, wurde das Füllungsbedienfeld geöffnet und das Bild durch ein anderes ersetzt. Das haben wir auch für die restlichen zwei Bilder gemacht.
Wenn Bilder vorhanden sind, ist es Zeit, die Bewegung hinzuzufügen.
06 von 07Parallax-Bildlauf hinzufügen
In Adobe Muse gibt es mehrere Möglichkeiten, Parallax-Scrolling hinzuzufügen. Wir zeigen Ihnen eine einfache Möglichkeit, dies zu tun.
Klicken Sie bei geöffnetem Füllungsbereich auf Registerkarte scrollen und wenn es geöffnet wird, klicken Sie auf die Schaltfläche Kontrollkästchen "Bewegung".
Sie sehen Werte für Initiale und Final Motion. Diese bestimmen, wie schnell sich das Bild relativ zum Scrollrad bewegt. Bei einem Wert von 1,5 wird das Bild beispielsweise 1,5-mal schneller als das Rad bewegt. Wir haben den Wert 0 verwendet, um die Bilder zu fixieren.
Das Horizontale und vertikale Pfeile bestimme die Richtung der Bewegung.Wenn die Werte 0 sind, werden die Bilder unabhängig davon, auf welchen Pfeil Sie klicken, nicht angezeigt.
Der mittlere Wert – Schlüsselposition - zeigt den Punkt, an dem sich die Bilder bewegen. Die Linie über dem Bild beginnt für dieses Bild 325 Pixel vom oberen Rand der Seite. Wenn der Bildlauf diesen Wert erreicht, beginnt sich das Bild zu bewegen. Sie können diesen Wert ändern, indem Sie ihn entweder im Dialogfeld ändern oder indem Sie auf den Punkt oben in der Linie klicken und ihn nach oben oder unten ziehen.
Wiederholen Sie dies für die anderen Bilder auf der Seite.
07 von 07Browsertest
An diesem Punkt waren wir fertig. Das erste, was wir aus offensichtlichen Gründen unternahmen, war die Auswahl Datei> Site speichern. Zum Browsertest haben wir einfach ausgewählt Datei> Vorschauseite im Browser. Dies öffnete den Standardbrowser unseres Computers und als die Seite geöffnet wurde, begannen wir mit dem Blättern.
