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
3 Antworten
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/
Nur mit CSS wird das nix. Maus-Events kannst du nur mit JavaScript im Browser abfragen.
Beispiel:
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.
Ich verstehe ja, dass das nicht alle beherrschen, aber wieso darf man das nicht einsetzen? Wahrscheinlich versteht das unser super Informatik Lehrer nicht einmal.
Befasse dich mal mit jQuery...http://jquery.com
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.