Beiträge von Sempervivum

Hallo Flo und willkommen im Forum,

dieses JSON ist nicht valide. Ergänze ich "]}" am Ende, ist es valide und sieht so aus:

{
    "feed_configs": [
        {
            "formatter": "rss",
            "max": 100,
            "username": "google_newest",
            "refreshable": false,
            "password": "!newest!"
        },
        {
            "formatter": "google",
            "max": 100,
            "username": "google_newest_sitemap",
            "refreshable": false,
            "password": "!newest_sitemap!"
        },
        {
            "sources": [
                "Job",
                "JobMarkdown",
                "Randstad",
                "KarrierePlace",
                "Steinbeis",
                "ScorePersonal",
                "FYE",
                "SEGPersonal",
                "JobCafe",
                "ElkeBode",
                "PlusPersonal"
            ],
            "username": "indeed",
            "password": "!indeed!"
        }
    ]
}

Soll es so sein?

Klasse! Irgend wie musst Du es aber schon verstanden haben, denn Du hast Sinus und Cosinus richtig angewendet.

Zitat

stop und play läuft ja,aber rückwärts nicht.was für ein fehler habe ich da drinne?

1. Du hast die Funktion erst ganz am Ende definiert, deshalb war sie zuvor, als Du sie dem Knopf zugewiesen hast, noch nicht definiert.
2. Du hast für die Funktion und die ID des Knopfes den selben Namen verwendet.

So funktioniert es:

http://jsfiddle.net/Sempervivum/uL9A9/19/

Zitat

noch einfach ein div vor bauengeht so einfach nicht

Ich habe es zwar nicht probiert, aber eigentlich sollte das der richtige Weg sein. Dann kannst Du beide Animationen unabhängig voneinander definieren.

OOP mit ihren Klassen und Objekten gibt es schon ein wenig länger:

Zitat

Den wirklichen Durchbruch erfuhr die objektorientierte Programmiersprache aber mit der heute immernoch sehr beliebten Sprache: C++ in den 1980er Jahren.

Schon in den 70er-Jahren ist die Programmiersprache C++ (gesprochen: C plus plus) als objektorientierte Weiterentwicklung der funktionalen Programmiersprache C entstanden. Vorgestellt wurde sie dann 1983 von ihrem Entwickler Bjarne Stroustrup.

http://www.oop-uml.de/oop-entwicklung.php

Man muss aber unterscheiden zwischen Klassen im Sinne von OOP und den Klassen von CSS. Vererbung gibt es nur bei ersteren.

Was war denn jetzt die Lösung, konntest Du es aus PS exportieren? Ich habe nur Elements 14 und konnte es nicht testen.

Wenn man eine Klasse verwendet, ist es relativ einfach:

https://jsfiddle.net/Sempervivum/54v205fn/6/

Man muss nur wissen, wie man sie setzt, abfragt und löscht, Stichwort classList.

Zitat

kann man klassen eigentlich auf false und true setzen???

Nein, eine Klasse hat keinen Wert, man kann sie nur hinzu fügen und löschen. Wenn man einen Wert speichern möchte, muss man ein data-Attribut verwenden:

ele.setAttribute("data-zoomed", "true");

Dann poste doch mal deinen Versuch, man kann es sicher zum Laufen bringen.

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:

http://pngtosvg.com

html-seminar.de/woltlab/attachment/1244/

Hiernach:

https://blog.kulturbanause.de/2014/02/svg-gr…rn-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:

https://jsfiddle.net/Sempervivum/r68fbL99/

Du bist nicht der erste, der mit diesem Problem konfrontiert wird. Erklärung und Lösung hier:

https://stackoverflow.com/questions/2111…s-css-animation

Die Erklärung verstehe ich nicht, aber die Lösung funktioniert:

http://jsfiddle.net/Sempervivum/uL9A9/14/

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/webentwick…rize_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/webentwick…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.

Zitat

ein 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:

https://jsfiddle.net/Sempervivum/40kLdxr0/10/

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:

https://www.onlinemathe.de/mathe/inhalt/Sinus

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.

https://de.wikipedia.org/wiki/Hexadezimalsystem

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.