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
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
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
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.
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
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
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):
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
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
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
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
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
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
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
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
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.
Hallo Martina,
wäre es möglich, dass Du Dein Beispiel-Projekt zum Download bereitstellst?
Herzlichen Dank im Voraus
Michael
[...] 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
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:
Zudem ist die explizite Angabe der Seitenbreite in Pixel nun wirklich nicht praktisch.
Irgendetwas muss ich hier doch übersehen, oder?
Viele Grüße
Michael
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... 😊
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... 😉
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
[...] 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?
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?
Hallo Forum, hallo BeRo,
ich habe es nun doch tatsächlich geschafft, den gewünschten Effekt nach o. g. Anleitung auf meiner Seite zu implementieren 😉. Es bleibt nur noch ein Problem:
Ich habe den Effekt für zwei Objekte implementiert und entsprechend zwei (inhaltlich identische) Parallax-Effekte angelegt. Beim Export berücksichtigt der WD aber nur den ersten Effekt. Die Suche im Code ergibt folgendes:
<style>
.par_Mecki {
background-attachment: fixed !important;
background-position: top center !important;
background-size: auto !important;
}
</style>
<style>
.par_BASF {
background-attachment: fixed !important;
background-position: top center !important;
background-size: auto !important;
}
</style>
</head>
...
<span class="xr_ar par_Mecki" style="left:0px;top:3753px;width:1400px;height:544px; background:url('index_htm_files/2774.jpg') 0px 0px no-repeat;"></span>
<img class="xr_ap par_BASF" src="index_htm_files/2777.jpg" alt="" title="" style="left:0px;top:4841px;width:1400px;height:549px;"/>
par_Mecki funktioniert also, par_BASF funktioniert nicht.
Ich habe die htm-Datei einfach einmal mit der Hand am Arm wie folgt geändert:
<span class="xr_ar par_BASF" style="left:left:0px;top:4841px;width:1400px;height:549px; background:url('index_htm_files/2777.jpg') 0px 0px no-repeat;"></span>
Und schon funktioniert auch der zweite Effekt wunderbar!
Ich habe aber keine Idee, warum der WD den zweiten Effekt anders exportiert als den ersten? Bei beiden handelt es sich um ein beschnittenes JPG auf der Ebene MouseOff. Aber etwas mache ich vermutlich falsch...
Vielen Dank im Voraus für jede Idee!
Viele Grüße
Michael
PS: Habe es auch auf einer komplett neuen und sonst leeren Seite ausprobiert - der Effekt ist der selbe...
NACHTRAG:
Das Problem saß wohl doch vor dem Bildschirm...
Ich habe das zweite Bild entfernt, das erste Bild kopiert und das JPG des zweiten eingefügt. Und siehe da: es funktioniert! Es muss also doch am Container für das zweite Bild gelegen haben...
Übrigens:
Ich habe beiden Bildern den selben Style zugeordnet, auch das funktioniert. Ich muss also wohl doch nicht für jeden Effekt einen eigenen Style anlegen...
[...] Ich muss also wohl doch nicht für jeden Effekt einen eigenen Style anlegen [...]
Das ist korrekt. Du musst lediglich darauf achten, dass die Bilder unterschiedlichen Klassen zugewiesen werden, wenn sie unterschiedlich dargestellt werden sollen. Aber das hast Du vermutlich schon selbst gesehen... 😊