Dieser CSS Card Effekt macht süchtig! Spotlight Border Animation [DE/Tutorial]
Вставка
- Опубліковано 16 лип 2024
- Du brauchst einen Hoster?
🧡 bit.ly/mein-hoster
Heute bauen wir mithilfe von CSS und etwas JavaScript einfach eine Animation die jeder Website mit Cards verwenden werden könnte. Dabei müsst ihr kein CSS und JavaScript können. Ich erkläre euch in diesem Tutorial alles was ihr zu JavaScript und CSS wissen müsst um diese Animation zu bauen! Dazu ohne ChatGPT.
Fragen oder Probleme? Werde Teil der Community! (Kostenlos)
📣 Discord Server: / discord
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)
Kapitel:
00:00 Demo
00:21 Einleitung
00:49 Theorie
02:12 Setup
02:39 Cards
04:33 CSS Variablen
07:02 JavaScript
11:14 CSS Border Animation
13:42 Gradient Animation
16:23 Ende
Links aus dem Video:
► Live Demo: codepen.io/Unleashed-Design/p...
► Beispiel: linear.app/features
► VSC Theme: bit.ly/VisualStudioCodeTheme
► IDE Tutorial: • Neue Basic Web Dev IDE...
#css3 #webdesign #javascript
Meine Social Media Seiten:
► Homepage: unleashed-design.de/?...
► UA-cam: bit.ly/1rPBJ9Y
► Twitter: bit.ly/1y4rMeD
► Instagram: bit.ly/1UjBLuD
► Twitch: bit.ly/29VyA7J
► Discord: / discord
Copyright by Johannes Schiel / Unleashed Design
![Nutzt du diese CSS Animation schon? Beeindrucke jeden in wenigen Minuten! [Tutorial/DE]](http://i.ytimg.com/vi/nheVF-pMrLA/mqdefault.jpg)
![Nutzt du diese CSS Animation schon? Beeindrucke jeden in wenigen Minuten! [Tutorial/DE]](/img/tr.png)
![Neuer BOOSTER für euere Responsive oder Fluid Layouts mit CSS Clamp() Function! [TUTORIAL]](http://i.ytimg.com/vi/Cte0oYy9kYY/mqdefault.jpg)
Tolles Video. Super einfach erklärt, was wirklich für den Effekt wichtig ist. Weiter so!
Wow, sehr cool, ich habe das letzte Mal vor ein "paar" Jährchen mit HTML, CSS und JavaScript aktiv gearbeitet, damals gab es noch kein LESS, SASS, usw. Und nun versuche ich wieder in der Richtung einzusteigen. Da hat sich doch so einiges getan, echt krass. Wie gesagt, ist alles schon etwas her ;-) Und ich muss sagen, echt Wahnsinn, wie sich das entwickelt hat.
Zum Video: Es war zwar anfangs etwas tricky das in reinem plain CSS umzusetzen aber letztendlich hat alles wunderbar geklappt. Der Aufbau des Effekts ist sehr gut strukturiert und verständlich erklärt. Vielen Dank für dieses und die vielen anderen Videos von dir. Ich glaube, ich habe einen neuen Suchtchannel, kann somit jetzt mein Netflixabo getrost kündigen :-P
Ich finde es wirklich unter aller Kanone, was manche hier so unter dein Video schreiben. Danke für die kostenfreien Lerninhalte 👌 und immer weiter so
Vielen Dank freut mich wenn es dir gefällt :) Development ist einfach ein Topic was jeder anders sieht :D
Bin grad auf dieses Video gestoßen und bin sehr angetan! Das Tutorial ist sehr gut aufgebaut und deine Art zu Erklären angenehm. Der Effekt ist auch echt klasse. Weiter so! Hab mal ein Abo da gelassen :)
Danke freut mich wenn dir meine Videos gefallen :)
Absolut genial der Effekt. Bitte mehr davon 🤩👍🏼
Wird immer mal wieder ein Video dazu kommen :)
Der Effekt sieht echt toll aus. Danke für das Video :)
Danke freut mich wenn dir das Video gefällt :)
Fantastisch! Ganz anderer Stil wie bei anderen. Gut auf den Punkt gebracht! Weiter so! Der Erfolg bleibt nicht lange aus!
Was genau meinst du mit "anderer Stil" ? :)
Sehr geiles Video, danke!
Danke für deine wirklich sehr schönen Tutorials!
gerne :) freut mich wenn sie dir gefallen.
Sehr cool! Und schön angenehm erklärt. Weiter so!
Danke freut mich das es dir gefällt :)
Sehr schön und übersichtlich aufgebaut.
Danke :)
Thank you. It's cool!
Mega cooler Effekt. Danke fürs teieln!
Danke freut mich wenn es dir gefällt :) gerne Teile ich den Effekt mit der Community :D
Mega.. sehr geiler Effekt... 😍
Super Video vielen Dank dafür 😊
Freut mich wenn dir das Video gefallen hat :)
Super video!
Danke freut mich wenn dir das Video gefällt :)
Super Effekt und echt super erklärt
Danke freut mich wenn dir das Video gefällt.
cooler Kanal! Mega Produktionsqualität!
Danke freut mich wenn es dir gefällt :)
Danke 🙏
Erinnert mich sehr stark an das Video von Hyperplexed.
richtig Cool Top Video
Danke freut mich wenn dir das Video gefällt :)
Echt cool. Je mehr ich solche Videos schaue desto lustloser geh ich morgens an mein Job ran
Warum das ?
@@UnleashedDesign weil ich als was anderes arbeite als Entwickler:) bin 35 und in der IT tätig doch nicht als Entwickler. IT Support. Ich habe Spaß daran solche Videos wie deine anzuschauen doch den Mut bringen und wirklich damit anfangen bzw. den Beruf zu änden ist eine schwierige Entscheidung
Wow, absolut gutes Tutorial. Das macht Appetit darauf sich wieder mit Webdesign zu beschäftigen. Vielen Dank dafür.
Dann wurde das Ziel ja erreicht ! :)
Echt mega bin immer wieder erstaunt, was CSS und JS so alles hinkriegen
Ja ich auch immer wieder :D
Finde den Effekt sehr stark, beeindruckend. Tutorial auch richtig top. Spannend wäre noch zu sehen, ob und wie man die Performance optimieren kann, damit das mousemove Event nicht feuert ohne Ende. Kann mir vorstellen, dass das bei 100 Cards schon merklich ist.
Danke freut mich wenn dir meine Videos und der Effekt gefallen :)
Mit der Performance, bei 100 Cards hast du wahrscheinlich recht, aber warum sollte man 100 Cards mit so einem Effekt auf einer Seite darstellen? Also klar kann man machen aber das würde den Effekt sehr inflationär und übertönend machen. Das ist ehr ein Effekt für besondere Merkmale. Wenn wie z.B. bei 100 Cards die ganze Webseite, wackelt und leuchtet, würde ich das nicht durchwinken. Generell sind 100 Cards vielleicht etwas übertrieben aber das war bestimmt auch eine Hyperbel ^^ Was mich intarsiert, der Gradient-Effekt hatte im Video sehr wenig Farben, ähnlich wie UA-cam das jetzt um die Videos macht. Lag das an der Bitrate eures Videos oder sind da tatsächlich so harte Farbverläufe? Das finde ich persönlich sehr störend also müsste man, wenn man das nutzt, wohl auf einen sehr geringen Effekt setzten. Aber allein den Border Effekt finde ich klasse!
Das ist die Bit Rate des von UA-cam komprimieren Videod 😂 UA-cam macht auf meinem schönen 11GB Format 240 Mb 😅
Als ersten Schritt könnte man schonmal das `card.getBoundingClientRect()` aus dem `mousemove`-Handler rausholen und die card rects stattdessen nur einmal/initial bzw. nur bei einer Änderung der Card-Liste abfragen.
Uhh.... Das is sexy! Ersmal nen Abo! :P
Toll aufgebaut! Sehr nachvollziehbar und irgendwie "spannend", wie der Effekt nach und nach entstanden ist, hat mir wirklich extrem gut gefallen, danke dafür. 🙂
Danke freut mich wenn dir das Video und die Art gefällt :)
wow thx
Danke freut mich wenn dir das Video gefällt :)
Sehr gutes Video! Klasse und verständlich erklärt. Nur den Punkt mit der relativen Position der Child-Elemente zur Maus Position hätte man eventuell noch etwas ausarbeiten können. Aber evtl. würde das auch den Rahmen sprengen, da es an sich ja eher ein eigenes Video zu "getBoundingClientRect" bräuchte.
Ja, man kann immer relativ Tief in jede Funktion gehen, bei mir auf dem Channel kann man das immer auf dem Thumbnail die Punkte beziehen :) um so mehr um so weniger Basics erkläre ich
Servus Johannes, Marcel hier von HTMLWorld damals (falls du dich noch erinnerst) .. :D Super Tutorial! Geiler Effekt, werde den sicher auch mal verwenden. Kleiner Verbesserungsvorschlag: Wenn du wie bei 14:00 beginnst viele Positionsänderungen o.ä. zu machen, hilft es fürs Verständnis oft, wenn du zuerst einen Pseudo-Background wie ein stechendes Rot etc. verwendest. Dann sieht man immer direkt, was die einzelnen Anweisungen genau ändern. Das hattest du zu Beginn auch für das Grid-Layout gemacht. Aber ist Meckern auf hohem Niveau .. Finde es erstaunlich, wie viel Zeit und Arbeit du in deine Videos packst, mit einer Menge Liebe zum Detail. Ich habe selten so einen qualitativ hochwertigen Content gesehen! Weiter so und alles Gute für die Zukunft :)
Danke :D klar kenn ich dich noch ;) Pläne deinen Channel wiederzubeleben? Ja das stimmt danke für den Input :) werde ich mir für das nächste Video mal mitnehmen
@@UnleashedDesign Das freut mich zu hören, wenn Feedback Anklang findet :)
Achtung .. bin nicht Hendrik, er war ja der Inhaber. Ich hatte zum Ende einfach nur etwas unterstützt.
Ich hatte Hendrik vor Ewigkeiten mal kontaktiert. Aber ich glaube wir beide finden nicht mehr die Zeit UA-cam zu machen.
(auch wenn es mir unheimlich Spaß machen würde)
Aber es freut mich echt tierisch, dass du das alles durchgezogen hast und als Freelancer arbeitest.
Hab ich schon bei einem englischsprachigen UA-camr gesehen und war auch sofort beeindruckt. Ich werde es bestimmt bei einem meiner nächsten Projekte verwenden. Und danke für die deutsche Version von dir.
Ja man sieht das viel wegen Linear, diese Seite hat ja jeden zweiten Preis gewonnen für Design usw. :D
Mega Idee! Danke für das coole Tutorial.
Danke freut mich wenn dir das Video gefällt :)
Wirklich klasse Design
Danke freut mich wenn es dir gefällt :)
Der Effekt ist mega, ich bin Schockverliebt 🤩👍🏻
Danke freut mich wenn dir das Video gefällt :)
Beeindruckend. HTML, CSS und Javascript lernen bietet unglaublich viele Möglichkeiten für Designs.
Ja absolut :D
Sehr Cool, so etwas wollte ich auf meiner Personal website einbauen.
Genau für sowas ist ja der Content gemacht :)
Mir gefällt der gezeigte Effekt sehr gut. Gerne mehr so Effekte in zukünftigen Videos, wie auch Bewegungsefekte.
Wird kommen :) mache ja die letzten jahre eh nicht viel anderes :D
Megathumbnail Junge ich liebe jedes deiner Videos danke mal wieder dafür :) Mach weiter so
Danke freut mich wenn es dir gefällt :)
Ich weiß ja nicht wie ihr das seht, aber wenn ich etwas kopiere dann Verweise ich auf die Quelle: ua-cam.com/video/htGfnF1zN4g/v-deo.html
Ich kannte nur die Seite Linear die auf diversen "Best Websites"-Seiten Preise abgeräumt hat genau wegen diesem Effekt. Daher war meine Quelle für das Video Linear, diese ist auch angegeben.
Genial
ich kann irgendwie kein child erstellen...kann mir jemand helfen? Es geht nicht wenn ich geschweifte klammern in den cards klammern mache nur außerhalb davon...
nutzt du reines CSS oder SASS/SCSS in dem Video nutze ich wie in jedem meiner Videos SASS :) mit der SCSS Syntax das kann man nicht einfach in einer CSS Datei schreiben.
Der Effekt ist richtig cool leider kann ich ihn auf der Arbeit bei unseren Websites nicht verwenden da wir javaScript nur dann verwenden dürfen wenn es nicht anders geht.
Bin eh grad dabei meine eigene Seite neu zu bauen, da werd ich das auf jeden Fall mit nutzen.
Genau für sowas ist das super :)
Dachte ist pures CSS dem titel nach. Gucke mal ob ich das mit typescript hinkriege
Hallo,
denken Sie, dass man durch Dokumentationen, Tutorials Artikels...usw ein professioneller Programmierer werden kann?
Danke!
Wäre nett gewesen, hättest du erwähnt, woher die Video Idee kommt... (ua-cam.com/video/htGfnF1zN4g/v-deo.html)
Hallo die Idee habe ich wie im Intro erzählt von Linear nicht von diesem Video auch wenn es sehr gut gemacht ist :) wie viele hier auf UA-cam und anderswo gucke ich mir viele Quellen wie godly.website/ oder www.awwwards.com/ an wo ich Ideen für Videos finde. Dort hat die Website Linear die ja in dem Video und auch in meinem Video gezeigt wurde für sehr viel aufsehen gesorgt genau wegen dem im Video gezeigten Effekt. Wenn man in den Code von Linear schaut sieht man auch genau das die Idee von uns beiden von Linear geklaut wurde ;)
@@UnleashedDesign Das Design bei Linear existiert jetzt fast ein Jahr und komischerweise genau dann, wenn das Video von Hyperpexeled viral geht, veröffentlichst du das identische Video auf deutsch. Komisch, oder? An sich ist das ja weder Diebstahl noch sonst etwas. Viele sprechen kein Englisch und ich finde es gut, wenn Content ins Deutsche übersetzt wird und "neuverfilmt". Aber Credits gehören dann auch dazu.
Meine Frage ist angekommen?
Hallo welche Frage? habe ich glaube ich nicht bekommen.
Mir fällt hier noch ein es wäre eine schöne option mit boxshadow und calc(--varX/Y) einen Schatten von den einzelenen Cards zu werfen, der z.B. 1.2* die variablen des spotlighs von den Cards entfernt ist
Sag nur CHAPEAU.
Danke :)
warum klingen die off-bild Audioteile eigentlich so Basslastig? Hörst du dir nicht hinterher an, was du da aufnimmst und mischst? Das passt doch hinten und vorne nicht zusammen. Kontinuität - auch im Ton - stände dem ganzen besser.
achja, schon mal davon gehört, das Menschen atmen? Es ist extrem unnatürlich jeden Atmer wegzuschneiden. Damit erzeugst du ein negatives Gefühl beim Rezipienten und das ist sicher das wenigste, was du willst.
Ich habe das Video angeklickt, da du geschrieben hattest "Dieser CSS Card Effekt" ... und ich dachte ok mal wieder was geiles nur in css aber naja war wohl nichts... danke für nichts!
Das tut mir leid, aber Interaktivität im Sinne von User Interaktionen bekommt man nur mit etwas JavaScript hin, du kannst die x/y Position auch mit einer CSS Keyframe Animation ändern dann hättest du eine Animation jedoch ohne de Interaktion des Nutzers. Damit in Zukunft das Problem nicht nochmal aufkommt sofern ich "nur" CSS nutze ist auf den Titelbildern auch nur das CSS Logo zu sehen :)
Click Bait. Richtig wäre CSS + JS Card Effekt
Warum "diese Border"? Erstens heißt es Rand und nicht Border, zweitens warum diese? Es ist DER Rand.