Ich hatte die Idee für meine Webseite ein Spotlight effekt zu bauen. Sowas wäre damit umsetzbar also danke dir für die Erklärung wenn sie auch sehr schnell ist und man das Video mehrmals schauen müsste um das ganze zu verstehen.
Schöner Effekt, aber es gibt Verbesserungspotenzial in Sachen Accessibility. Zunächst einmal ist es nicht gut, zwei main-Bereiche auf der Website zu haben, die auch noch denselben Inhalt haben. Ein Screenreader würde beide Bereiche vorlesen. In diesem Fall ist es sinnvoll, aus der Shadow-Layer ein div zu machen (kein main) und vor allem aria-hidden=true zu übergeben. Dieses Attribut sorgt dafür, dass das Element aus dem Accessibility Tree entfernt wird und daher nicht von Screenreadern erfasst wird. Generell fällt mir bei deinen Videos auf, dass du einen großen Fokus auf Maus-Interaktionen legst, aber fast keinen auf Tastatur-Navigation. Dieser Effekt hier zum Beispiel lässt es nicht zu, den Inhalt der Shadow-Layer mit Tastatur zu erfassen. Falls dort weitere Inhalte sind, die also nicht nur dekorativer Natur sind, ist das auch ein Abstrich bei der Accessibility. Bereits auf einem Handy zum Beispiel wären die Inhalte verborgen.
Ja das stimmt, wobeiman hier glaube ich sagen muss das dieser Effekt wirklich nur "Optisch" sein sollte. Weil die Informationen sind viel zu Versteckt um wirkliche Inhalte zu vermitteln egal ob Barrierefrei oder Normal. Würde es nur als "Gimig" sehen das auch komplett nicht funktionieren könnte z.B. im Mobile usw. Aber mit dem Main hast du recht das hätte ein div sen können
Vllt ist's ja noch interessant, dass der Creator auch ein eigenes Tutorial dazu gemacht hat wo er auch die ganze Concept Phase dazu dokumentiert hat: th-cam.com/video/vSgV7r_hOfM/w-d-xo.html
Tolles Video! Die Erklärung kann mit dem Effekt vollständig mithalten. Viel Input, aber absolut nachvollziehbar, vor allem durch die unterschiedlichen Ansätze hin zu einem finalen. Werde ich selbst auch einmal ausprobieren!
![Der beste Fixed-Header Effekt für 2023 [DE/Tutorial]](http://i.ytimg.com/vi/btkRMc7jjh4/mqdefault.jpg)
![Der beste Fixed-Header Effekt für 2023 [DE/Tutorial]](/img/tr.png)
![Wichtige HTML Tags die kaum jemand kennt! [DE/Tutorial]](http://i.ytimg.com/vi/CE3R4ubnejE/mqdefault.jpg)
wow, du haust mich immer wieder um, sehr gut gemacht!
Danke freut mich wenn dir das Video gefallen hat :)
Toller Breakdown, vielen Dank dafür! 🙂
Gerne ;)
Super Video 🎉
Mega! :D
Danke freut mich wenn dir das Video gefallen hat :)
Ich hatte die Idee für meine Webseite ein Spotlight effekt zu bauen. Sowas wäre damit umsetzbar also danke dir für die Erklärung wenn sie auch sehr schnell ist und man das Video mehrmals schauen müsste um das ganze zu verstehen.
Hätte man die collision-function nicht auch mit mousenter und mouseleave einfacher bauen können?
Der Effekt ist cool! Einbauen würde ich es nicht, weil es nicht zum restlichen Style passt - aber wenn es passt: go for it! 👍
Ja absolut, es muss passen aber wenn ist es schon sehr nice :)
Schöner Effekt, aber es gibt Verbesserungspotenzial in Sachen Accessibility.
Zunächst einmal ist es nicht gut, zwei main-Bereiche auf der Website zu haben, die auch noch denselben Inhalt haben. Ein Screenreader würde beide Bereiche vorlesen. In diesem Fall ist es sinnvoll, aus der Shadow-Layer ein div zu machen (kein main) und vor allem aria-hidden=true zu übergeben. Dieses Attribut sorgt dafür, dass das Element aus dem Accessibility Tree entfernt wird und daher nicht von Screenreadern erfasst wird.
Generell fällt mir bei deinen Videos auf, dass du einen großen Fokus auf Maus-Interaktionen legst, aber fast keinen auf Tastatur-Navigation. Dieser Effekt hier zum Beispiel lässt es nicht zu, den Inhalt der Shadow-Layer mit Tastatur zu erfassen. Falls dort weitere Inhalte sind, die also nicht nur dekorativer Natur sind, ist das auch ein Abstrich bei der Accessibility. Bereits auf einem Handy zum Beispiel wären die Inhalte verborgen.
Ja das stimmt, wobeiman hier glaube ich sagen muss das dieser Effekt wirklich nur "Optisch" sein sollte. Weil die Informationen sind viel zu Versteckt um wirkliche Inhalte zu vermitteln egal ob Barrierefrei oder Normal. Würde es nur als "Gimig" sehen das auch komplett nicht funktionieren könnte z.B. im Mobile usw. Aber mit dem Main hast du recht das hätte ein div sen können
dass der shadow layer dann nicht erfasst wird, wäre aber auch nicht richtig... auch ein blinder möchte ja hören was sich darunter befindet ;-
Noooice! 😎
Danke :)
mega
Vllt ist's ja noch interessant, dass der Creator auch ein eigenes Tutorial dazu gemacht hat wo er auch die ganze Concept Phase dazu dokumentiert hat:
th-cam.com/video/vSgV7r_hOfM/w-d-xo.html
das kannte ich garnicht mega nice hatte nur bei der awards Seite das Protfolio gesehen
@@UnleashedDesign Trotzdem gut das es nochmal in deutsch erklärt wurde✨️
sehr interessant. Der Mann hat ja richtig was drauf, das coden allerdings weniger wie er wohl sagt, und dann solche Ergebnisse, schon beeindruckend
Sehr geil, danke
Danke freut mich wenn es dir gefallen hat :)
Tolles Video! Die Erklärung kann mit dem Effekt vollständig mithalten. Viel Input, aber absolut nachvollziehbar, vor allem durch die unterschiedlichen Ansätze hin zu einem finalen. Werde ich selbst auch einmal ausprobieren!
Danke freut mich wenn dir das Video gefallen und geholfen hat :)