OnePage Parallax - Hilfe

[rle]

Hi!
Bin gerade dabei mein Screendesign in HTML/CSS umzusetzen und möchte das ganze als OnePage-Parallax Seite aufbauen.

Habe unzählige Tutorials versucht, bin dann aber bei diesem hängengeblieben:


Das Ganze funktioniert allerdings nicht wie ich es mir vorstelle, könnte mir jemand sagen wie ich das Ganze am Besten aufbauen soll? Die Website besteht grundsätzlich aus Text/Bild Elementen und zwischendurch sollen immer wieder Parallax-Bereiche befinden. Beim Startbereich soll Logo/Text beim Scrollen nach unten rutschen. Die Website sieht derzeit so aus: http://tinyurl.com/mprtupa.

Falls es nicht ganz verständlich ist kann ich auch noch das Screendesign anhängen. Ich hoffe mir kann jemand helfen!

Lg,
rle

 

[rle]

AW: OnePage Parallax - Hilfe

Weiß diesbezüglich niemand eine Lösung?

 

[Duddle]

AW: OnePage Parallax - Hilfe

Wie soll denn das Ergebnis aussehen? Ich bekomme zwar einen Parallax bei mir, aber ich kann nicht einschätzen, was davon falsch und was davon ein interessanter Effekt sein soll.


Duddle

 

[rle]

AW: OnePage Parallax - Hilfe

Der Link im Startpost der zum Tutorial führt zeigt den Effekt.

Auf meiner Website wird mein Content von einer weißen Fläche überdeckt und das Bild schließt nicht direkt an. Der Effekt stimmt mit dem Tutorial auch nicht überein. (Text geht nach unten)

 

[Duddle]

AW: OnePage Parallax - Hilfe

Ja, aber du hast ja andere Elemente als das Beispiel, also kann ich nicht sofort einschätzen, was bei dir wie lange scrollen soll, was statisch sein soll, welcher Text wann wie sichtbar sein soll, usw.

Vielleicht solltest du deine Seite auch erstmal entschlacken. Also mach einen "Bildschirm", bis der passt. Dann machst du den nächsten, bis er passt. Dann machst du den Übergang von 1 zu 2, bis der passt. Ich sehe bei dir schon mindestens 4 "Bildschirme", da kann ja einiges untereinander falsch ablaufen.

Es kann aber auch einfach sein, das es bei mir anders dargestellt wird und ich daher durcheinander komme. Mein Browser ist auch nicht mehr der neuste.


Duddle

 

[rle]

AW: OnePage Parallax - Hilfe

Was genau meinst du den mit einem "Bildschirm"?
Die Website ist mit HTML5 & CSS3 erstellt und derzeit nur für Firefox und Chrome optimiert, IE und andere gängige Browser erledige ich später bzw. werde ich auf älterte Versionen gar nicht aufbauen. Welchen Browser hast du den? Naja ich möchte das, dass "Hello. Welcome to my Website" inkl. Buttons beim Scrollen nach unten verschwindet und das "just some text. lorem ipsum dolor sit" genauso, nur soll die Box eben diesen typischen Parallax-Effekt haben und der graue Hintergrund der nach der Box kommt soll direkt anschließen. Derzeit befindet sich da zwischen der Box und dem grauen Hintergrund eine weiße Fläche.

 

[Duddle]

AW: OnePage Parallax - Hilfe

Okay, ich habe mal großzügig auskommentiert und das Beispiel minimiert. Dabei zeigt sich, dass beispielsweise das data-type "sprite" mit background-position verschoben wird. Aber das wirkt sich nur auf background-image aus, also kann es deinen Inhalt garnicht korrekt verschieben. Ergo kannst du mit diesem sprite-Ding nur auf einzelne Bilder (als Hintergrundbild im CSS) verschieben, nicht komplette Texte.

Ich schätze, das wird bereits deinen Code ordentlich umstrukturieren, deshalb bau erstmal diese Erkenntnis ein.
Schau dir auch in Zukunft die Elemente genauer im FireBug an (scrollen, Veränderung im HTML betrachten) dann siehst du, was das Script im Hintergrund macht.


Duddle