Parallax Tutorials

[Carrear]

Hi Leute,

im Rahmen meiner Ausbildung soll ich zu einer Story eine Parallax Seite erstellen. JQuery Plugins gibt es ja ohne Ende, aber leider nur gaaanz gaaanz wenige und sehr sehr begrenzte Tutorials in Deutsch dazu. Kennt ihr mehr Ressourcen, als das was Google auf den ersten 2 Seiten hergibt?

 

[CPoly]

Was meinst du denn mit Tutorials? Je nach dem wie komplex die Webseite werden soll, musst du erst mal eine Art Storyboard schreiben/zeichnen, um genau zu wissen, wie sich welches Element bewegen soll. Danach ist es ein leichtes, mit der entsprechenden JavaScript Bibliothek die Elemente auch so zu animieren.

Ich empfehle dir skrollr, nicht nur weil ich der Autor bin. Es gilt international als die Beste Bibliothek dafür, da sie einem genug Freiraum gibt um damit alles erdenkliche zu machen.

 

[Carrear]

Gibt es eine deutsche Dokuemtation zu deiner Bibliothek?

 

[CPoly]

Nein tut mir Leid. Wenn du allerdings vor hast in dem Bereich zu bleiben, kommst du definitiv nicht drum herum. Das sind die einzigen mir bekannten Worte über skrollr in deutsch http://www.drweb.de/magazin/mehr-leben-auf-der-website-mit-dynamo-skrollr-und-html5-data-attributen/

 

[Carrear]

Du hast das erstellt ^^ warum gönnst du deinen Anhängern keine deutsche Doku ;P ?

 

[CPoly]

Weil ich in meiner ganzen Karriere noch nie eine deutsche Doku benutzt hab. skrollr wird auf der ganzen Welt verwendet.

 

[Carrear]

Äußerst schade

 

[Carrear]

Ich verstehe das nicht 100% - also im Prinzip funktioniert alles, aber was ich nicht hinbekomme ist folgendes. Einer der layer soll beim scrollen erstmal stehen bleiben, bis 1600 Pixel, dafür habe ich folgende Attribute festgelegt:

data-0="top:0px;" data-1600="top: 1600px;"

das würde ja bedeutet 100px gescrollt ist er in dem Container an top: 100px - aber er scrollt bei mir einfach mit hoch von anfang an und bei 1600 px erscheint er urplötzlich wieder.

 

[CPoly]

Ist das Ding denn auch absolute oder relativ positioniert? Sonst wirkt sich top ja nicht aus.

 

[Carrear]

Ja war es. Ehrlich gesagt ich weiß nicht was ich falsch gemacht habe, aber jetzt habe ich das ganze einfach nochmal mit fixer Positionierung gemacht, dann funktioniert das ganze super. Magst du mir vielleicht noch verraten wie ich eine Ankernavigation einfüge? Kann ich einfach Anker in die Animierten Elemente einfügen und wenn ich einen Link zum Anker anklicke werde ich dahin gescrollt?