Wenn man mehr als ein Element pro scroll-snap austauschen will (siehe z.B. horizontal scrollbare Filmlisten auf Netflix), muss man diese dann in wrapper-divs einteilen, wobei jedes div eine snap-box ist? Bedeutet das wiederum, dass man mit JavaScript berechnen muss, wie viele Elemente in eine snap-box abhängig von der Bildschirmbreite passen?
An sich eine coole Sache. Ich frage mich nur wie man dies noch etwas anpassen b.z.w personalisieren kann. Z.B wie man die Scroll Geschwindigkeit festlegen kann beim Snap oder die Scroll Richtung wenn ich die Seite, z.B bei ein Portfolio, von unten nach oben scrollen will. Sind natürlich nur Kleinigkeiten aber es währe schon praktisch wenn man etwas mehr Optionen hätte ;) Ansonsten super erklärt 👍
@@UnleashedDesign ah okay, das Video benutzt ja auch kein "wirkliches" css und "wirkliches" html, verstehe... ne im ernst, ein kleines fiddle wäre trotzdem nett in Zukunft damit man die Dinge im eigenen Browser selbst "erleben" kann, danke....
Bei mir geht das auf FF super, auf Chrome springt es mir mit dem Scrollrad selbst bei kleinsten Bewegungen gleich immer 2 Boxen hoch oder runter. Ansonsten ist das natürlich echt ein Super-Tipp! Danke.
@@UnleashedDesign Ich hatte die Version VOR 86.0.4240.75. Nach dem Update läuft es auch bei mir wie es soll, vielleicht ein guter Hinweis für alle anderen, denen es ähnlich geht: Chrome aktualisieren, falls das bei Euch auch auftritt. Thx.
Hallo Mondkeks, wie Knäche Brot schon sagte SASS ist ein sog. CSS Preprozessor also eine Art CSS zu schreiben diese wird dann anschließend zu CSS konvertiert. Das heißt SASS/SCSS/LESS usw. kann ein Browser bzw. dessen Engine nicht direkt lesen und deswegen funktioniert es nicht. Ich habe dazu ein älteres Video aber es gibt auch sehr viele neue auf TH-cam wo man das schnell einrichten kann alternativ kurz das Video meiner Umgebung gucken dort zeige ich wie man sich das alles korrekt zusammen baut.
hey, also das liegt an den Punkten auf dem Thumbnail, wenn dort 1-2 stehen gehe ich davon aus das man noch nie auch nur eine z+Zeile css geschrieben oder wirklich grade erst angefangen hat sich mit dem Thema zu beschäftigen. Daher wird bei solchen videos weiter "boilerplate" Code erklärt werden. Allerdings kann man ja die teile einfach überspringen mithilfe der Marker :)
@@UnleashedDesign Ah okay, bin es von anderen Kanälen so gewohnt, dass die basics immer in separaten Videos durchgenommen werden. Das Punktesystem finde ich aber eigentlich auch gut gelöst, würde dir nur empfehlen vielleicht am Anfang des Videos auf diesen "Schwierigkeitsgrad" hinzuweisen und vielleicht die Timestamps/Marker zu erwähnen damit man sich bisschen besser auskennt :D
Jetzt die kurze Version. Children min-height:100vh scroll-snap-align: center Parent height: 100vh overflow-y: scroll scroll-snap-type: y mandatory Dieses Video fuhlt sich auf Krampf langer gezogen.
Geht, also das Video ist halt von mir mit zwei Punkten betitelt da gehe ich in der Regel auf alles ein. Wenn es höhere Punkte hat würde ich es vermutlich deutlich knapper beschreiben :)
Naja das ganze wird aber von Firefox und Safari nicht unterstützt. Daher für den Produktivgebrauch nicht wirklich zu benutzen. Das hätte ich wenigstens angemerkt. // Edit: Vergesst was ich gesagt habe - Auflösung hier drunter als Antworten
![🤯HTML picture? Was ist es und warum sollte man es nutzen! 👍 [TUTORIAL]](http://i.ytimg.com/vi/DKT_mamPdTg/mqdefault.jpg)
![Kennst du CSS Selectoren wirklich?! 👍 [TUTORIAL]](/img/n.gif)
Richtig geiles Video, werde jetzt ne geführte Portfolioseite daraus machen 😊
hehe sehr cool viel Spaß :)
Danke!!! Die Überschrift ist do zutreffend - warum gab es das nicht eher 👍👍👍
ABSOLUT !
dankeschön, toll erklärt, und in der Tat, das hätte man sich schon früher gewünscht ;-
Danke freut mich wenn es dir gefällt :)
Cooles Video! Ich werde es mal bei meinem Schulprojekt (Stadtrundgang) ausprobieren
Freut mich wenn es dir gefällt :)
Wenn man mehr als ein Element pro scroll-snap austauschen will (siehe z.B. horizontal scrollbare Filmlisten auf Netflix), muss man diese dann in wrapper-divs einteilen, wobei jedes div eine snap-box ist? Bedeutet das wiederum, dass man mit JavaScript berechnen muss, wie viele Elemente in eine snap-box abhängig von der Bildschirmbreite passen?
Danke dafür! Kannte den befehl noch nicht, obowohl er so einfach ist.
ja man lernt nie aus egal wie lange man dabei ist :D
An sich eine coole Sache. Ich frage mich nur wie man dies noch etwas anpassen b.z.w personalisieren kann.
Z.B wie man die Scroll Geschwindigkeit festlegen kann beim Snap oder die Scroll Richtung wenn ich die Seite, z.B bei ein Portfolio, von unten nach oben scrollen will.
Sind natürlich nur Kleinigkeiten aber es währe schon praktisch wenn man etwas mehr Optionen hätte ;)
Ansonsten super erklärt 👍
ja das wäre echt super, aber bei sowas muss man denke ich weiterhin auf JS setzten, auch wenn man z.B. abhängigkeiten schaffen möchte.
Sehr hilfreich. Danke
gerne :)
ich frage mich warum mir diese Video empfohlen wurde. Trotzdem coole Sachen, die ihr macht.
einfach mitmachen :P lohnt sich :D
Starkes Tutorial.
Freut mich wenn es dir gefällt :)
Thank you for sharing a good stuff
No Problem i hope you like it even when its not in eng
Ist der gezeigte Code irgendwo bei github zu finden?
Nein, zu diesem Video gibt es keine Livedemo weil ja quasi nichts "wirkliches" entwickelt wurde.
@@UnleashedDesign ah okay, das Video benutzt ja auch kein "wirkliches" css und "wirkliches" html, verstehe... ne im ernst, ein kleines fiddle wäre trotzdem nett in Zukunft damit man die Dinge im eigenen Browser selbst "erleben" kann, danke....
Bei mir geht das auf FF super, auf Chrome springt es mir mit dem Scrollrad selbst bei kleinsten Bewegungen gleich immer 2 Boxen hoch oder runter.
Ansonsten ist das natürlich echt ein Super-Tipp! Danke.
hmmm also grade nochmal getestet, welche Version nutzt du denn? Weil bei mir läuft es auf dem Notebook und im Standrechner super :)
@@UnleashedDesign Ich hatte die Version VOR 86.0.4240.75. Nach dem Update läuft es auch bei mir wie es soll, vielleicht ein guter Hinweis für alle anderen, denen es ähnlich geht: Chrome aktualisieren, falls das bei Euch auch auftritt. Thx.
Was ist sass und kann ich das auch in css machen halt nur mit den Klammern etc.? Lg
Klar, sass generiert css, und soll das Schreiben von css vereinfachen. Auf diesem Kanal gibt es ein tutorial dazu
Hallo Mondkeks, wie Knäche Brot schon sagte SASS ist ein sog. CSS Preprozessor also eine Art CSS zu schreiben diese wird dann anschließend zu CSS konvertiert. Das heißt SASS/SCSS/LESS usw. kann ein Browser bzw. dessen Engine nicht direkt lesen und deswegen funktioniert es nicht. Ich habe dazu ein älteres Video aber es gibt auch sehr viele neue auf TH-cam wo man das schnell einrichten kann alternativ kurz das Video meiner Umgebung gucken dort zeige ich wie man sich das alles korrekt zusammen baut.
@@UnleashedDesign Habe es jetzt nach 4h mit reinem Css geschafft 😅 funktioniert jetzt genauso
@@mondkeks Wie? Bei mir gehts nicht. Würde mich über eine Antwort freuen
@@patriksandu9368 Es gibt Sass zu css converter im Internet, aber das habe ich auch erst später rausgefunden^^
Bitte beim nächsten mal keine 7 Minuten web design basics, sonst super Video, wäre aber mit 2 Minuten Länge aber am besten
hey, also das liegt an den Punkten auf dem Thumbnail, wenn dort 1-2 stehen gehe ich davon aus das man noch nie auch nur eine z+Zeile css geschrieben oder wirklich grade erst angefangen hat sich mit dem Thema zu beschäftigen. Daher wird bei solchen videos weiter "boilerplate" Code erklärt werden. Allerdings kann man ja die teile einfach überspringen mithilfe der Marker :)
@@UnleashedDesign Ah okay, bin es von anderen Kanälen so gewohnt, dass die basics immer in separaten Videos durchgenommen werden. Das Punktesystem finde ich aber eigentlich auch gut gelöst, würde dir nur empfehlen vielleicht am Anfang des Videos auf diesen "Schwierigkeitsgrad" hinzuweisen und vielleicht die Timestamps/Marker zu erwähnen damit man sich bisschen besser auskennt :D
Gibts den code irgendwo? :P
Sofern es welchen gibt, ist der auf Codepen in der Videobeschreibung, in diesem Video baut man aber ja nicht wirkliches daher gibt es den Code nicht.
Jetzt die kurze Version.
Children
min-height:100vh
scroll-snap-align: center
Parent
height: 100vh
overflow-y: scroll
scroll-snap-type: y mandatory
Dieses Video fuhlt sich auf Krampf langer gezogen.
Geht, also das Video ist halt von mir mit zwei Punkten betitelt da gehe ich in der Regel auf alles ein. Wenn es höhere Punkte hat würde ich es vermutlich deutlich knapper beschreiben :)
Besser für Anfänger 👍🏻
schnell ist nicht alles, auch Details sind interessant
hauptsache ein css tutorial in sass schreiben LÜRL
Naja das ganze wird aber von Firefox und Safari nicht unterstützt. Daher für den Produktivgebrauch nicht wirklich zu benutzen. Das hätte ich wenigstens angemerkt.
// Edit: Vergesst was ich gesagt habe - Auflösung hier drunter als Antworten
Also laut developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align wird es bis auf IE supportet
@@UnleashedDesign mein Fehler hab auf can i use geschaut und da war scroll-snap-stop als erster eintrag. Dank dir!