😳 7 CSS Animationen in je ⏱ einer Minute! 👍 [TUTORIAL]
Вставка
- Опубліковано 1 жов 2024
- Du brauchst einen Hoster?
🧡 bit.ly/mein-ho...
Fragen oder Probleme? Werde Teil der Community! (Kostenlos)
📣 Discord Server: / discord
Unterstütze den Channel:
🧡 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/MeineHin... (Affiliate Link)
🧡 Mein Geschäftskonto: bit.ly/MeinFree... (Affiliate Link)
🧡 Meine Buchhaltungssoftware: bit.ly/sevDeskU... (Affiliate Link)
🧡 Meine Hardware/Kamerausrüstung: amzn.to/2ccEY0l (Affiliate Link)
🧡 UA-cam Mitgliedschaft: bit.ly/UA-camS... (Affiliate Link)
Links aus dem Video:
► Live Demo: bit.ly/7Animati...
► IDE Tutorial: bit.ly/WebDesig...
Meine Social Media Seiten:
► Homepage: bit.ly/1y4rvIA
► Facebook: on. 11N25Ve
► UA-cam: bit.ly/1rPBJ9Y
► Twitter: bit.ly/1y4rMeD
► Instagram: bit.ly/1UjBLuD
► Twitch: bit.ly/29VyA7J
► Discord: / discord
Wenn ihr euch für meine Ausrüstung, Software oder Bücher interessiert dann schaut einfach hier mal vorbei und unterstützt mich mit einem Kauf.
► Meine Ausrüstung(Affiliate Link): amzn.to/2ccEY0l
► Software(Affiliate Link): amzn.to/2c0Fc7r
► Bücher(Affiliate Link): amzn.to/2bTCfcU
#Tutorial #WebEntwicklung #WebDesign
Copyright by Johannes Schiel / Unleashed Design
![5 wichtige Webdesign Prinzipien die JEDER kennen sollte! [Tutorial]](http://i.ytimg.com/vi/X2YA2PFUwr0/mqdefault.jpg)
![5 wichtige Webdesign Prinzipien die JEDER kennen sollte! [Tutorial]](/img/tr.png)
![🤯HTML picture? Was ist es und warum sollte man es nutzen! 👍 [TUTORIAL]](http://i.ytimg.com/vi/DKT_mamPdTg/mqdefault.jpg)
Wie in der Mathe Vorlesung, Sekunde nicht hingeguckt direkt halbes Buch geschrieben.
xD das stimmt :D wobei es maximal eine Minute sein kann ;)
nächstes mal den nervigen Uhrensound ausmachen
nächstes mal eine bessere Wortwahl wählen und sich auch mal bedanken👌🏻;)
So ein Video ist für mich persönlich Gold wert 💙👏
Freut mich wenn dir das Video gefällt :D
Aber sowas von Gold 😊
Muss mir dann doch mal SASS ansehen 😅
@@alff3461 sus
Richtig toll gemacht und super einfach erklärt... vielen Dank :)
Freut mich wenn dir die Videos gefallen :)
nettes kleines video für anfänger :)
ein kleiner hint: animation-direction: alternate;
Ich habe mal ne Frage: Was ist mit dem Semikolon hinter jeder Linie. Hast du das ausgeblendet?
Das ist in dem Video Sass kein reines CSS, das ist ein CSS Preprocessor :)
Von solchen Animationen wünschte ich gäbe es eine ganze Kategorie auf deinem Chanel, sehr cool, Danke
Wird in Zukunft immer mal wieder kommen solche Videos :)
Bei 68k Aufrufe nur 3k "Daumen hoch" ist schlichtweg eine Sauerei. Du versprichst etwas - du hältst es (du wirst niemals Politiker werden) und es sind Sachen, die jeder in einer Website realisieren kann und auch sollte.
Kurzer Tipp den Script Tag kannst du in den Header packen und das Attribut „defer“ hinzufügen. Hat den selben Effekt wie am Ende
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
Gut, das Video ist von 2019, jetzt haben wir 2023. Dennoch, der Code wie auch Codepen ist nicht verlinkt. Codepen habe ich selber aber den Code als Ganzes zu sehen, wäre auch nach dieser Zeit echt nice gewesen...
Ich habe mein Job gemacht und gab für diese Video LIKE. Jetzt bist du dran und bring's mir bei.
Habe mich die ganze Zeit gefragt wie das klappt ohne den geschweiften Klammern und den Semikolons bis ich gesehen habe dass es eine Sass Datei ist😂😂😂
Great video but that clock ticking is so annoying.
dictionary.cambridge.org/de/aussprache/englisch/hover
viel erfolg! die tipps sonst super. like is raus, abo auch!
xD das ist der Grund warum meine VIdeos nicht in Englisch sind haha. Vielen Dank :)
die uhr ist sehr laut. sonst super
Ja das habe ich mir aufgeschreiben :P das nächste mal wird es die nicht mehr geben :D
to hover [/ˈhʌvər/] 😜
hallo U..Bei timeline 3:25 weshalb wird hier ein & verwendet ? Würde es nicht ausreichen .effekt: anzugeben?
jein weil das & bedeutet wenn du Class A und Class B hast dann mach etwas ohne das & wäre es wenn Class B child von Class A ist mach etwas
wie ist .element::after .... &.effekt:hover...&::after in CSS??? ich habe mehrere Variante versucht, leider ohne Erfolg. Vielen Dank.
.element::after {} sollte funktionieren oder .element .effekt:hover {}
@@UnleashedDesign .element.effekt:hover {}
Du sagst css machst aber sass
Super. Video hab ich mir gleich gespeichert. Wird mir bestimmt mal behilflich sein
hehe freut mich wenn es dir gefällt :)
Gibt es eine Möglichket , die " Swiggle " Animation dann auszuführen , wenn man auf den Button Clickt ? , Super Tutorial , Hab was neues gelernt ! 😄
na klar, du musst nur die Swiggle Animation auf eine CSS Class legen und diese Class bei einem Click auf den Button legen, dann mti einem setTimeout nach der Animation die Class wieder entfernen
@@UnleashedDesign Es hat Funktioniert ! , Danke ! 😄😄
Hallo,
gibt es auch eine gute Möglichkeit die erstellen Elemente zu sortieren? Beispielsweise, wenn man vier solcher Divs mit unterschiedlichen H2 (Element, Text, Button, Container) hat und diese nach dem H2 alphabetisch sortieren möchte?
Viele Grüße
Wenn dann mit JS :) du könntest alle Elemente in einem Array haben und dieses Array dann nach dem innerhtml sortieren und darauf die Elemente nacheinander dem DOM hinzufügen.
Der schummelt doch und lässt das video schneller laufen 😁
nope :D 1:1 original Speed :)
Warum alles so schnell, gibt es dafür einen Grund?
Hallo, weil es in diesem Video der Catch war das es 7 Animationen in je 1 Minute sind :) andere Videos sind etwas langsamer
Gracias! Me sirvió mucho
Danke, sehr gut erklärt!
genial :D
✅
coole Sache, hab gleich mal ein Abo da gelassen
Danke freut mich wenn dir das Video gefallen hat :)
Würde gerne per CSS eine Postkarte animieren. Also die soll sich per links-klick horizontal an der Mittelachse drehen und dann die Rückseite zeigen. Ist das möglich?!
hallo
kannst du mir eine kurze video über css Twenty Seventeen Wordpress Hintergrundbild einfügen und Speichen usw machen besten dank du kannst auch mir per wahtapp video senden
besten Dank für deine Bemühung
Super Video 👍 Perfekt Kommentiere
Danke freut mich wenn es dir gefällt :)
Kurz. Knapp. Kompakt. Danke dir :)
Danke freut mich wenn es dir gefallen hat :)
wow! it was really very cool! Thanks!))
Thx, i hope you understand everything even when its in german :)
Hi,
Hi
wofür wird das Code ( translate) benutzt?
Hi blöde frage: wueso hast du keine css datei sondern eine sass?
Weil SASS quasi nach einem Compiling zu einer css wird :) jedoch viele Vorteile beim Schreiben bietet wie das nutzen von Variablen, vererbung usw.
@@UnleashedDesign ich hab die vorletzte und letzt animation nicht geschafft, weil ich nicht wusste, wie ich keyframes im detail schreiben soll :/
Super qualitativer Kanal den du da betreibst. Werde mir deine Videos anschauen und das Wissen zu nutze machen. Danke für deine mühe
LG
Wo ist der Code man?
Ich würde sagen in der Beschreibung unter "Live Demo" ? ;)
Gefällt mir sehr gut. Gut erklärt. Vielen Dank
die klickende uhr nervt mega!
das ist kein tutorial-----allenfalls ein Hopp Demo ...wo ist da ein lerneffect ???
Hmm, also finde eigentlich schon das man etwas lernt, es ist kein Absolute Basics Video da es nicht nur 1. Punkt hat, sondern mehr eine Inspiration für verschiedene kleine mini Effekte.
Hi
hi
@@UnleashedDesign bist du auch telefonisch erreichbar?
that was awesome brother . i like that
Sind das jez Effekte in sass oder css
Bzw kann ich die in ein css Script so schreiben?
Theoretisch ja, du müsstest entweder einen Formatter nutzen der dir aus sass einfach css generiert oder aber die fehlenden Zeichen manuell hinzufügen :)
Dieser Struggle alles in einer Minute zu schaffen xD
jap :D du glaubst nicht wie viele Versuche ich brauchte :D
warum gehen bei mir die farben nicht? also zb das $white usw funktioniert nicht?
Kann es sein das du die Farben nicht als dass Variable definiert hast ?
Titel etwas falsch gewählt für Anfänger aber sonst super video👍🏼
inwiefern? Der Titel beschreibt perfekt das Video.
👌👍🏾 interessant!
Freut mich wenn es gefallen hat :)
Hammer Effekte...!
Sehr sehr geile Animationen! Kann man echt super auf Buttons, Divs, Images etc. anwenden, mit was man ja eigentlich sehr oft interagiert!
Danke freut mich wenn dir das Video weiterhelfen konnte :)
Cooles Video für Einsteiger 👌🏻 allerdings sollte das width oder das height Attribut niemals animiert werden, wenn es sich im allgemeinen um ein grösseres Projekt handelt. Das ist extrem schlecht für die Performance.
Dann lieber dem Parent Element einen overflow: hidden geben und das ::after Element mit css „transform“ nach rechts bewegen.
Moin, sehr cooles Video. Bei mir werden einige CSS Eigenschaften nicht Autovervollständigt. box-shadow z.B. fehlt da noch irgendein Plugin für VSC? LG Marco
Hmmm also ich hab eig nur ein SASS Plugin sonst nichts
@@UnleashedDesign war wohl ein Bug im VSCode. Nach einem Neustart ging alles wie gehabt. 😀
super geil :D
Nicee
Super erklärt, super Content!
Freut mich wenn es dir gefällt :)
Mega Video! Klasse kurz und Knapp
Wie macht man dass es sich animiert bei mir springt es vom einen auf den anderen?
mit animation und dann 0 % 25 50 75 100 % dann sollte es wesentlich smoother sein falls du überhaupt noch die frage hast
Sehr cooles Video. Vielen Dank :)
Danke, freut mich wenn es dir gefällt :)
Geil! 💪🏼
Freut mich wenn dir das Video gefällt :)
Wie kann man dieses Vorschaukästchen am rechten Rand einfügen?
Das ist einfach nur mein Browser den ich im Video abschneide :D also wirklich einfach nur ein 1:1 Browserfenster klein gezogen.
@@UnleashedDesign okay Dankeschön aber der Code funktioniert bei mir leider trotzdem nicht ☹️
SUPER DUPA MEGA NICEEEE > Wann kommt deine neue Seite endlich ? :(
Das dauert noch xD Inhalte fehlen :D
So witzig, wie du hover sagst^^
Ein Grund warum ich keine Videos auf Englisch mache xD
Ich bin immer noch kein Fan davon, die Schriftgröße beim body auf 10px zu setzen, da Browser nicht umsonst die Schriftgröße von 16px vorgeben und es nur verwirren würde, wenn etwas mit rem auf 32px gebracht werden soll, 2rem aber dann 20px sind. 16px sind einheitlich bei allen Browsern und dies zu überschreiben nur weil man dann einfacher "rechnen" kann ist für mich kein Vorteil sondern einfach Faulheit und kann unnötig für Verwirrung sorgen.
Wieso benutzt du keine {, } und ; ? :o
Das ist kein css und auch kein scss. Das ist sass.
endlich das was ich gesucht habe
Freut mich wenn dir da Video helfen konnte :)
Welchen Editor benutzt du?
Ich nutze VSC :)
Top video, danke.
Danke, freut mich wenn dir das Video geholfen hat :)
sehr sehr cool
Danke freut mich wenn es dir gefällt :D
In Codepen funktioniert Codebeispiel 3 nicht, es verzieht die Seite nach unten links, nur noch das Wort ist da und die weiße Box weg.
Vielen Dank dafür
gerne :)
Sehr cool gemacht!!
Freut mich wenn es dir gefällt :)
Hammer! :D
Danke Freut mich wenn es dir gefällt :)
Richtig geiler Content
Danke freut mich wenn dir der Inhalt gefällt :)
Hammer Video!
Danke :)
8:13
??
Vielen Dank
Freut mich wenn es dir gefällt :)
Gutes Video!
danke :)
Habe bei der HTML und bei der Sass datei genau das wie du hast eingegeben, aber wen ich die seite lade passiert steht nur elements da, es kommt aber keine animation oder so
ist bei mir genau so