Unleashed Design
Unleashed Design
  • 470
  • 4 058 347
SO EINFACH ?! JavaScript SVG Scroll Path mit Content Aware [DE/Tutorial]
Heute gibt es mal wieder einfach etwas Dummes mit JavaScript und zwar werden wir einen Effekt bauen der absolut übertrieben ist, für den Mehrwert den er bietet aber es macht Spaß und deswegen schauen wir uns in diesem Video an wie man mit JavaScript einen Content Aware Scroll Animation Effekt mit SVGs und JavaScript baut!
Du brauchst einen Hoster?
🧡 bit.ly/mein-hoster (Affiliate Link)
Fragen oder Probleme? Werde Teil der Community! (Kostenlos)
📣 Discord Server: discord.gg/NV2NrXA
Unterstütze den Channel:
🧡 Notizen & ToDo: affiliate.notion.so/qa91a3px0ahk (Affiliate Link)
🧡 Adobe Creative Cloud: prf.hn/l/QxRnVXD (Affiliate Link)
🧡 Meine UI Design Tool: prf.hn/l/pmZdNJ9 (Affiliate Link)
🧡 Musik die ich Nutze: bit.ly/MeineHintergrundMusik (Affiliate Link)
🧡 Mein Geschäftskonto: bit.ly/MeinFreelanceKonto (Affiliate Link)
🧡 Meine Buchhaltungssoftware: bit.ly/sevDeskUnleashed (Affiliate Link)
🧡 Meine Hardware/Kamerausrüstung: amzn.to/2ccEY0l (Affiliate Link)
🧡 UA-cam Mitgliedschaft: bit.ly/UA-camSupporter (Affiliate Link)
Links aus dem Video:
► CodePen: codepen.io/Unleashed-Design/pen/abXQELy
► Quelle/Idee: developerakademie.com/
► VSC Theme: bit.ly/VisualStudioCodeTheme
► IDE Tutorial: ua-cam.com/video/3x4FwEtP93o/v-deo.html
#tutorial #javascript #coding
Meine Social Media Seiten:
► Homepage: unleashed-design.de/?UA-cam&VideoBeschreibung
► UA-cam: bit.ly/1rPBJ9Y
► Twitter: bit.ly/1y4rMeD
► Twitch: bit.ly/29VyA7J
► Discord: discord.gg/NV2NrXA
Copyright by Johannes Schiel / Unleashed Design
Переглядів: 4 854

Відео

Das BESTE Angular 🤨 Feature in 2024! Deferrable View’s was ist das? [DE/Tutorial]
Переглядів 1,9 тис.7 місяців тому
Heute schauen wir uns in Angular das wohl beste Feature in 2024 an, es löst so viele Probleme für die man sonst sehr lange Entwickeln und viel Arbeit investieren musste. Heute können wir das mit wenigen Zeilen Code lösen und damit unsere Websites und Angular Projekte um ein vielfaches schneller laden lassen, Interaktionen optimieren und die developer Experience aufräumen! Kennst du das schon? H...
So einfach baust du dynamische Context Menü’s in JavaScript!
Переглядів 2,3 тис.9 місяців тому
In diesem Video nutzen wir JavaScript, CSS und etwas HTML und einfache aber sehr coole Context Menü’s zu entwickeln. Dabei achten wir auch UI/UX Kriterien und erzeugen dynamische Menü’s die für jeden Use-Case verwendet werden können und dazu in jedem Projekt! Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Discord Ser...
Tutorial Videos sind Falsch! Eine REALE Coding Aufgabe als IT Freelancer!
Переглядів 4,9 тис.10 місяців тому
Heute sehen wir uns mal an wie die Realität als Freelancer aussieht. Was es für Aufgaben gibt und wie viele Aufgaben aussehen werden. In diesem Video geht es also nicht um das neuste Feature sondern um einen Blick hinter die schönen UA-cam Tutorials und neusten Tools. Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Di...
Einfacher als du denkst! Radial Slider mit JavaScript und CSS! [DE/Tutorial]
Переглядів 2,8 тис.11 місяців тому
Heute mal bauen wir einen Radial Image Slider weil ich die Animation super finde, wir nutzen dabei JavaScript, CSS und etwas HTML. Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Discord Server: discord.gg/NV2NrXA Unterstütze den Channel: 🧡 Notizen & ToDo: affiliate.notion.so/qa91a3px0ahk (Affiliate Link) 🧡 Adobe Crea...
Apple iPhone 15 ... nicht alles ist langweilig! Animationen mit CSS & JavaScript. [DE/Tutorial]
Переглядів 3,1 тис.11 місяців тому
Heute bauen wir die iPhone 15 Website etwas nach und schauen uns mal an wie genau der coole Call-To-Action Button Effekt mit CSS und JavaScript funktioniert. In diesem Tutorial geht es also um Animationen mit JavaScript und CSS. Wir nutzen hier noch die Lib GSAP für bessere und einfacherer Animationen wenn dir das Video gefällt hinterlasse doch einen Kommentar. Du brauchst einen Hoster? 🧡 bit.l...
Wie baue ich eine Website in 2023? incl. Hosting & CMS! [DE/Tutorial]
Переглядів 4,6 тис.11 місяців тому
Heute bauen wir mithilfe von IONOS Cloud Server eine Skalierbare Web Applikation die mit einem Frontend, Backend und Plesk alles kann das ihr braucht um hochkomplizierte Websites einfach umsetzten zu können. Genau passend für jeden Kunden, Agentur oder Start-Up Gründer. Du brauchst einen Hoster? 🧡 IONOS Cloud Server: bit.ly/3snNalZ Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 D...
UI Design/Front-End + Barrierefreiheit - Farben & Kontrast Probleme schnell lösen! [DE/Tutorial]
Переглядів 1,9 тис.Рік тому
Warum Barrierefreiheit in Zukunft kein Nice-To-Have Feature sondern ein Must-Have-FEature wird lernst du in diesem ersten Teil dieser kleinen Reihe. Wo wir uns mit Farben & Sehschwächen beschäftigen und was wir als Entwickler dagegen machen können. Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Discord Server: discor...
So baust du Micro Animations im EASY MODE [DE/Tutorial]
Переглядів 3,3 тис.Рік тому
Heute zeige ich euch wie du ohne Skills in After Effects oder anderen Animations Tools in wenigen Minuten super coole Micro UI Animations mithilfe von LottieFiles und JavaScript bauen kann! 📣 Link zu LottieFiles: lottiefiles.com/de? Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Discord Server: discord.gg/NV2NrXA Unt...
Kennst du die 5 NEUEN JavaScript Features in ECMA2023 ! [DE/Tutorial]
Переглядів 3,1 тис.Рік тому
So einfach kann die Arbeit mit JavaScript und Array werden, die neuen Features aus dem ECMA 2023 Entwurf werden das Arbeiten mit Arrays sehr vereinfachen und viele Probleme und Nervige ToDo's simpler machen daher solltest auch du diese Features kennen. Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Discord Server: di...
Wie geht sowas mit CSS?? Der beste Text Effekt! [DE/Tutorial] (Feat. @MinhPhamDesign )
Переглядів 5 тис.Рік тому
Du willst lernen wir man mit JavaScript und CSS den wohl spanendesten Text Effekt in 2023 baut? In diesem Video zeige ich dir wie dieser Effekt funktioniert aber auch wie man solche Effekt nachbauen und für sich anpassen kann. Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Discord Server: discord.gg/NV2NrXA Unterstüt...
Beste Input Field Animation beim Löschen! Lerne JavaScript & CSS [DE/Tutorial]
Переглядів 2,7 тис.Рік тому
In diesem Video zeige ich dir wie du mit JavaScript und CSS das wohl coolste Input Feld baust mit der besten Delete Animation die ich bisher gesehen habe. Das dauert alles nicht lang und jeder kann dieses Tutorial machen. Du brauchst einen Hoster? 🧡 bit.ly/mein-hoster (Affiliate Link) Fragen oder Probleme? Werde Teil der Community! (Kostenlos) 📣 Discord Server: discord.gg/NV2NrXA Unterstütze de...
WAS SIND?! Angular Structural Directives? Das unbekannte MEGA Feature [DE/Tutorial]
Переглядів 1,5 тис.Рік тому
WAS SIND?! Angular Structural Directives? Das unbekannte MEGA Feature [DE/Tutorial]
Fancy Menü einfach mit CSS und JavaScript bauen. [DE/Tutorial]
Переглядів 3,2 тис.Рік тому
Fancy Menü einfach mit CSS und JavaScript bauen. [DE/Tutorial]
Wichtige HTML Tags die kaum jemand kennt! [DE/Tutorial]
Переглядів 4,2 тис.Рік тому
Wichtige HTML Tags die kaum jemand kennt! [DE/Tutorial]
Warum ist dieser Button so cool?! [DE/Tutorial]
Переглядів 3,1 тис.Рік тому
Warum ist dieser Button so cool?! [DE/Tutorial]
Einfach Formulare in Nuxt Bauen, Validieren und Stylen! [DE/Tutorial]
Переглядів 1,6 тис.Рік тому
Einfach Formulare in Nuxt Bauen, Validieren und Stylen! [DE/Tutorial]
In SCSS eine Animation bauen wie ein Profi! [DE/Tutorial]
Переглядів 4,2 тис.Рік тому
In SCSS eine Animation bauen wie ein Profi! [DE/Tutorial]
Diese neuen CSS & HTML Features verändern alles! [DE/Tutorial]
Переглядів 5 тис.Рік тому
Diese neuen CSS & HTML Features verändern alles! [DE/Tutorial]
Als Entwickler Analytic Tools richtig nutzen um Probleme zu lösen! [DE/Tutorial]
Переглядів 1,6 тис.Рік тому
Als Entwickler Analytic Tools richtig nutzen um Probleme zu lösen! [DE/Tutorial]
Wir lösen das CSS Overflow Problem das jeder hat! [Tutorial/Deutsch]
Переглядів 2,7 тис.Рік тому
Wir lösen das CSS Overflow Problem das jeder hat! [Tutorial/Deutsch]
Status Page für deine Projekte in wenigen Minuten (Tutorial)
Переглядів 3,4 тис.Рік тому
Status Page für deine Projekte in wenigen Minuten (Tutorial)
Einfache Wave-Button-Animation mit JavaScript & CSS (Tutorial)
Переглядів 2,7 тис.Рік тому
Einfache Wave-Button-Animation mit JavaScript & CSS (Tutorial)
Optimale Integration von Vercel und GitHub: Ein Tutorial für Entwickler
Переглядів 1,4 тис.Рік тому
Optimale Integration von Vercel und GitHub: Ein Tutorial für Entwickler
CSS-Animation: Lerne, wie man den Shattered Glass Effekt für deine Webseite erstellt
Переглядів 2,7 тис.Рік тому
CSS-Animation: Lerne, wie man den Shattered Glass Effekt für deine Webseite erstellt
JavaScript Accessibility: Wie man Tastatur-Navigation für deine Webseite implementiert
Переглядів 2,5 тис.Рік тому
JavaScript Accessibility: Wie man Tastatur-Navigation für deine Webseite implementiert
Ein Schritt-für-Schritt-Tutorial für das Reduzieren der Ladezeit mit JavaScript
Переглядів 3,1 тис.Рік тому
Ein Schritt-für-Schritt-Tutorial für das Reduzieren der Ladezeit mit JavaScript
JavaScript Tutorial wie man Regex einfacher benutzten kann!
Переглядів 2,8 тис.Рік тому
JavaScript Tutorial wie man Regex einfacher benutzten kann!
CSS & JavaScript Tutorial für einen mega Coolen :Hover Effekt!!
Переглядів 4 тис.Рік тому
CSS & JavaScript Tutorial für einen mega Coolen :Hover Effekt!!
Unglaublich wie einfach Real-Time-Kommunikation im Web geworden ist! [DE/Tutorial]
Переглядів 3,9 тис.Рік тому
Unglaublich wie einfach Real-Time-Kommunikation im Web geworden ist! [DE/Tutorial]

КОМЕНТАРІ

  • @DI_Dev
    @DI_Dev День тому

    Gibt es eine Möglichkeit, dass man in der vite.conf es so einstellen kann, dass nicht mehr die index.html sondern eine index.php als Einstiegspunkt angesteuert werden kann?

  • @torquebiker9959
    @torquebiker9959 6 днів тому

    nice try, aber irgendwie auch umständlich. Dann bleibe ich doch lieber bei Regex.

  • @degen791
    @degen791 8 днів тому

    kann man seiner persönliche Website mit einer public domain auch auf einem nas hosten?

  • @jojopde
    @jojopde 11 днів тому

    Erst denken und dann machen. Etwas was viele nicht können. Ich bin erst am Anfang HTML CSS und werde deine Ratschläge immer im Hinterkopf behalten. 👍👍👍👍👍

  • @jojopde
    @jojopde 11 днів тому

    Also ich bin ein kompletter Anfänger und deshalb doppelt begeistert. Was ich aber nicht verstanden/gesehen habe ist, wie kommt main.sass in die index.html Über .element ??? Was ich aber schon wo anders gelernt habe ist das man nicht makieren einfügen machen muss, sondern ein CSS Short dafür machen kann. Zumindest in Visual Studio Code Habe dich als Lesezeichen abgespeichert und immer mal wieder reinschauen. Vielen Dank für deine Videos

  • @imxtwinky
    @imxtwinky 14 днів тому

    Copy & Paste Code Videos. Ich liebs.

  • @freakfreak786
    @freakfreak786 18 днів тому

    Geil danke dir. Die Videos die ich mir davor angeschaut habe sind ja erbärmlich. :D Endlich mal was nützliches.

  • @higiniofuentes2551
    @higiniofuentes2551 24 дні тому

    Is possible to click in any of the elements and trigger something like another diagram or action? Is possible to pass over an element and show a text, diagram or reference? Thank you!

  • @higiniofuentes2551
    @higiniofuentes2551 24 дні тому

    Thank you for this very useful video!

  • @SuperTruperHans
    @SuperTruperHans Місяць тому

    Aber die Größe ist doch eh egal denn CSS und Javascript sind Frontend und die aus den importiert werden sollen werden auch vom Server vollständig heruntergeladen also könnte man doch eigentlich die ganze Datei Stück einbinden

  • @od1592
    @od1592 Місяць тому

    Hallo zusammen, leider finde ich die standard Entwicklungsumgebung Einrichtung nicht. Sollte iwo unter dem Video sein. Danke

  • @patrickw0
    @patrickw0 Місяць тому

    Mega stark!! Wie hast du dir dieses ganze Wissen angeeignet?

  • @michelk.5906
    @michelk.5906 Місяць тому

    Kannte ich nicht, danke!

  • @t.711
    @t.711 2 місяці тому

    Kurz, knapp, präzise. Danke.

  • @Karlsson_vom_Dach
    @Karlsson_vom_Dach 2 місяці тому

    gutes video. für mich wärs super gewesen vlt neben visual studio code auch die codes zu sehen die man benutzen würde über eine konsole (verstehe aber auch, dass es dann vlt zu viel durcheinander wäre).

  • @noxsixX
    @noxsixX 2 місяці тому

    cooles video aber es sollte heute angemerkt werden das man die plugins nicht mehr in der config registrieren muss..

  • @MinneMedia
    @MinneMedia 3 місяці тому

    Clamp() fetzt - löst viele Probleme bzw. entrümpelt Einiges an CSS.

  • @leyley3330
    @leyley3330 3 місяці тому

    Bei mir ist es leider ein anderes Layout. Ich kann z.B. bei den Postitionsbalken nichts eingeben. Weiss nicht ob dies daran liegt, da das Video schon 6 Jahre alt ist. Kann es leider nicht genau umsetzen.

  • @gurll-fn4ul
    @gurll-fn4ul 3 місяці тому

    Richtig gut erklärt 👍👍

  • @enrikethdjc1493
    @enrikethdjc1493 3 місяці тому

    Super simpel erklärt!

  • @FerdinandHink
    @FerdinandHink 3 місяці тому

    hi

  • @germanballstuttgartball5291
    @germanballstuttgartball5291 3 місяці тому

    Schade, dass es auf Windows nicht funktioniert. Aber für meine Zwecke reicht Chrome für Android. Nur zum testen wird es etwas schwieriger. Edit: Gibt es eigentlich auch eine Möglichkeit oder externe Skripte Barcodes/QR-Codes zu generieren?

  • @machinelearning4376
    @machinelearning4376 3 місяці тому

    Super Dankeschön! Ich habe dein Video gesucht und gefunden!

  • @hazara-index5214
    @hazara-index5214 4 місяці тому

    der Rest super gut, nur Yavasckript aber Ajax hhhhhh. entweder komplett j auf y änderen oder normal aussprechen! das geht auf den Nerven!

  • @AlfredBalle-ei5ir
    @AlfredBalle-ei5ir 4 місяці тому

    Waren für mich wertvolle Tipps dabei. Danke.

  • @jevgenijhuebert-weizenegge7138
    @jevgenijhuebert-weizenegge7138 4 місяці тому

    Ich vermisse Beispiele die nicht in der Doku stehen... zum Beispiel Existenz Abfrage: Suche Nutzer die eine/keine Adresse haben... oder Suche auf List Attributen das wäre interessant

  • @MrJura911
    @MrJura911 4 місяці тому

    WOW, vielen dank für das super Tutorial.

  • @naimyazici
    @naimyazici 4 місяці тому

    Kannst du auch ein video zu service worker push Benachrichtigungen machen

  • @DevPoint.
    @DevPoint. 4 місяці тому

    Super erklärt weiter so😀😀😀

  • @masu4644
    @masu4644 5 місяців тому

    Wenn das autoConnect auf false gesetzt ist dann funktioniert die Kommunikation über das Socket, aber ich bekomme sporadisch einen Verbindungsabbruch und muss den Server neustarten, wenn ich aber autoConnect auf true setze dann bekommt der Client über das Socket keine Daten mehr, ist das Problem bekannt? :D

  • @Multibunt
    @Multibunt 5 місяців тому

    Sehr starkes Turtolial

  • @RepsyHD
    @RepsyHD 5 місяців тому

    ich weiß dass das video für anfänger sein soll aber du redest so schnell da versteht man irgendwann nurnoch div...container ...p tag. ich weiß es ist youtube und man kann die geschwindigkeit regeln aber ist trotzdem mega unangenehm wenn man alles so runtergerattert bekommt

  • @HolgerFreier
    @HolgerFreier 5 місяців тому

    super. Hat mir zum Start sehr geholfen

  • @t.h.8089
    @t.h.8089 5 місяців тому

    Richtig geiles Video! Hat mich auf eine Idee gebracht was anderes mit SVG zu testen. Warum verwendest du für dein SVG keinen negativen z-index?

  • @CNCnoob.
    @CNCnoob. 6 місяців тому

    Woher weiß das CSS ob es Valid oder Invalid ist? Wer gibt hier die Regeln vor?

    • @nare214
      @nare214 5 місяців тому

      Ich schätze mal anhand der Attribute wie z. B. type, min oder max. Bei type="email" wird z. B. wahrscheinlich ein regulärer Ausdruck verwendet. Wenn man aber eine spezifischere Bedingung braucht, muss man natürlich auf JavaScript zurückgreifen.

  • @thierrygrossglauser4387
    @thierrygrossglauser4387 6 місяців тому

    bei dieser Musik 9 Minuten lang fällt es mir schwer nicht zu vomieren. Nichtsdestotrotz sehr guter Videoinhalt

  • @d4a72
    @d4a72 6 місяців тому

    Video fängt bei 1:13 an

  • @HerrThomasE
    @HerrThomasE 6 місяців тому

    Danke für das Video - und generell für die Videos, die sind echt gut. Zum Thema: ich kann das super gut nachvollziehen!!

  • @coolmind2476
    @coolmind2476 6 місяців тому

    Fange gerade mit dem Thema an. Bei git sage ich mir momentan, wenn eine Software so kompliziert ist,dass man dafür zig Tutorials auf UA-cam braucht , um sie zu verstehen,dann ist sie schlecht. Aber mal schauen...