Frage von ranixi, 56

CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

Hallo Leute

Ich möchte dass auf meiner Website, wenn man scrollt dass es quasi eine ganze Seite herunter geht. Ich habe jetzt kein Beispiel, auf welcher Seite es so aussieht, aber wenn man auf http://www.apple.com/ geht, sieht man ja eine Slideshow, ich möchte eigentlich dassselbe machen, halt einfach vertikal und mit Scrollen. Habt ihr eine Idee. Am liebsten nur mit CSS.

Danke für die Hilfe

Ranixi

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Sarkophator, 25

Weiß nicht, ob es in deinem Anwendungsfall hilfreich sein könnte, denn es handelt sich hierbei um experimentelle Technologie, allerdings möchte ich ergänzend eine CSS-Only Lösung hinzufügen.

Was die Kompatibilität angeht: Die Lösung wird nur vom Firefox weitgehend unterstützt. IE und Safari sollen wohl auch hier und da was umgesetzt haben, allerdings sollten das wohl sehr unfertige Lösungen sein.

Desweiteren werden im Moment größere Änderungen an dem Modul vorgenommen, das heißt also dass einige Eigenschaften sehr wahrscheinlich abgeschafft werden.

Für deinen Fall kann das CSS Modul "CSS Scroll Snap Points Moduel Level 1" von Interesse sein. Dabei lassen sich Snap-Points in einem scrollbaren Container festlegen, zu denen automatisch hingescrollt werden wenn in die entsprechende Richtung gescrollt wird.

Relevant sind dabei die Eigenschaften scroll-snap-type (womit sich die Art und Weise festlegen lässt) und scroll-snap-points-y. (bzw. scroll-snap-points-x bei horizontalem Scrolling)

Letztere Eigenschaft (scroll-snap-points-x bzw. scroll-snap-points-y) fallen übrigens unter den o.g. Änderungen, d.h. diese werden abgeschafft werden.

Hier eine kleine Demo: (Funktioniert wohl nur im Firefox 39+):
https://jsfiddle.net/ke27ffut/

Genauere Informationen kannst du hier entnehmen:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-y
https://developer.mozilla.org/en-US/docs/tag/CSS%20Scroll%20Snap%20Points

Hier ein genereller Überblick über die ganzen Eigenschaften mit Erklärungen: (Funktionieren alle aber nicht zwingend)
https://css-tricks.com/introducing-css-scroll-snap-points/

Und hier nochmal ein Link zur W3C-Spezifikation des Moduls:
https://www.w3.org/TR/css-snappoints-1/

Kommentar von ranixi ,

Danke für die kompetente Antwort, jedoch bringt es niemanden etwas wenn es nur auf dem Firefox funktioniert. Denn auch heute surfen immer noch 23 % der Menschen auf dem IE herum. Und diese Lösung, die nur auf einem Browser funktioniert, meine Freunde, würde meinem Lehrer überhaupt nicht passen.

Kommentar von webflexer ,

Sehe ich genauso

Antwort
von webflexer, 42

Nur mit CSS wird das nix. Maus-Events kannst du nur mit JavaScript im Browser abfragen.

Beispiel:

http://alvarotrigo.com/fullPage/

Kommentar von ranixi ,

Ah okay, dann halt nicht. Blöder Lehrer, will dass wir ohne PHP und JavaScript eine Website machen. Dazu noch ein Kontaktformular. Ja, so ist das leben... Die verdammten Bürolisten xD... Aber danke trotzdem scheint mir eine super Seite zu sein.

Kommentar von webflexer ,

Eine Webseite ohne JavaScript und ohne PHP.....na prima.....bitte setze dich in meinen Porsche aber darfst nicht fahren :D

Kommentar von ranixi ,

Ich verstehe ja, dass das nicht alle beherrschen, aber wieso darf man das nicht einsetzen? Wahrscheinlich versteht das unser super Informatik Lehrer nicht einmal.

Kommentar von webflexer ,

Und was soll mit dem Kontaktformular passieren wenn man kein JS oder PHP nutzen darf? Soll das Kontaktformular einfach nur so rumstehen? Verstehe den Sinn nicht.

Antwort
von TheToxigo, 27

Befasse dich mal mit jQuery...http://jquery.com

Keine passende Antwort gefunden?

Fragen Sie die Community