nicht angemeldet Killua
MudGuard
Killua
klawischnigg
Killua
Gunnar Bittersmann
Gunnar Bittersmann
Killua
Killua
Gunnar Bittersmann
Killua
Hallo!
bin neu hier und habe die Frage, wie man den Header Effekt der Site https://lr.ru/ machen könnte? (es ist nur eine russische Site für Landrover Teile, ansonsten nix besonders, aber dieser 3 D Effekt ist cool)
ich kann ein bisschen CSS, kenne auch ein paar dessen Animationscodes, HTML, ein wenig JS - doch bei dem Effekt weiß ich keinen Ansatz. immerhin müsste man die Position mit dem Cursor, schon beim Mouseover abfragen, dann wie weiter?
ev hat wer einen Tipp Danke!
Gunnar Bittersmann
Hi,
bin neu hier und habe die Frage, wie man den Header Effekt der Site https://lr.ru/ machen könnte? (es ist nur eine russische Site für Landrover Teile, ansonsten nix besonders, aber dieser 3 D Effekt ist cool)
welcher 3D-Effekt?
Meinst Du die beiden 2D-Bilder, die bei Mausverschiebung unterschiedlich stark verschoben werden? Also einen 2D-Effekt?
cu,
Andreas a/k/a MudGuard
ja, 2 D ... den meine ich! stimmt schon, ist nicht 3 d aber wirkt durch die Tiefenwirkung so 3d
ich hab hier also nach den falschen Stichworten gesucht, es wäre eher 2 d Effekt, bzw. parallax oder wie das heißt
PS: Könnte sein, das die Spur hier beginnt? https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#translateX.2C_translateY_und_translateZ
Hi there,
bin neu hier und habe die Frage, wie man den Header Effekt der Site https://lr.ru/ machen könnte?
Es gibt eine Javascript-Library namens locomotive-scroll oder so ähnlich, vielleicht findest Du ja da was passendes...
stark! Aber ich denke, das vorhin entdeckte mit "translate3d" reicht fürs erste.
ja, bei codepen, animista und so gibts noch vieles zum Staunen, doch diese Sachen sind deutlich komplizierter zu machen
@@Killua
immerhin müsste man die Position mit dem Cursor, schon beim Mouseover abfragen, dann wie weiter?
Es sind zwei Bilder: Vorder- und Hintergrund. Die entsprechend der Position des Cursors mit translate() (translate3d()?) verschieben – das Vordergrundbild mehr als das Hintergrundbild.
Beim Vordergrundbild sind die Personen freigestellt, d.h. der Rest der Bildfläche ist transparent. JPEG – was ein für Fotos brauchbares Grafikformat ist – unterstützt keine Transparenz. Das Vordergrundbild ist ein PNG – also riesig groß, fast ein halbes Megabyte. Schlecht. Besser: JPEG mit SVG-ClipPath.
😷 LLAP
@@Gunnar Bittersmann
Es sind zwei Bilder: Vorder- und Hintergrund. Die entsprechend der Position des Cursors mit
translate()(translate3d()?) verschieben
[Ergänzt:] das Vordergrundbild mehr als das Hintergrundbild.
Besser: JPEG mit SVG-ClipPath.
Mit Mask statt ClipPath sollte man auch Alphatransparenz (d.h. Werte zwischen 0 und 1) hinbekommen, oder?
😷 LLAP
Besser: JPEG mit SVG-ClipPath.
also dieses Tut ist mir zu hoch, keine Ahnung wie das mit den Pfaden geht.
Mit Mask statt ClipPath sollte man auch Alphatransparenz
Mask?
aber 1000 thx mal, eine einfache Version dessen lässt sich mit https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#translate3d machen
@@Killua
Mit Mask statt ClipPath sollte man auch Alphatransparenz
Mask?
😷 LLAP
Sorry, aber mit dieser Screenshotsammlung fangt glaub ich keiner was an.
Gibts da keine richtigen Tuts, ev in DE?
@@Killua
Sorry, aber mit dieser Screenshotsammlung fangt glaub ich keiner was an.
Entscheidend sind die Folien 18 und 19.
Und ja, Vortragsfolien gestalte ich natürlich passend zum Vortrag, nicht speziell für spätere Nachvollziehbarkeit.
Und wer die Bewertungsfunktion nicht verstanden hat, soll sich zum Teufel scheren.
😷 LLAP
Mit Mask statt ClipPath sollte man auch Alphatransparenz (d.h. Werte zwischen 0 und 1) hinbekommen, oder?
Das scheint mir für das fragliche Beispiel auch der einzige Weg, um einen visuellen adäquaten Ersatz zu erzielen. Das fragliche PNG würde nicht wegen feiner Strukturen wie z.B. Haare mit einem harten Pfad ziemlich hässlich auf dem Hintergrund ausschauen. Obendrein enthält es an diversen Stellen auch bewusst gesetzte Schatten.
Also würde man wohl ein PNG als Maske bauen müssen. Ich bin durchaus ab an und im Photoshop unterwegs uns stelle mir das ziemliche Friemelei vor.
Ob und wie gut das dann mit dem Translate-Kram zusammenspielt? Müsste man erst einmal testen…
Also würde man wohl ein PNG als Maske bauen müssen. Ich bin durchaus ab an und im Photoshop unterwegs uns stelle mir das ziemliche Friemelei vor.
EDIT: so schwer sollte es dann noch nicht sein. Man könnte ja eine Ebenenmaske bauen und die dann als PNG24 exportieren…
EDIT: so schwer sollte es dann noch nicht sein. Man könnte ja eine Ebenenmaske bauen und die dann als PNG24 exportieren…
ich kenne mich mit dem Maskenzeugs nicht so aus, aber das Beispiel ist in 5 min nachgemacht. Mit einem alten PS CS2 probiert. Schatten und ein bisschen weiche Kante ist hilfreich, stimmt.
wären da echt feine Strukturen (Fell, Locken, ...) dann wird das freistellen ein bisschen länger dauern. (oder man schickt das Bild zu https://www.remove.bg/de, da ist es sofort erledigt.)
ja, es schaut mit den translate() Funktionen genauso aus wie im Original.
und mir gings ja eigentlich nur um die Scripts, bzw. CSS Tricks - das ist nun gelöst.
das Hauptproblem bleibt aber die Dateigröße - wo manche hier meinen, dieses "Mask" oder "ClipPath" wäre die Lösung. keine ahnung was damit genau gemeint ist und wie das geht.
PS: denke aber, die meinen, es gibt einen Weg, wie man die Pfade (Bezierkurven oder so?) aus zB. PS exportiert und diese Koordinaten Angaben gleich in diese CSS Anweisungen namens clip rect oder so einsetzt. Kluge Idee finde ich, nur bin ich zu dumm dafür ...
doch warum man mit dem Verdecken/verstecken nur per CSS Dateigrößen spart, ist mir auch nicht klar und wie man damit die angesprochenen feinen Strukturen hinbekommt, auch nicht.
Servus!
das Hauptproblem bleibt aber die Dateigröße - wo manche hier meinen, dieses "Mask" oder "ClipPath" wäre die Lösung. keine ahnung was damit genau gemeint ist und wie das geht.
Jpeg-Grafiken werden mehr oder weniger komprimiert und sind daher relativ klein; png speichern verlustfrei und haben dafür größere Dateigrößen.
Da der ausgeschnittene Kopf ja ein viereckiges Bild mit transparentem „Hintergrund“ ist, musst du eigentlich png nehmen.
Das Tutorial zeigt, wie man eben so einen Beschneidungspfad erstellt, der dann ein (von der Dateigröße her) kleineres jpg so beschneidet, dass der gleiche Effekt erzielt wird.
PS: denke aber, die meinen, es gibt einen Weg, wie man die Pfade (Bezierkurven oder so?) aus zB. PS exportiert und diese Koordinaten Angaben gleich in diese CSS Anweisungen namens clip rect oder so einsetzt. Kluge Idee finde ich, nur bin ich zu dumm dafür ...
Ich würde da eher Illustrator oder Inkscape nehmen, weiß aber auch nicht wie und würde doch die Grafik an sich bearbeiten.
doch warum man mit dem Verdecken/verstecken nur per CSS Dateigrößen spart, ist mir auch nicht klar
Eben wegen der unterschiedlichen Grafikformate für das obere Bild (siehe Link oben)
und wie man damit die angesprochenen feinen Strukturen hinbekommt, auch nicht.
Eine Beschneidung (clip-path) schneidet das Bild mit einer scharfen Kante aus. Eine Maskierung kann eben auch weiche Kanten erzeugen, die natürlicher aussehen.
CSS/Tutorials/Masken_und_Beschneidungen/Masken
Das ist alles nicht trivial. Früher hätte ich da stundenlang rumgebastelt und mich gefreut. Heute weiß ich, dass man sowas nach einigen Monaten wsl. durch etwas völlig anderes ersetzt.
Herzliche Grüße
Matthias Scharwies
HTML/Tutorials/Bilder_im_Internet/Formate_und_Größen
Jpeg-Grafiken werden mehr oder weniger komprimiert png speichern verlustfrei und haben dafür größere Dateigrößen. Da der aus …
danke, grundlagen habe ich eh ein bisschen
Das Tutorial zeigt, wie man eben so einen Beschneidungspfad erstellt, der dann ein (von der Dateigröße her) kleineres jpg so beschneidet, dass der gleiche Effekt erzielt wird.
genau so ein Tut suche ich. Aber komplett, die Links hier scheinen alle nur einen Teil der Arbeit zu zeigen, keinen Überblick, keine Step for Step Anleitung. Also sowas wie vom Bild bis zum Code ...
... Pfade ... aus zB. PS exportiert ...
Ich würde da eher Illustrator oder Inkscape nehmen, weiß aber auch nicht wie und würde doch die Grafik an sich bearbeiten.
Inkscape kenne ich ein wenig, Illu nicht ... und meinst, damit kann man die exportierten Koordinaten irgendwie im CSS verwenden?
hab das mal probiert: ein Bild(jpg), den Teil, der scharf ( u später beweglich) im Vordergrund bleiben soll, mit Maske umrandet, umgekehrt, den Rest mehr weichgezeichnet. dann die Maskenkontur oder wie das heißt, in Pfad umgewandelt und auf "exportieren > Pfade Illustrator". dann habe ich eine "*.ai". Wenn ich das mit dem Win Editor öffne, hätte ich eine Ummenge an Zahlen, vmtl. eben die Koordinaten der Pfadpunkte ... oder so.
und diese sollten nun per CSS clip rect ... und ... nee, ich weiß dann nicht mehr weiter
...
doch warum man mit dem Verdecken/verstecken nur per CSS Dateigrößen spart,
Eben wegen der unterschiedlichen Grafikformate für das obere Bild
aha, meinst … weil jpg (statt png 24 oder so) das Ausgangsmaterial ist
Eine Beschneidung (clip-path) schneidet das Bild mit einer scharfen Kante aus. Eine Maskierung kann eben auch weiche Kanten erzeugen, die natürlicher aussehen.
ersteres ok, klar ... aber hm ... kopfkratz
da war ich gestern schon - nur ... wie weiter
Servus!
HTML/Tutorials/Bilder_im_Internet/Formate_und_Größen
Jpeg-Grafiken werden mehr oder weniger komprimiert png speichern verlustfrei und haben dafür größere Dateigrößen. Da der aus … danke, grundlagen habe ich eh ein bisschen
Das Tutorial zeigt, wie man eben so einen Beschneidungspfad erstellt, der dann ein (von der Dateigröße her) kleineres jpg so beschneidet, dass der gleiche Effekt erzielt wird. genau so ein Tut suche ich. Aber komplett, die Links hier scheinen alle nur einen Teil der Arbeit zu zeigen, keinen Überblick, keine Step for Step Anleitung. Also sowas wie vom Bild bis zum Code ...
Das war ja das erste Tutorial von Gunnar: css-tricks.com/transparent-jpg-svg/
... Pfade ... aus zB. PS exportiert ...
Ich würde da eher Illustrator oder Inkscape nehmen, weiß aber auch nicht wie und würde doch die Grafik an sich bearbeiten. Inkscape kenne ich ein wenig, Illu nicht ... und meinst, damit kann man die exportierten Koordinaten irgendwie im CSS verwenden?
hab das mal probiert: ein Bild(jpg), den Teil, der scharf ( u später beweglich) im Vordergrund bleiben soll, mit Maske umrandet, umgekehrt, den Rest mehr weichgezeichnet. dann die Maskenkontur oder wie das heißt, in Pfad umgewandelt und auf "exportieren > Pfade Illustrator". dann habe ich eine "*.ai". Wenn ich das mit dem Win Editor öffne, hätte ich eine Ummenge an Zahlen, vmtl. eben die Koordinaten der Pfadpunkte ... oder so.
und diese sollten nun per CSS clip rect ... und ... nee, ich weiß dann nicht mehr weiter
Nein: Du musst es als svg speichern und dann den Pfad ins CSS kopieren.
Sorry, das Kapitel vor dem Masken-Tutorial beschreibt das von den Anfängen an:
CSS/Tutorials/Masken_und_Beschneidungen/clip-path
Nach dem Zuschneiden mit geometrischen Grundformen kannst du eben auch einen Pfad verwenden:
CSS/Tutorials/Masken_und_Beschneidungen/clip-path#path()-Funktion
Achtung: das funktioniert (noch) nicht im Safari, der doch ziemlich weitverbreitet ist.
Solche Pfade kann man auch bei Maskierungen verwenden, wobei der Browser-Support noch bescheidener ist:
CSS/Tutorials/Masken_und_Beschneidungen/Masken#Referenzieren_einer_Maske
Wie gesagt, ich würde ein halbtransparentes png verwenden.
Herzliche Grüße
Matthias Scharwies
Nein: Du musst es als svg speichern und dann den Pfad ins CSS kopieren.
achso …
mit dem PSCS2 kam ich immer nur bis zu dem Punkt wo der schreibt: "Jetzt haben wir den Pfad dort und können ihn ganz einfach als SVG exportieren:"
aber egal, da ich (selbst wenn ich ein SVG erstellen könnte) den weiteren Weg (trotz der diversen Hinweise, Links, ...) nicht mal ansatzweise kapiere, fällt das eh flach.
Danke nochmals an alle!
@@Mitleser 2.0
Also würde man wohl ein PNG als Maske bauen müssen.
Nö, ein JPEG. Die Maske sind ja Grauwerte: Weiß wird zu 100% opak, schwarz zu 0%, also völlig transparent. Und für Farbverläufe ist JPEG ein geignetes Grafikformat.
Beispiel (die Maske ist ein ≈5⅔ Kilobyte kleines JPEG)
Ich bin durchaus ab an und im Photoshop unterwegs uns stelle mir das ziemliche Friemelei vor.
Schwarzer Hintergrund, weiße Fläche da wo Vordergrund ist, Rand etwas unscharf machen, für den Schatteneffekt noch Fläche mit geeignetem Grauwert hinzufügen – scheint mir keine Rakenwissenschaft zu sein.
😷 LLAP
Es sind zwei Bilder: Vorder- und Hintergrund. Die entsprechend der Position des Cursors mit
translate()(translate3d()?) verschieben – das Vordergrundbild mehr als das Hintergrundbild.
ja, stimmt. es wirkt so 3d weil das Hintergrundbild verschwommen ist Das mit "translate3d" habe ich hier schon gefunden, das isses!
PNG – also riesig groß, fast ein halbes Megabyte. Schlecht. Besser: JPEG mit SVG-ClipPath.
interessante Sache, das mit dem Pfad und so.
Danke!
Matthias Scharwies
