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

Eine Website mit Muse CC erstellen

Überblick über Bildlaufeffekte

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Bildlaufeffekte definieren die Bewegung eines Elements im Verhältnis zum vertikalen Bildlauf in einem Webbrowser. Dabei legt der Benutzer die vertikale und horizontale Geschwindigkeit der ersten und letzten Bewegung sowie den Ankerpunkt fest.

Transkript

In diesem Video möchte ich einmal erklären, was es mit den sogenannten Bildlaufeffekten oder auf Englich Parallax Scrolling Effekten auf sich hat. Dazu habe ich mir hier eine Musterdatei angelegt. Ich will Ihnen also erst einmal nicht in unserem lebenden Projekt zeigen, sondern hier an so einer Dummy-Datei. Das besondere ja an dieser Dummy-Datei ist, ich habe hier im Hintergrund Linien aufgezogen, und zwar immer hier in gewissen Abständen, einmal eine bei 100, bei 150, 200 und so weiter und so fort. Und dazwischen gibt es dann auch noch mal jeweils eine Einteilung, sodass dieser Graubereich genau 25 Pixel groß ist, und dieser weiße Bereich dann auch wieder 25 Pixel, damit man das gleich ein bisschen besser sehen kann. Des Weiteren habe ich hier einmal eine Grafik und genau die gleiche Grafik sehen Sie es auf derselben Höhe jetzt hier nochmal rechts. Dieser Grafik hier werde ich nie einen Bildlaufeffekt zuweisen, sondern immer nur der rechts davon liegenden Grafik. Ich habe hier bereits das Bedienfeld Bildlaufeffekte einmal geöffnet und aktiviere den Bildlaufeffekt rund um die Bewegungen. Ich habe jetzt an den Einstellungen hier nichts geändert, ich lasse also die Standardeinstellungen. Ich will Sie nur kurz ein bisschen darauf aufmerksam machen, was jetzt hier drin steht und zuerst bitte ich Sie mal, den Fokus hier oben auf diesen Bereich zu richten, die erste Bewegung. Letzte Bewegung schauen wir uns mal gleich an. Dann ist dieser erste Bewegungsbereich aufgeteilt in die vertikale Geschwindigkeit, da steht im Moment eine Null drin, und in horizontale Geschwindigkeit, dort steht eine Eins drin. Gut, Sie merken sich also bitte, bei vertikaler Geschwindigkeit steht eine Null drin, bei horizontaler Geschwindigkeit steht eine Eins drin. Jetzt gehen wir einfach mal hier in die Vorschau und schauen uns an, was passiert. Das erste, was auffällt, dass diese Grafik nicht an der Position liegt, an der ich sie vorhin positioniert habe. Wenn ich mich jetzt nun hier auf der Seite aufhalte und nun anfange, mit dem Mausrädchen nach unten zu scrollen, dann sehen Sie, was passiert. Die Grafik bewegt sich. Was weiterhin auffällt, die Grafik bewegt sich sowohl horizontal als auch vertikal und gelangt dann zu ihrer Endposition. Gehen wir wieder zurück in die Entwurfsansicht und schauen uns das Ganze ein bisschen näher an. Also, wir haben hier eine Bewegung. Vertikale Geschwindigkeit und dies auf Null gesetzt. Trotzdem werden Sie sich vielleicht wundern, warum bewegt sich die Grafik, denn trotzdem vertikal, obwohl die Geschwindigkeit hier ja auf Null gesetzt ist. Das hat einen einfachen Grund und zwar wenn ich nach oben und unten scrolle, dann bewegt sich die Seite ja auch. Die Seite bewegt sich und jetzt gebe ich hier an, wie die vertikale Bewegung sein soll, bezogen auf diese Grafik. Wenn man also will, die Grafik bleibt exakt an der Position stehen. Man hat nur den optischen Eindruck, dass sie sich bewegt, weil sich der Hintergrund bewegt. Das können wir uns noch mal in der Vorschau anschauen und Sie sehen, ich lasse den Mauszeiger jetzt hier genau an dieser Position. Hier horizontal muss sich die Grafik ja bewegen, aber wie sieht es mit der vertikalen Bewegung aus? Und jetzt werde ich das Mausrädchen bewegen und Sie sehen, die Grafik bewegt sich gar nicht hier auf dieser Ebene, sondern der Hintergrund bewegt sich und dadurch bekommt man den optischen Eindruck, dass sich diese Grafik bewegt. In Wirklichkeit ist das aber nicht so. Wenn wir jetzt hier nämlich nach unten scrollen, dann sehen Sie, die Grafik, also auch die jetzt erstmal ohne Bildlaufeffekte bewegt sich ja. Also wir haben grundsätzlich eine Bewegung, und zwar immer bezogen zum Hintergrund. Das muss man sich einfach einmal verdeutlichen. Und wenn Sie das jetzt auf Anhieb nicht verstanden haben, dann habe ich großes Verständnis dafür. Probieren sie es einfach selber mal aus. Ich habe selber auch recht lange dafür gebraucht, um das Grundprinzip an dieser Stelle zu verstehen. Dann haben wir hier den Punkt Letzte Bewegung. Also die Grafik kommt an einer bestimmten Position an und dann gibt es auch eine Bewegung und hier haben wir jetzt die Bewegung vertikale Geschwindigkeit, also nach oben, mit dem Geschwindigkeitsfaktor Eins, das heißt diese Grafik hier bewegt sich exakt genauso schnell wie der Hintergrund. Sie bewirkt sich nicht horizontal, deswegen bleibt sie im Verhältnis dort jetzt stehen. Wenn man jetzt auf die Idee kommt, Naja, was ist denn, wenn ich jetzt hier eine Null eintrage, und hier jetzt eine Eins eintrage, Dann müsste sich die Grafik doch eigentlich jetzt genauso schnell bewegen wie der Hintergrund, und dann habe ich zwar hier einen Bildlaufeffekt zugewiesen aber eigentlich müsste diese Grafik genauso ausschauen wie diese Grafik. Und probieren wir das einmal aus. Ja genau, das ist letztendlich der Effekt. Wenn ich also hier eine Eins eintrage, da eine Null, da eine Eins, da eine Null, dann ist das so, als gäbe es jetzt hier keinen Bildlaufeffekt, bezogen auf die Bewegung. Schauen wir uns das Ganze jetzt noch an ein paar weiteren Beispielen an, und dazu werde ich diese Grafik einmal ein bisschen weiter nach unten ziehen. Und es geht mir wieder hier um diese Grafik und ich möchte, dass sie sich bewegt, und zwar werde ich das jetzt hier wieder auf Null setzen und das hier auf Eins. Und das lasse ich jetzt erstmal so, damit wir einfach den Effekt sehen können. Bitte beachten Sie! Diese Position hier, diese Ankerposition, die ist im Momentauf 250 Pixel. Schauen wir uns an, was diese Ankerposition nämlich bedeutet. Die Grafik liegt jetzt hier. Wenn ich jetzt nach unten scrolle, dann kommt die Grafik an, und zwar in ihrer Endposition. genau dann, wenn ich hier oben bei dem Herausscrollen hier auf die 250 Bildpixel komme. Das ist also der entscheidende Punkt, dann, wenn das jetzt hier am oberen Bildschirmrand erfüllt ist. Das ist quasi meine Endposition. Sie ahnen es jetzt schon. Wenn ich das jetzt hier auch umstelle, von Null auf Eins und das Ganze jetzt noch einmal ausprobiere, dann ist es so, dass die Grafik jetzt hier bei 250 Pixel die Endposition erreicht. Wenn ich jetzt noch weiter nach unten scrolle, dann wird diese Grafik nach rechts rausgeschoben. Wenn ich sehr weit nach unten scrollen kann, dann verschwindet die Grafik sogar.

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!