Fließende Hintergrundgrafik

fuerteventura-2007 schrieb am 02.01.2017 um 16:55 Uhr

Hallo Forum,

in diesem Beispiel sieht man einen Effekt, dass der Vordergrund der Seite über dem Hintergrunf zu schweben scheint, dieser sich aber beim Scrollen ebenfalls (mit anderer Geschwindigkeit) bewegt. Ich bin kein so großer Fan dieses One-Page-Designs, aber manchem gefällt's ja... 😋

Mir fehlt die Phantasie, wie ich soetwas mit dem Web Designer Premium (aktuell Version 11) realisieren kann. Hat vielleicht jemand einen heißen Tipp für mich?

Vielen Dank und beste Grüße
Michael

Kommentare

BeRo schrieb am 02.01.2017 um 17:44 Uhr

Die Funktion, die Du suchst, heißt "Parallax Scrolling".

Der neue WD (12) prem. hat die Funktion schon beim Kauf an Bord. In der Hilfedatei liest sich das so:

---------------------------
"Parallax-Scrolling ist eine Animation, bei der mehrere Objekte auf der Seite in verschiedener Geschwindigkeit scrollen, um einen Parallaxe-Effekt zu erzeugen Parallax erscheint als oberster Eintrag in der Liste der Scroll-Animationstypen. Mit dem Schieberegler Geschwindigkeit bestimmen Sie, wie schnell Objekte im Verhältnis zu den anderen Objekten auf der Seite scrollen. Ist der Wert sehr klein, bewegt sich das Objekt kaum, während alle anderen Objekte an ihm vorbei scrollen. Ist der Wert sehr hoch eingestellt, scrollt das Objekt fast genau so schnell wie der restliche Seiteninhalt. Die nützlichsten Werte für die Geschwindigkeit sind daher mittlere, eperimentieren Sie ruhig auch mal mit verschiedenen Geschwindigkeiten."
--------------------------

Dass es auch mit den älteren Versionen des WD möglich ist, wird in diesem Thread des englischen Magix Forums gezeigt und erklärt.
Da findest Du auch lauffähige Projektdateien zum Download, für den WD10 und WD11.

Schau's Dir mal an.

Viel Erfolg

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

fuerteventura-2007 schrieb am 02.01.2017 um 18:56 Uhr

Hallo BeRo,

wie immer eine sehr große Hilfe!!!

Ich habe mir den Update auf die Version 12 noch nicht gegönnt, weil ich bisher nicht so viele neue und sinnvolle Funktionen entdecken konnte. Toll, dass Parallax-Scrolling auch mit WD11 zu funktionieren scheint. Der einzigen Unterschied im Beispiel aus dem englischen Forum scheint zu sein, dass das Hintergrundbild eben nicht mit unterschiedlicher Geschwindigkeit mitscrolled (background-attachment: fixed !important;). Aber so schlimm finde ich das jetzt nicht. Und es ist ein hübsches Feature für Liebhaber der One-Pager...

Viele Grüße
Michael Obser

fuerteventura-2007 schrieb am 10.07.2017 um 11:27 Uhr

Hallo BeRo,

ich habe mich jetzt erstmals mit WD12 Pro an das Thema Parallax Scrolling gewagt. Und es gelingt mir nicht, o. g. Beispiel nachzustellen... 😞

Motiv "Enjoy Dairy Free" vor dem grünen Hintergrund mit Eisbecher.

  • Zusätzlich zur Schrift habe ich PNG-Bilder, die über dem Hintergrund schweben sollen.
    Die Elemente verschwinden aber nach oben aus dem Hintergrund.
    Zudem erscheinen die PNG-Bilder nicht mehr transparent, sondern übernehmen einen Teil des Hintergrundes (s. u.).

Mein grüner Hintergrund soll sich so verhalten wie in o. g. Beispiel - bekomme ich das mit WD12 hin?

Vielen Dank im Voraus und beste Grüße
Michael

marboe schrieb am 10.07.2017 um 12:14 Uhr
Zudem erscheinen die PNG-Bilder nicht mehr transparent, sondern übernehmen einen Teil des Hintergrundes (s. u.).

Hallo Michael,

da du sie ja scheinbar richtig als "png" deklariert hast (Webeinstellungen -> Bild) nur zur Sicherheit die Frage: du hast sie aber schon in einer Backgroundebene? Da würden sie hingehören 😉. Sonst klappt das nicht.

Die Elemente verschwinden aber nach oben aus dem Hintergrund.

Hast du sie fixiert?

Du siehst, ein paar mehr Infos oder Bilder wären gut 😂

Gruß Marboe

fuerteventura-2007 schrieb am 10.07.2017 um 18:45 Uhr

Hallo Martina,

erwischt!
Im WD waren die Bilder vor dem Hintergrund zwar transparent, die Einstellung lautet aber "WD den Typ automatisch wählen lassen". Nach der Umstellung an dieser Stelle auf PNG sind sie auch beim Scrollen transparent - super.

Ansonsten stehe ich aber auf dem Schlauch... - hab wohl das Prinzip noch nicht verstanden!

Auf der Seite habe ich (alle auf der Ebene mouse-over):

  • Das Bild mit dem Mecki.
    Keine Animation, keine Fixierung.
  • Den Schriftzug Events.
    Keine Animation, keine Fixierung.
  • Den blauen Hintergrund über die gesamte Breite.
    Scroll-Animation Parallax, Geschwindigkeit 7.

Es sollen dann noch ein paar weitere Objekte durch den grünen Hintergrund scrollen, aber als Beispiel soll dies genügen.

Bild 1 zeigt die Ebenen-Einstellungen

BIld 2 zeigt den Ausgangszustand im WD12

Bild 3 zeigt die Animation in der Vorschau - die Bilder scrollen aus dem Hintergrund heraus...

Ich möchte aber gern so etwas bekommen (siehe hier)

Aber leider keine echte Vorstellung, wie ich das anstellen kann.

Viele Grüße
Michael Obser

 

marboe schrieb am 11.07.2017 um 12:21 Uhr

Lade dir doch mal die Vorlage "able" und forsche dort, wie der ParallaxEffekt dort eingebaut ist. Hab ich auch so gemacht 😀


Die Bilder, die langsamer scrollen sollen - also "überholt" werden, die bekommen den Parallax-Effekt. Die anderen Bilder, die "drüberhuschen" bleiben mit normalen Einstellungen.

Viele Grüße Martina

fuerteventura-2007 schrieb am 12.07.2017 um 11:39 Uhr

Hallo Martina,

habe ich gemacht 😁.

So habe ich es in meinem Beispiel auch umgesetzt. Aber das ist eben meilenweit von dem entfernt, was das zitierte Beispiel zeigt. Dieser "Überdeckungs-Effekt" des vorherigen / nachfolgenden Contents ist es, den ich gern nachbauen möchte - und da fehlt mir noch die zündende Idee...

Viele Grüße
Michael

marboe schrieb am 12.07.2017 um 13:50 Uhr

Dazu ist Hilfe echt schwierig...

Du hättest also gerne mehrere Ebenen, die du jeweils getrennt gesteuert haben möchtest. Das geht nicht so einfach. Der WD kann nur 2 Ebenen untereinander verschieben soweit ich weiß.

Deine unterste Bild/Hintergrundebene sollte also nicht nur aus einem Element bestehen, sondern sollte bereits auch das Bild enthalten, welches dann als zweites hineingescrollt werden soll. Natürlich mit einer entsprechenden Lücke dazwischen. Denn da kommt ja Text oder auch Bild hin - der dann drüber hinwegscrollt.

In deinem Beispiel von WIX müsste also der Beereneisbecher, der Smartieseisbecher und der grün/grau-gestreifte Hintergrund als ein "Bild" angelegt werden. Wie groß die Lücken dazwischen sein müssen, ist sicher Futzelarbeit. Im WD kann man das ja dann aber wengistens super gruppieren.
Das dies nur bei Onepagern Sinn macht, ist klar. Probiere doch mal mit dem Ansatz weiter. Gruß Marboe

fuerteventura-2007 schrieb am 13.07.2017 um 23:28 Uhr

Hallo Martina.

Dazu ist Hilfe echt schwierig...

Da stimme ich Dir zu. Inzwischen bin ich an der Aufgabe schier verzweifelt... Dabei geht es mir noch nicht einmal um die Komposition von drei Effekten wie im Beispiel - mir würde es völlig ausreichen, wenn ich EINEN Effekt wie den mit den Eiskugeln vor dem grün-gestreiften Hintergrund hinbekommen würde... Schön wär's...

Eigentlich müsste die Paralax-Geschwindigkeit des Hintergrundes 0 (oder zumindest ein sehr kleiner Wert) sein. Aber dann scrollt das Bild im Vordergrund aus dem Hintergrund heraus und wird nicht - wie im Beispiel - durch den Content darüber abgedeckt. Außerdem taucht bei kleiner Parallax-Geschwindigkeit dann irgendwann auf der Seite der "träge" Hintergrund wieder auf, weil er ja so langsam scrollt... Man kann das möglicherweise verhindern, indem man ein großes Rechteck in Seitenhintergrundfarbe darüber legt. Aber ob das dann alles bei unterschiedlichen Bildschirmauflösungen und erst recht unterschiedlichen Devices noch passt?

Das "Abdecken" wird auch in diesem YouTube-Tutorial beschrieben:

Aber nur ein Teil davon. Im Tutorial sieht man über dem Hintergrund den fixierten Header - und der steht natürlich über allen anderen Objekten und verhindert, dass etwas nach oben aus dem Hintergrund herausscrollt.

Du hattes mich noch einmal mit Deiner Bemerkung zu den Ebenen auf eine Idee gebracht. Ich habe einfach mal eine Ebene "Parallax" unterhalb der Ebene MouseOver angelegt und etwas experimentiert (Hintergrund mit Prallalx-Effekt eingefügt, auch die Grafiken davor eingefügt). Aber am enttäuschenden Ergebnis hat auch das nichts geändert.

Muss ich mich wohl von der hübschen Idee verabschieden - wie auch immer das im Beispiel von Wix realisiert wurde - mit dem WD scheint das nicht zu funktionieren. Das ist halt ein Problem - die Leute sehen irgendwo im Internet einen hübschen Effekt und wollen den auf ihrer Homepage haben - und dann muss man beichten, dass das mit dem WD nicht umzusetzen ist...

Viele Grüße
Michael

marboe schrieb am 14.07.2017 um 19:31 Uhr

Ich habe mich aufgrund meiner doch größeren Projekten noch nicht großartig mit Onepagern beschäftigt.

Aber wahrscheinlich hast du recht. Das Template von wix gefällt mir auch sehr gut. Vielleicht ist es auch schön wenn nur ein Teil umgesetzt wird. Gruß marboe

fuerteventura-2007 schrieb am 14.07.2017 um 23:08 Uhr

ja - wenn ich doch nur die geringste Idee hätte, wie...

Wie gesagt vermute ich bei wix eine Bootstrap-Funktion, habe das an anderer Stelle auch schon gesehen. Aber das ist für mich noch ein Buch mit sieben Siegeln.

Eigentlich etwas für unseren Code-Gandalf BeRo, oder? 😉

Viele Grüße
Michael

marboe schrieb am 15.07.2017 um 07:22 Uhr

wenn ich EINEN Effekt wie den mit den Eiskugeln vor dem grün-gestreiften Hintergrund hinbekommen würde

Das halte ich noch nicht mal für so schwierig.

Erstelle einen grün-weiß gestreiften Hintergrund und fixiere ihn.

Dann erstelle ein Bild (png) aus folgendenden markierten Elementen:

Also: Eiskugeln, Tüte, weißes Rechteck und Bild drunter.

Abgespeichert durchgängig als png damit die Kugeln auch wirklich freigestellt sind. Rechteck brauchst du nur, wenn die Tüte hineinragen soll. (Ansonsten geht es einfacher s.u. im nächsten Beitrag).

Für diesen Effekt brauchst du noch nicht mal Parallax, sondern lässt das Eis einfach über den gestreiften, fixierten Hintergrund laufen.
Es ist möglich, dass dein kreiertes png evtl. in die Pagebackgroundebene muss. Probiere das mal. 😉 Gruß Marboe

marboe schrieb am 15.07.2017 um 07:44 Uhr

Nein, dass png muss nicht in den Hintergrund. Hab das mal schnell nachgebaut. Funktioniert 😀

 

Was allerdings nicht so einfach zu lösen ist, ist die Tatsache, dass das Eis-png nicht sinnvoll mit der Funktion "ganze Breite" ausgestattet werden kann. Dann sieht man leider je nach Browserfenstergröße nur einen Teil des Bildes. Man müsste also das png in großer Breite einbauen, damit alle Fenstergrößen abgedeckt wären.

Die Einstellung "mit voller Höhe" bringt auch nur Quatsch.

 

Deswegen würde nur die Kugeln und die Tüte in das png bringen. Den Rest separat anlegen mit
Rechteck + Text usw.
Das könnte so aussehen:

Dann ist der Text auch für Bots lesbar.

Angelegt so:
Wenn die Kugeln am Rand sauber freigestellt sind, dann sieht das sicher nicht schlecht aus.

fuerteventura-2007 schrieb am 15.07.2017 um 12:15 Uhr

Hallo Martina,

wäre es möglich, dass Du Dein Beispiel-Projekt zum Download bereitstellst?

Herzlichen Dank im Voraus
Michael

BeRo schrieb am 15.07.2017 um 13:32 Uhr

[...] etwas für unseren Code-Gandalf BeRo [...]

Hat da jemand meinen Namen gerufen? 😎
Ich hab's ein bisschen spät gesehen, aber wie sagte Gandalf so passend: “Ein Zauberer kommt nie zu spät, Frodo Beutlin, ebenso wenig zu früh. Er trifft genau dann ein, wenn er es beabsichtigt.“ 😁

Lies Dir mal dieses Turorial durch. Da wird eine Lösung mit CSS beschrieben, die IMHO auch für eine Site übernommen werden kann, die mit dem WD gemacht wurde.
Ausprobiert habe ich das nicht, aber die Beschreibung- und der gezeigte CSS Code machen einen guten Eindruck.

Probier's mal.

Alternativ findest Du hier eine einfache-, CSS basierte Lösung, die vor ca. 2 Jahren im englisch sprachigen Xara Forum vorgestellt wurde. Da gibt es auch eine Demo zum Download.

Viel Erfolg

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

fuerteventura-2007 schrieb am 15.07.2017 um 19:45 Uhr

Hallo BeRo,

herzlichen Dank für Deine Hinweise! Ich habe mich an die zweite Lösung gewagt, die wunderbar funktioniert - auch für mehrere Parallax-Effekte auf der Seite.

Ich habe lediglich ein kleines Problem mit der Darstellung des Hintergrundbildes:

<style>
.parallax  {
  background-attachment: fixed !important;
  background-position: top center !important;
  background-size: cover !important;
}
</style>

Mit background-size: cover wird das Bild offenbar auf die gesamte Breite des Anzeigebereiches (also des Browser-Fensters?) vergrößert, was nicht gut aussieht und auch nicht erforderlich scheint.

Setze ich explizit die Seitenbreite ein (hier 960px), so wird das BIld zwar korrekt unvergrößert dargestellt, aber es blättert sich erst bei Scrollen auf die volle Höhe, ist also beim Start gar nicht zu sehen. Auch blöd...

Ich habe mit allen möglichen Parameters für Breite und Höhe experimentiert, erhalte aber immer eines von beiden Ergebnissen:

  • entweder vergrößert
  • oder "amputiert"

Zudem ist die explizite Angabe der Seitenbreite in Pixel nun wirklich nicht praktisch.

Irgendetwas muss ich hier doch übersehen, oder?

Viele Grüße
Michael

BeRo schrieb am 15.07.2017 um 22:10 Uhr

[...] Ich habe mit allen möglichen Parameters für Breite und Höhe experimentiert [...]

Vielleicht doch noch nicht mit allen möglichen... 😎

Lies Dir mal die Infos durch, die Du im MDN (Mozilla Developer Network) zu dem Thema findest.

Viel Erfolg

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

fuerteventura-2007 schrieb am 15.07.2017 um 22:46 Uhr

Die Seite hatte ich auch schon gefunden, aber verstehe offenbar Parameter nicht richtig. Ich hatte vermutet, dass das Bild mit "auto auto" in seiner definierten Größe angezeigt wird - aber denkste...

Ich hoffe, Gandalf hat noch einen Tipp für mich... 😊

BeRo schrieb am 15.07.2017 um 23:20 Uhr

Hast Du es mal mit 2 definierten Prozentwerten versucht?

<style>
.parallax  {
  background-attachment: fixed !important;
  background-position: top center !important;
 background-size: 90% 100% !important;
}
</style>

Wie auch auf der Seite des MDN beschrieben, werden Hintergrundgrafiken recht unterschiedlich gerendert, abhängig davon, ob sie als Bitmap oder als Vektorgrafik implementiert wurden. Eventuell nimmt auch die Position (Ebene) der Hintergrundgrafik Einfluss auf die Darstellung.
Klar, dass auch andere eventuell noch laufende Scriptlets die Darstellung beeinflussen können. 😫

Um "fremde" Einflüsse möglichst auszuschließen, macht es Sinn, die Experimente auf einer ansonsten "weißen" Seite durchzuführen. Erst wenn der Parallax Effekt sauber funktioniert würde ich die restlichen Objekte der Seite sukzessive einbauen.

Ich drück' Dir mal die Daumen, dass es so klappt... 😉

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

fuerteventura-2007 schrieb am 16.07.2017 um 12:48 Uhr

Hallo BeRo,

zwei Prozentwerte führen nicht zur Lösung, das Bild wird immer skaliert und verzerrt.

Das beste Ergebnis erziele ich mit "auto" bzw. "auto auto", dann wird das Bild weder skaliert noch verzerrt! Nur ist initial unsichtbar und wird erst beim Scrollen aufgezogen, was ein bisschen absonderlich wirkt 😉.

Wenn ich also dieses absonderliche Verhalten noch abstellen könnte wäre ich am Ziel...

Viele Grüße
Michael

BeRo schrieb am 16.07.2017 um 14:56 Uhr

[...] zwei Prozentwerte führen nicht zur Lösung [...]

Der Test, den ich mit der Demo aus dem Xara Forum gemacht habe, zeigte bei Veränderung der Prozentwerte, die erwarteten Ergebnisse, ohne Verzerrungen der Hintergrundgrafik.

Da das bei Dir anders aussieht, könnte die Ursache in der Anordnung-, bzw. am Typ der für den Effekt benutzten Objekte liegen.
Ggf. spielen auch noch andere, aktive Scriptlets eine Rolle, etc...
Eine brauchbare Ferndiagnose ist dann kaum noch realisierbar. Sorry.😣

Hast Du denn mal meinen Tipp versucht, den Parallax Effekt auf einer ansonsten leeren Seite zu testen?

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

fuerteventura-2007 schrieb am 16.07.2017 um 22:04 Uhr

Hast Du denn mal meinen Tipp versucht, den Parallax Effekt auf einer ansonsten leeren Seite zu testen?

NATÜRLICH! Direkt in der besagten Demo aus dem Xara Forum.

ABER: ich habe versäumt mitzuteilen, dass ich das Hintergrundbild für meine Seite nicht ausgedehnt benötige, diesen Effekt also abgeschaltet habe. Gebe ich dann nur den Wert "auto" mit kommt es zu dem merkwürdigen Effekt, dass sich das Hintergrundbild erst beim Scrollen aufbaut - dann allerdings in den gewünschten Dimensionen. So dachte ich, dass ich nur noch den passenden zweiten Parameter für die Höhe benötige, aber den hab ich noch nicht gefunden. Eine Prozentangabe führt zu keinem zufriedenstellenden Ergebnis.

Magst Du das so noch einmal ausprobieren?