Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Eine Website mit Muse CC erstellen

Verändernde Transparenzen einsetzen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video bietet einen Überblick über den praktischen Einsatz von sich verändernden Transparenzen innerhalb der bestehenden Website.

Transkript

Hat man erst einmal verstanden, wie die Bildlaufeffekte bezogen auf die Transparenz einzusetzen sind, so kann man das hier für dieses Projekt auch sehr sinnvoll nutzen. Ich möchte nämlich, dass diese Grafik hier nicht die ganze Zeit statisch stehen bleibt, sondern dass wenn ich mit der Maus von unten nach oben scrolle, dass das Objekt eingefadet wird. Und wenn man wieder nach unten scrollt, dann soll das Objekt wieder ausgefadet werden, so dass man quasi am unteren Bereich des Bildschirms die Grafik, das Bild komplett hier sehen kann, aber diese Einblendung hier nicht mehr ganz so deutlich, nicht mehr ganz so dominant sehen kann. Fangen wir einfach mal an. Gehen wie hier in die Bildlaufeffekte, dann wählen wir hier den Punkt Deckkraft aus. Und jetzt ist das Ganze ja aktiviert. Jetzt sind hier - salopp gesagt - irgendwelche Werte drin, und ich habe natürlich im Vorfeld schon mal so ein bisschen herumexperimentiert. Man hat natürlich irgendwann auch eine gewisse Erfahrung, und deswegen weise ich, welche Werte ganz gut an dieser Stelle funktionieren. Das ist meine aktuelle Position und dieser Punkt hier, diese Ankerposition soll bezogen auf die aktuelle Position, etwa 300 Pixel kleiner sein, und hier oben die Verblassen-Position soll weitere 300 Pixel keiner sein. Also zwischen dieser Position hier oben und dieser soll eine Differenz von 300 Pixeln sein, und zwischen dieser Position und dieser Position soll eine Differenz von 600 Pixeln sein. Nach unten will ich das Ganze auch haben, und bezogen auf diese Position muss es ein bisschen mehr sein, weil das Objekt selber ja auch Platz einnimmt, etwa 350 Pixel. Okay, jetzt kann ich natürlich anfangen, das auszurechnen und so weiter, und so fort. Aber dafür gibt es einen kleinen Trick. Ich gehe hier oben in den Transformieren-Bereich hinein, ich wähle hier die Y Position aus, die kopiere ich jetzt einfach in die Zwischenablage. Ich gehe hier an diese Position, ich füge das jetzt hier ein. Und jetzt gebe ich einfach die Rechenoperation ein, "- 300". Ich drücke die Entertaste. Voilà! Adobe Muse hat das Ganze für mich ausgerechnet. Jetzt habe ich hier diese Position hier, und ich weiß hier oben diese Position soll ebenfalls 300 Punkte kleiner sein. Also gebe ich diesen Wert hier wieder ein. Ich gebe jetzt hier "-300" ein, und hier unten, dort mache ich das Gleiche. Dieser Wert ist ja noch in der Zwischenablage. Auch den füge ich hier ein. Und dort sage ich nun "+350" Pixel, und auch da, Adobe Muse hat das Ganze für mich ausgerechnet. Grau ist alle Theorie. Schauen wir uns das Ganze einmal in der Vorschau an. Das Ganze wird erstellt. Ich fange jetzt von hier oben an nach unten zu scrollen, und jetzt komme ich hier zu meinen Zimmern. Und Sie sehen, das Ganze ist jetzt im Moment noch so leicht ausgeblendet. Hier ist der Effekt nicht ganz so wichtig, hier geht es eher darum, dass wir ein bisschen Dynamik erzeugen, dass das Ganze eingeblendet wird. Wenn ich jetzt weiter nach unten fahre, dann sehen Sie wie dieser Effekt wieder ausgeblendet wird. Und nun kann man wirklich dieses Zimmer in voller Pracht sehen. Braucht man mehr Informationen zum Zimmer, dann kann man ja einfach mit dem Mauszeiger ein bisschen nach oben scrollen. Gehen wir wieder zurück in die Entwurfsansicht. Es gibt nämlich jetzt noch eine weitere Sache, die jetzt hier in Adobe Muse sehr schön ist. Weil dieses Element habe ich jetzt auf all meinen Grafiken hier und da, und so weiter, und so fort. Jetzt könnte ich natürlich hingehen, das Ganze jedes Mal von Hand dort einsetzen. Ich habe Ihnen ja gesagt, wie man das Ganze ausrechnen kann. Zum Glück ist es aber so, dass die Bildlaufeffekte Teil des Grafikstils werden, und diesen Elementen habe ich nämlich ein Grafikstil zugewiesen. Diese Objekte hier sind ja geradezu prädestiniert, um daraus ein Objektstil zu machen. Hier oben mit den abgerundeten Ecken, mit der Transparenz und so weiter, und so fort, Grafikstil. Es gibt eine lokale Überschreibung. Und die lokale Überschreibung ist genau hier unter Bildlaufeffekt. Und jetzt kann ich hier einfach sagen: "Format neu definieren". Damit hat diese Eigenschaft jetzt hier zu diesem Grafikstil hinzu gefunden. Und wenn ich jetzt weiter nach unten scrolle, dann sehen Sie. Dieses Objekt hat auch diesen Bildlaufeffekt automatisch bekommen. Also gehen wir hier in die Vorschau und schauen uns das Ganze dann auch mal systematisch an. Wir scrollen von oben nach unten. Und Sie sehen, das Ganze wird hier eingeblendet, wird hier ausgeblendet. Bei der nächsten Grafik, beim nächsten Bild wird es wieder eingeblendet. Es verschwindet wieder von alleine und so weiter, und so fort. Alles durch die Macht von diesen Bildlaufeffekten in Kombination mit den Grafikstilen. Wunderbar! Wir müssen es nur an einer Stelle sinnvoll definieren und dann wird es allen Objekten, die ähnlich sind, automatisch zugewiesen.

Eine Website mit Muse CC erstellen

Setzen Sie eine gut strukturierte Website mit nur einer Seite um. - Und das ohne eine Zeile Code zu schreiben und mit modernem Parallax Scrolling-Effekt.

1 Std. 9 min (14 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!