Dann poste doch mal deinen Versuch, man kann es sicher zum Laufen bringen.
Beiträge von Sempervivum
-
-
Und wenn das nicht geht, gibt es auch Konverter, z. B. dieser:
https://www.aconvert.com/image/png-to-svg/
macht es sehr gut, siehe Anhang.
html-seminar.de/woltlab/attachment/1243/
Edit: Das war wohl nichts, er hat einfach das PNG in eine SVG-Grafik eingebettet.
Edit2: Dieser scheint ein echtes Vektor-SVG zu erzeugen:
-
Hiernach:
https://blog.kulturbanause.de/…op-speichern-exportieren/
kann man mit PS im SVG-Format exportieren, jedenfalls die Vektor-Bestandteile. Und dein Beispiel sieht sehr wie eine Vektorgrafik aus.
-
Nein, Du hast nichts falsch verstanden. Dein Ansatz ist richtig. Man muss ihn nur noch erweitern, so dass er auch funktioniert, wenn mehrere Bilder da sind. Ich empfehle, statt der globalen Variablen eine Klasse zu setzen und zu löschen.
-
Hallo Stef, wenn man es mit Hover macht, kann man es mit wenigen Zeilen CSS erledigen:
-
Du bist nicht der erste, der mit diesem Problem konfrontiert wird. Erklärung und Lösung hier:
https://stackoverflow.com/ques…-parent-has-css-animation
Die Erklärung verstehe ich nicht, aber die Lösung funktioniert:
-
Zitat
man muss ja auch erstmal die mehreren bilder erstellen und übereinander legen und was weiss ich alles ..gibt es da ein programm für oder hast du die felge jetzt komett selber in der zeit erstellt.
Ich habe einfach ein Bild genommen, was ich im Internet gefunden habe. Und die Einzelbilder habe ich nicht jedes Mal neu gemacht, sondern aus dem Originalbild erzeugt, indem ich jeweils andere Teile heraus geschnitten habe. Dann passen sie automatisch übereinander. Weil das Bild relativ einfach ist, geht das Maskieren mit dem Zauberstab und das Ausschneiden ziemlich schnell. Ich habe dabei Photoshop Elements benutzt.
Und das Skript brauchte ich überhaupt nicht anzupassen, nur die anderen Bilder übergeben.
-
So funktioniert es:
http://ulrichbangert.de/div/we…anvas_colorize_felge.html
Die Bilder sind noch nicht ganz präzise, ich habe sie so auf die Schnelle vorbereitet.
Canvas eignet sich vor allem, wenn man auch Fotos bearbeiten will.
Du kannst ja eine Felge mit HTML und CSS gestalten, ist ja so ähnlich wie die Uhr, die Zeiger sind die Speichen etc..
-
Zitat
Der benutzer soll mit den Felgenfarben rumspielen dürfen.
Dann könnte dies vielleicht etwas für dich sein:
http://ulrichbangert.de/div/we…pt/canvas_colorize_6.html
Damit kann man Bereiche in einem Foto farbig machen, in deinem Fall den äußeren Ring, die Speichen, die Muttern etc. der Felge. Lässt sich auf ein beliebiges Foto anwenden.
-
Zitat
Kann man das den so auf alle Elemente und Links und Schrieft anwenden ?
Grob gesagt kann man mit CSS alles animieren, was eine Maßeinheit bzw. ein Zahlenwert ist wie top, left, width, height etc. Wobei Farbe eine Ausnahme ist, aber Farben werden ja auch als Zahlenwerte definiert. Bzgl. Schrift kann man die Farbe animieren aber nicht den Text. Also für einen Countdown 100 auf 0 braucht man ein Skript, das geht nicht mit CSS.
Zitatein Auto mit drehender Felge
Auch das kann man sehr gut mit einer CSS-Animation machen: transform:rotate(). Basti kennt sich damit aus.
-
Da musst Du dich zunächst mal zwischen dem Grafikformat entscheiden: Vektor bzw. SVG oder Bitmap bzw. HTML5-Canvas. SVG hat den Vorteil, dass es beliebig skalierbar ist. Deshalb bin ich in letzter Zeit mehr in diese Richtung gegangen, während ich mit Canvas und der Bibliothek jCanvas angefangen habe. jCanvas hat eine sehr übersichtliche Doku wo man alles schnell findet und die leicht zu verstehen ist.
Bei SVG habe ich bisher d3.js verwendet. Dieses scheint zwar sehr mächtig zu sein, ich hatte aber einige Probleme, Anleitungen zu den einfachen Funktionen, wie Linien, Kreise, Kreissegmente zu finden. Habe aber immer etwas gefunden und bin zum Ziel gekommen. Bin aber damit noch am Anfang und habe bei weitem noch nicht viele Möglichkeiten ausgeschöpft.
Hier ein Beispiel mit d3.js:
-
Hattet ihr schon die trigonometrischen Funktionen, Sinus und Cosinus in der Schule? Wenn nicht, dann informiere dich darüber. Damit kannst Du die Positionen der Zahlen berechnen. Dieses passt z. B. gut zu deiner Aufgabe:
-
Man kann sehr viel mit CSS-Animationen machen ohne Javascript, Timer und Schleifen. Nicht alles ist auch empfehlenswert, aber für diesen Fall ist es sehr gut geeignet und leicht zu lesen:
https://jsfiddle.net/Sempervivum/Lqr3go8q/Wenn Du es jedoch programmieren wolltest, würde sich HSL am besten eignen, weil Du dann nur den Hue-Wert ändern musst, um verschiedene Farben zu bekommen.
Der Hex-Farbcode ist auch nur RGB, wobei die Farben im Hex-Format, zweistellig, aneinander gereiht sind.
-
Hallo Basti, ich habe auch versucht, dieses mit Tampermonkey zum Laufen zu bringen, in verschiedenen Varianten, aber ohne Erfolg.
Wahrscheinlich gibt es ein Forum für Tamper-/Greasemonkey, versuch es doch dort mal.
-
Redland hat die URL ihrer Seite gepostet, dort kann man alles einsehen, was das Herz begehrt, CSS, JS, HTML.
-
Wenn ich die Elemente so anordne:
Code
Alles anzeigen<div id="bg"> <h1> Adventskalender 2018! </h1> <div class="Kalender"> <div class="door"><span class="contentclose">17</span><span class="contentopen"><img src="images/busleft.png" /></span></div> <div class="door"><span class="contentclose">18</span><span class="contentopen">Offen 18</span></div> <div class="door"><span class="contentclose">19</span><span class="contentopen">Offen 19</span></div> <div class="door"><span class="contentclose">20</span><span class="contentopen">Offen 20</span></div> </div> </div> <div id="snow"></div>
Und dem div#snow die Eigenschaft pointer-events:none gebe:
funktioniert es bei mir einwandfrei.
Das Problem bei deinem Versuch in #120 war, dass Du nicht dem div#snow die Eigenschaft pointer-events:none gegeben hast, sondern einem ganz anderen.
-
Ich empfehle, dieses Muster von MrMurphy zu verwenden:
http://boratb.bplaced.net/index55.html
Es vermeidet die Nachteile von position:fixed und passt sich automatisch an die Höhe des Header bzw. bei dir des <h3> an.
-
Hallo Draga,
- oder notiere das div#snow ganz am Anfang des body
- oder gib ihm die Eigenschaft pointer-events:none damit es durchlässig für Mausklicks wird.
-
Klasse gemacht, Basti, Respekt! Aber wenn Du fragst, ob es etwas einfacheres gibt, ist meine Antwort klar, dass es mit jCanvas viel einfacher ist, denn dort schreibst Du einfach drawArc() und das Kreissegment ist fertig. Oder mit SVG und d3.js ist es ähnlich.
-
Schau mal, hier wird diese Aufgabe diskutiert:
https://stackoverflow.com/ques…nimated-arc-with-pure-css
Es ist aber einfacher und besser verständlich, wenn man es mit jCanvas macht. Dann hat man auch gleich eine API, um es steuern zu können. Vielleicht hast Du meine Circle Timer und die kreisförmige Anzeige gesehen.