Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Muse CC Grundkurs

Der Bildlaufeffekt im praktischen Beispiel

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein Bildlaufeffekt wird auf eine bestehende Website angewendet, wobei eine Grafik vom linken Bildrand an die vorgesehene Position bewegt wird. Hierbei ist die Eingabe der korrekten Werte von großer Bedeutung.

Transkript

Nachdem man die Bildlaufeffekte grundsätzlich verstanden hat, möchte man sie natürlich auch mal an konkretes Projekt anwenden. Und genau das möchte ich hier auf dieser Seite einmal machen, und zwar möchte ich, das dieses Objekt hier, dieses Bild nicht von Anfang an hier an dieser Stelle zu sehen ist, sondern dass das später erst bei dem Herunter-scrollen rein gefahren wird, um so ein bisschen mehr Dynamik hier auf dieser Webseite zu erzeugen. Ich wähle dazu hier dieses Objekt aus und aktiviere nun hier diese Bildlaufeffekte, diese Bewegung. Jetzt muss man hier natürlich die Zahlen einstellen, und zwar die Zahlen müssen so gewählt werden, dass das Ganze grundsätzlich funktioniert. Ich werde jetzt hier mal hingehen und werde jetzt hier mal den Anker, den Startpunkt bei 550 Pixel setzen, und ich kann Ihnen jetzt schon sagen, das ist nicht der korrekte Wert, aber um es einfach mal zu demonstrieren. Und jetzt gehe ich hier in die Vorschau hier hinein. Und wenn ich jetzt hier herunter scrolle, dann passiert jetzt folgendes: das Bild wird jetzt hier eingeblendet. Das ist also richtig. Aber, das Bild kommt nicht dort an, wo es eigentlich hin soll. Weil ich bin jetzt hier schon am Ende der Seite angekommen und ich kann jetzt hier nicht mehr weiter herunter scrollen. Der Punkt hier wird also nie erreicht, mit anderen Worten, hier dieser Wert, der ist zu groß gesetzt. Die Ankerposition ist zu weit hinten. Nehmen wir mal einen anderen Wert, und auch da kann ich Ihnen auch schon verraten, auch das ist nicht der korrekte Wert. Der Wert wird jetzt gleich zu früh los gehen. Und wenn ich jetzt wieder in die Vorschau gehe, dann sehen Sie, man sieht das Bild jetzt hier bereits. Jetzt ist es so, wenn ich jetzt hier nach unten scrolle, kommt das Bild zwar dort an, wo es hin soll. Das funktioniert also wunderbar, aber das Ganze ist natürlich jetzt hier nicht so wirklich schön, wenn man das Bild hier schon sieht. Die Kunst der ganzen Sache liegt also jetzt darin, hier die richtigen Zahlenwerte zu finden. Und man kann das Ganze auch ausrechnen. Man muss die Objektgröße wissen, man muss wissen, wo das Objekt später hinkommt, und dann kann man das letztendlich ausrechnen, was hier der ideale Startpunkt ist. Ich persönlich benutze das allerdings nie, ich persönlich rechne das Ganze nie aus, sondern ich mache das immer ein bisschen nach Versuch und Irrtum. Also ich versuche mich hier die Zahlen zu nähern, und hier, ich habe es bereits im Vorfeld einmal ausprobiert, der ideale Wert ist jetzt hier die 436. Und ich denke auch gerade, in einem Programm wie Adobe Muse ist man eher dazu geneigt, so etwas auszuprobieren. Und man wird es vermutlich eher nicht ausrechnen. Schauen wir das Ganze nun an. Ich gehe mal hier wieder in die Vorschau, und nun sehen Sie, es wird das Ganze hier hereingefahren, und das Objekt kommt auch dorthin, wo es hin soll. Wenn man jetzt genau hinschaut, dann sieht man das Objekt allerdings doch hier ein klitzekleines bisschen. So ganz perfekt ist es also noch nicht. Und ich kann hier aber verraten, wenn ich 435 Pixel nehme - ist es zu viel, 437 - es ist auch zu viel. Also 436 ist es schon der optimale Wert. Was ich jetzt noch machen kann, ich kann hier schlicht in der Grafik die Geschwindigkeit einer Tacken erhöhen, hier also einfach um 10% drauf setzen. Und dann fährt das Objekt natürlich schneller herein. Und wenn ich jetzt in die Vorschau gehe, dann habe ich genau das, was ich haben möchte. Man sieht das Objekt noch nicht. Wenn ich jetzt nach unten scrolle, dann landet das Objekt. Und dass das jetzt hier um 10% schneller ist, das wird man sicherlich nicht sehen. Zumindest wird man es dann nicht sehen, wenn nur ein Objekt auf der Seite abgebildet ist. Jetzt habe ich also die Möglichkeit - hier diese Bewegung. Es gibt noch eine zweite Variante, die man sehr-sehr häufig mit dieser Variante kombiniert. Ich kann nämlich bei den Bildlaufeffekten mir auch die Deck-Kraft einstellen. Und wenn ich jetzt hier die Deck-Kraft einstelle, auch da wieder habe ich jetzt die Konstellation, dass ich jetzt hier an diesen Zahlwerten ein wenig herumspielen muss. Ich gehe wieder in die Vorschau und gucke mir mal an, ob das jetzt schon so ist, wie ich es gerne haben möchte. Wenn ich hier nach unten scrolle, dann sehen Sie, jetzt kommt das Objekt. Wenn ich jetzt so ein bisschen weiter scrolle, obwohl ich auf der Seite eigentlich nicht weiter scrollen kann, dann würde das Objekt wieder ausgefaded werden. Und dieser Überblendeffekt, der ist aber wirklich sehr-sehr kurz. Aaah, das kann man hier an diesem Beispiel ganz gut sehen, er ist sehr-sehr kurz. Das gefällt mir also nicht. Ich muss also hier dafür sorgen, dass es beim Heraus- oder beim weiter Herunter-Scrollen nicht wieder ausgeblendet wird. Hier dieser Punkt- 336 Pixel, diese Verblassenpostion, die ist zu weit nach unten gesetzt. Das Ganze muss ich hier reduzieren auf beispielsweise mal 250 Pixel. Wenn ich jetzt in die Vorschau hinein gehe, dann nach unten fahre, dann sehen Sie, dann setzt dieser Überblendeffekt früher ein, und das Ganze ist dadurch ein bisschen geschmeidiger, weil dieser Überblendeffekt dann auch weiteren Weg zurückgelegt. Und wie bereits jetzt mehrfach gesagt, ich persönlich würde Ihnen empfehlen, mit diesen Zahlen einfach ein bisschen herumzuexperimentieren, bis Sie den idealen Punkt gefunden haben. Man kann es auch ausrechnen, aber gerade in einem Programm wie Adobe Muse komm ich zu mindestens nicht auf die Idee so etwas auszurechnen, sondern das Prinzip Trial Error siegt dort. Noch ein letzter Hinweis hier, zu diesen Bildlaufeffekten. Setzen Sie diese Bildlaufeffekte bitte sparsam ein. Es geht darum, mit den Bildlaufeffekten die Botschaft, die Sie haben, besser zu vermitteln. Es geht nicht darum, dass Sie den Webseitenbesuchern beweisen, dass Sie die Bildlaufeffekte einsetzen können. Also setzen Sie sie bitte eher sparsam ein, und nur da, wo es wirklich Sinn macht.

Muse CC Grundkurs

Lernen Sie mit Muse CC Websites zu erstellen, ohne HTML beherrschen zu müssen, und erfahren Sie alle Schritte von der Planung über den ersten Entwurf bis zur Veröffentlichung.

6 Std. 55 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.07.2014

Dieses Training wurde mit dem Release von Muse CC aus dem Jahr 2014 aufgezeichnet.

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!