JavaScript OnePage mit Blockweisem scrollen

[Zoker]

Hallo zusammen,

Ich möchte eine OnePage Seite bauen und habe schon öfter gesehen, dass es manche OnePage Seiten gibt, bei denen beim scrollen immer nur blockweise gescrollt.

Also es gibt kein flüssiges scrollen, sondern eben nur immer eine Bildschirmhöhe weiter.


Ich hoffe es ist verständlich was ich meine

Hier kann man sowas sehen:
http://www.thepetedesign.com/demos/onepage_scroll_demo.html

Kann mir jemand sagen, wie dieser Effekt heißt?

Vielen Dank
Zoker

 

[Fritz]

Wie wärs so wie das Plugin auf der Seite heisst?

One Page Scroll

Ich glaube, da gibts keine offizieller Bezeichnung dafür, da sind mir schon zig verschiedene Bezeichnungen über den Weg gelaufen.

 

[ice-breaker]

und da sind sie wieder, die Zeiten in denen Webseiten auf bestimmte Browsergrößen ausgelegt wurden (nur diesesmal die Höhe)

 

[Zoker]

Ich hab jetzt endlich mal ne Seite gefunden, auf der man sich das live ansehen kann:
http://www.rdio.com/

Da wird man blockweise gescrollt

 

[benneq]

@ice-breaker: Da muss man nicht wirklich was auf den Browser zuschneiden. Man kann wie sonst üblich auch mit CSS Media Queries und/oder sonstigem Responsive Design arbeiten.
Man setzt halt im Normalfall eine Mindest-Fenstergröße voraus, aber das macht man ja eh immer. Wenn du die verlinkten Seiten anschaust, kannst du sie in jeder Fenstergröße anschauen. Der Platz, der "zu viel" ist, wird einfach mit dem Background aufgefüllt.

Die einfachste Möglichkeit: Du legst ganz normale Anker in HTML an und benutzt die JS-Funktion, um zu einem bestimmten Anker zu springen. Dann hörst du via JS auf das Scroll-Event und springst dementsprechend einen Anker hoch oder runter.

Das sieht natürlich nur schön aus, wenn du vorher weißt wie groß das Browserfenster ist und alle Anker in exakt diesem Abstand untereinander platzierst.

Man kann das ganze natürlich komplett ohne Anker und ohne echtes Scrolling auf der Seite machen, indem man beim Scroll-Event jeweils das aktuelle "content"-div durch das darauf folgende austauscht. Und zwar nicht einfach durch ein replace, sondern mit 'ner hübschen Animation. Hier muss man natürlich davor schon dafür sorgen, dass das neue "content"-div fertig geladen ist, sonst scrollt sich da einfach eine große weiße Fläche in den Sichtbereich und wird dann nach und nach aufgebaut.

Aber alldem wäre natürlich ein jQuery oder was-weiß-ich-was-für-ein Plugin vorzuziehen, da es insgesamt weniger Arbeit macht und natürlich auch Bugs weitestgehend ausgeschlossen sind.

 

[Teisi]

sers,

meine lösung (ohne anker) auf die frage wäre:

höhe des displays auslesen, und dann bei scroll-event, die y-position jeweils um die displayhöhe addiert bzw. subtrahiert...


infos hier klicken.
window.scrollTo(displayhöhe,0);

 

[[ChAoZ]]

Sieht aus wie ein Parallax Scroll Effekt.
http://www.onextrapixel.com/examples/parallax-scrolling-website-with-jaralla/
http://www.creativebloq.com/web-design/parallax-scrolling-1131762