3D-Effekt beim Scrollen

Hi Leute,

mir ist ein toller Effekt auf http://www.xperiastudio.com/ aufgefallen. Wenn man nach unten scrollt, bewegt sich auch die Hintergrundgrafik unten, allerdings nicht so schnell wie der content und der ganze vordere Bereich. So entsteht ein 3D Effekt. Ist so etwas im HPBK auch möglich?

Würde mich über jede Antwort freuen,

mfG stopfermaxi

Ja klar, so etwas kannst du dir mit JavaScript zusammenbauen.
Folgende Funktion ist dabei ganz hilfreich: http://de.selfhtml.org/javascript/objekte/window.htm#page_y_offset
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

Danke für den Link!
Allerdings weis ich nicht ganz, was ich damit anfangen soll, ich arbeite bloß hobbymäßig mit javascript, ohne die Sprache je professionell erlernt zu haben Kann man diesen Code etwa so umschreiben, dass das Hintergrundbild langsamer scrollt, als der content?

Hallo,

du brauchst das nicht umschreiben, du kannst es aber nutzen um dir die entsprechende Funktion zu programmieren. Alleine mit dieser Methode kommst du aber auch nicht weit.

Ich glaube nicht, dass du dir es selbst erstellen möchtest. Deshalb verschiebe ich mal nach ich suche, vielleicht macht es dir jemand.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

HIER_DIE_URL_ZUM_BILD durch deine Bild-URL ersetzen, oder falls deine Homepage ein Hintergrundbild hat, welches für den body-Tag gilt, einfach die Zeile entfernen.

Wenn man den Scrollbalken langsam zieht, sieht der Effekt recht flüssig aus, nutzt man aber das Scrollroad, so wird es schnell sehr eckig. Zumindest ist das bei mir der Fall. Wenn man es also wirklich flüssig haben will würde ich den Hintergrund unabhängig vom Scrollen verschieben. Also so, dass der Hintergrund Zeit hat, zur aktuellen Scrollposition nachzurutschen, um so das Zittern abzufangen.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

Also auf jeden Fall erst einmal vielen Dank für die Mühe mit dem Skripten Aber leider ist es eben ziemlich rucklig Auf der Xperia-Seite muss also wohl ein etwas anderes Mittel eingesetzt worden sein. Kennt das vielleicht jemand?

Also ich bin ja auch nur hobby-Baster was JavaScript angeht, aber du hättest dich ruhig auch mal einlesen können. Von nichts kommt nichts.

Die von mir angesprochene zweite Variante ist schon etwas aufwendiger. Sie entfernt sich zwar etwas von dem 3D-Effekt, da der Hintergrund nicht mehr exakt identisch mitfährt (zeitlich) sondern leicht versetzt, dafür wird das ganze viel weicher.

Hier musst du ebenfalls HIER_DIE_URL_ZUM_BILD wieder durch deine Bild-URL ersetzen.

Mit dem Standartwert von 10 bewegt sich das Hintergrundbild mit maximal 10px pro 5ms. Das ist noc recht schnell und wirkt daher auch noch etwas eckig. Wenn du den wert beispielsweise auf 3 reduzierst, dann hat der Besucher zwar schon fertig gescrollt, währen das Hintergrundbild noch aufhohlt, dafür ist das ganze viel weicher unterwegs. Ich finde nicht, dass das dem "3D-Effekt" schadet.
Bearbeiten müsstest du dazu die Zeile: var speed = 10;
Einen höheren Wert als 10 brauchst du nicht versuchen, denn dann kannst du auch gleich wieder das ganz kurze Script verwenden. (Zudem würde das Script in eine endlose Schleife geraten, wenn du nicht auch noch die IF-Bedingungen anpasst.) Alles unter 10 kannst du selbst ausloten, wie es dir gefällt.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

Vielen Dank, freefunstuff Hättest dir doch nicht so einen Aufwand zumuten müssen