In SCSS eine Animation bauen wie ein Profi! [DE/Tutorial]

[@ayzagora]

Das ist ein Super effect. Ich hab da gerade ein Projekt draus gemacht. Ziel: Auf einem Begrüßungsbildschirm soll links der Text stehen und rechts diese Animation laufen. Dass ganze versuche ich aber in Basic-CSS umzusetzen. Als "Lernender" will ich erst das Grundverständniss für die basics haben, bevor ich mit fortschrittlichen Techniken anfange. Wenn ich das hinbekomme teile ich das Ergebnis auch gerne.

[@Jan18884]

Wenn ich deine Videos so sehe könnte ich als Backend- und Cloud Developer manchmal neidisch werden. 😂 Sieht super interessant aus. 👍

[@UnleashedDesign]

:D Freut mich wenn es trotzdem gefällt :D

[@bluntman2k6]

Endlich mal eine coole Anwendung für background-attachment :D Wusste nie so recht wofür man das sinnvoll nutzen könnte

[@UnleashedDesign]

Freut mich wenn dir das Video gefallen hat :)

[@ScriptRaccoon]

Gut erklärt :). Weil du schon den Code optimiert hast: Bei den Keyframes lassen sich die sich wiederholenden Definitionen zusammenfassen. So:
0%, 30%, 100% {
...
}

[@UnleashedDesign]

Danke :) aber was ich damit meinte ist das man die Bilder auch als Array definieren könnte und durch eine @each Loop die Berechnung auslagern kann also das man quasi ohne Arbeit auch 2 oder 5 Bilder nutzen könnte :)

[@ScriptRaccoon]

@@UnleashedDesign ich glaube wir reden aneinander vorbei. :)
Das hier:
0% {
Background image 1
}
30% {
Background image 1
}
lässt sich vereinfachen. Einfach
0%, 30% {
Background image 1
}
Also auch wenn man das in eine Loop packt, kann man damit Code Duplication sparen.

[@JBe-tt2eb]

Coole Sache. Das macht echt was her. Durch deine Erklärung habe ich es umso leichter den Code zu verstehen. Vielen Dank

[@UnleashedDesign]

Danke freut mich wenn dir die Inhalte gefallen :)

[@OnkelNenny]

Sieht mega aus! 😍

[@FlorianBinder]

Geiler Effekt - tolles Video!

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt ;)

[@wunderbarrecordings]

Prima Video + schicker Effekt. Btw: die Angabe flex-direction: row im Container kannste getrost weglassen.

[@michabbb]

sehr genial !!! 👍

[@UnleashedDesign]

Danke :)

[@schmid-johann]

Thx😊

[@UnleashedDesign]

Danke :)

[@walkinInst1nct]

Schöner Effekt. Ich bin Anfänger und wollte es nachbauen. Ab der Erweiterung &-1 { } scheint es bei mir gar nichts mehr zu übernehmen. Auch ausgeschrieben mit .column-1 { } passiert einfach gar nichts. Alles ; und alle {} passen, wurde mehrfach überprüft. Jemand eine Idee?

[@UnleashedDesign]

Hallo, das liegt vermutlich daran das du kein SCSS sondern reines CSS nutzt :) &-1 ist eine Syntax die nur mit SASS/SCSS funktioniert mehr dazu findest du in meiner Entwicklungsumgebungs Erklärung.

[@walkinInst1nct]

Vielen Dank für die Antwort. Nach einer Nacht drüber schlafen und mal die Unterschiede googlen ist mir das dann auch gekommen. Habe jetzt deine Umgebung offen und arbeite darin. Leider zeigt mir der LocalHost nicht meine Ergebnisse. Gibt es dafür auch eine Lösung?

[@walkinInst1nct]

Erledigt. Ein zweites Mal npm run dev hat das Problem dann gelöst. Jetzt läufts.

[@groovebird812]

Ich verstehe immer noch nicht, wie das Hintergrundbild nur durch background-position: fixed so aufgeteilt wird, das in allen items ein anderer auschnitt zu sehen ist, der dann letztlich das gesamte bild ergibt.

[@RemiTywonek]

Durch position fixed werden alle Bilder identisch am Ursprung des Viewport ausgerichtet, sprich an der linken obere Bildschirmecke, sie liegen also alle immer Deckungsgleich, unabhängig davon, wie Du Deinen Viewport aufzieht in Höhe und Breite. Durch background-image entsteht somit die Illusion eines Mosaiks, weil die jeweiligen Ausschnitte durch Deckungsgleichheit immer perfekt zu einander passen werden .... sehr genialer Effekt, man kann sich gleich so viele Effektvarianten vorstellen. Danke für die Anregung.

[@groovebird812]

​@@RemiTywonek ah ok, danke für den Hinweis. Ich dachte jedes Bild wird innerhalb des eigenen Containers augerichtet. Durch fixed ist aber dann das body Element der Ausgangspunkt