Super aufgebaut und sehr nachvollziehbar, ich hab gespannt zugeschaut und hatte erst bei den etwas komplexeren (aus meiner Sicht) JavaScript-Codes leichte Probleme. :-) Ich behalte das Tutorial mal im Hinterkopf und überlege mir, für was ich das nutzen kann; ich sehe da echt viel Potenzial.
Ja absolut baue es selbst grade bei zwei Projekten ein zwar in einem anderen Kontext funktioniert aber trotzdem gut :) warum findest du den JavaScript Part komplex? Könnte man das einfacher machen?
@@UnleashedDesign Ich habe mit JavaScript einfach zu wenig Erfahrung und selbst so Standard-Sachen wie alle Elemente einer Collection (effektiv die for-each-Schleife mit den elems) sind für mich einfach noch "zu neu". Wenn dann plötzlich auf einen Schlag 3 neue Funktionen raus gehauen werden, ist es für mich etwas schnell, aber das liegt wie schon gesagt am Mangel der Berührungspunkte zwischen mir und JS. Ich brauche das halt immer nur als "Flickwerk", wenn ich in meiner gewohnten Umgebung (PHP, HTML, CSS) nicht weiterkomme. Ich habe / musste noch nie eine ganze Seite auf JS aufbauen geschweige denn irgendwas mit Headless CMS versuchen und das wird sich auf absehbare Zeit auch nicht ändern denke ich, dafür ist WordPress bisher zu sehr an PHP gebunden. :-)
@@nexTabDE achso ja das macht Sinn, ja für Wordpress ist es auch nicht der Anwendungsfall. Wobei ich es nur empfehlen kann sich die andere Welt auch mal anzusehen wenn man doch mal größere Software Projekte bauen muss :)
Mega Tutorial! Danke! Habe das mal nachgebaut und mich gefragt, wie man das mobil umsetzen könnte. Bin selbst nicht so fit in Javascript aber habe etwas mit el.addEventListener('touchstart', handleStart); etc. rumprobiert, leider ohne Erfolg.
Das ist nicht ganz so einfach und evtl. auch nicht wirklich Sinnvoll da der nutzer idR ja nicht per Touchdrag durch die Seite navigiert. Hier würde ich den Effekt eher komplett ausblenden für Mobile gibt es andere deutlich schönere Effekt :)
Wenn ein weiteres Element innerhalb des äußeren Bereichs liegt und klickbar sein soll, gibts dafür eine Lösung? pointer-events: none; entfernt den Effekt (korrekterweise) und das andere Element mit z-index darüber setzen setzt den Effekt aus, wenn die Maus über diesem Element ist. Abgesehen davon den mouse-move auf den ganzen Bildschirm zu setzen und für jedes Element im JS berechnen, ob es start/end/move/nichts ausführen soll, fällt mir da grad nicht ein. Der Button an sich ist awesome, aber den als Element mit der Fläche des inneren Buttons zu haben wäre der Hammer.
Das wird relativ umständlich, also einen einfachen weg gibt es grade nicht glaube ich. Theoretisch könntest du einen "unsichtbaren" Button in die Mitte legen aber das führt zu sooo vielen Edge Cases glaube ich.
Erübrigt sich dieses Vorgehen nicht in Zukunft durch die Nutzung von Lottie Animationen? Ich entwerfe mit Illustartor - Aftereffect lottie´s die sich genau so und besser in Webseiten reinbasteln lassen. Aber als Nerd will ich das jetzt auch so lernen XD Also danke dafür 🤓🤓🤓
Lottie ist mega für festgelegte Ablaufe. Habe dazu auch Videos hier auf dem Channel vor allem für sehr komplexe Transformationen von SVGs usw. sofern man aber "Interaktivität" haben möchte ist es so meistens einfacher (nicht immer).
![Einfach CSS Themes erstellen und mit JavaScript wechseln! [Deutsch/Tutorial]](http://i.ytimg.com/vi/3IoGET2jkk4/mqdefault.jpg)
![Einfach CSS Themes erstellen und mit JavaScript wechseln! [Deutsch/Tutorial]](/img/tr.png)
![[#2024MAMA] BIGBANG (빅뱅) - 뱅뱅뱅 (BANG BANG BANG) + FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/EQsYfiPR9uM/mqdefault.jpg)
![Der beste Fixed-Header Effekt für 2023 [DE/Tutorial]](/img/1.gif)
Vielen Dank für diesen coolen Effekt! Habe es direkt in mein React Js Projekt implementiert :))
Danke freut mich wenn es eingesetzt wird :)
Danke 🙏 es war wieder sehr inspirierend und informativ 👍
Gerne freut mich wenn dir das Video gefallen hat :)
Danke für das Video. Sehr gut erklärt.
Danke freut mich wenn dir das Video gefallen hat :)
Und sehr cooles Video!
Danke freut mich wenn es dir gefällt :)
Starkes Tutorial.
Danke freut mich wenn es dir gefallen hat :)
Super aufgebaut und sehr nachvollziehbar, ich hab gespannt zugeschaut und hatte erst bei den etwas komplexeren (aus meiner Sicht) JavaScript-Codes leichte Probleme. :-)
Ich behalte das Tutorial mal im Hinterkopf und überlege mir, für was ich das nutzen kann; ich sehe da echt viel Potenzial.
Ja absolut baue es selbst grade bei zwei Projekten ein zwar in einem anderen Kontext funktioniert aber trotzdem gut :) warum findest du den JavaScript Part komplex? Könnte man das einfacher machen?
@@UnleashedDesign Ich habe mit JavaScript einfach zu wenig Erfahrung und selbst so Standard-Sachen wie alle Elemente einer Collection (effektiv die for-each-Schleife mit den elems) sind für mich einfach noch "zu neu".
Wenn dann plötzlich auf einen Schlag 3 neue Funktionen raus gehauen werden, ist es für mich etwas schnell, aber das liegt wie schon gesagt am Mangel der Berührungspunkte zwischen mir und JS. Ich brauche das halt immer nur als "Flickwerk", wenn ich in meiner gewohnten Umgebung (PHP, HTML, CSS) nicht weiterkomme. Ich habe / musste noch nie eine ganze Seite auf JS aufbauen geschweige denn irgendwas mit Headless CMS versuchen und das wird sich auf absehbare Zeit auch nicht ändern denke ich, dafür ist WordPress bisher zu sehr an PHP gebunden. :-)
@@nexTabDE achso ja das macht Sinn, ja für Wordpress ist es auch nicht der Anwendungsfall. Wobei ich es nur empfehlen kann sich die andere Welt auch mal anzusehen wenn man doch mal größere Software Projekte bauen muss :)
Mega Tutorial! Danke! Habe das mal nachgebaut und mich gefragt, wie man das mobil umsetzen könnte. Bin selbst nicht so fit in Javascript aber habe etwas mit el.addEventListener('touchstart', handleStart); etc. rumprobiert, leider ohne Erfolg.
Das ist nicht ganz so einfach und evtl. auch nicht wirklich Sinnvoll da der nutzer idR ja nicht per Touchdrag durch die Seite navigiert. Hier würde ich den Effekt eher komplett ausblenden für Mobile gibt es andere deutlich schönere Effekt :)
KLasse, Danke!!!!
Danke :)
Danke für das Tutorial! P.S. ich hätte die Function getChildren genannt.
Danke freut mich wenn es helfen konnte :) das kann man ja einfach in seiner Implementierung so nennen :)
Toller Effekt. Gutes Video. Aber man sieht auch hier: CSS ist eigentlich gut durchdacht. JavaScript ist - nunja… schon etwas aus der Zeit gefallen.
Warum ist JavaScript aus der Zeit gefallen ? :D
Wenn ein weiteres Element innerhalb des äußeren Bereichs liegt und klickbar sein soll, gibts dafür eine Lösung?
pointer-events: none; entfernt den Effekt (korrekterweise) und das andere Element mit z-index darüber setzen setzt den Effekt aus, wenn die Maus über diesem Element ist.
Abgesehen davon den mouse-move auf den ganzen Bildschirm zu setzen und für jedes Element im JS berechnen, ob es start/end/move/nichts ausführen soll, fällt mir da grad nicht ein.
Der Button an sich ist awesome, aber den als Element mit der Fläche des inneren Buttons zu haben wäre der Hammer.
Das wird relativ umständlich, also einen einfachen weg gibt es grade nicht glaube ich. Theoretisch könntest du einen "unsichtbaren" Button in die Mitte legen aber das führt zu sooo vielen Edge Cases glaube ich.
Erübrigt sich dieses Vorgehen nicht in Zukunft durch die Nutzung von Lottie Animationen?
Ich entwerfe mit Illustartor - Aftereffect lottie´s die sich genau so und besser in Webseiten reinbasteln lassen.
Aber als Nerd will ich das jetzt auch so lernen XD
Also danke dafür 🤓🤓🤓
Lottie ist mega für festgelegte Ablaufe. Habe dazu auch Videos hier auf dem Channel vor allem für sehr komplexe Transformationen von SVGs usw. sofern man aber "Interaktivität" haben möchte ist es so meistens einfacher (nicht immer).
Welche Seiten benutzen das?
thank
gerne :)
Der Discord Link ist leider nicht mehr gültig ;(
Hat wer einen neuen? Danke :D
Also bei mir funktioniert der Link noch sollte also klappen :)