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.
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.
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:
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:
<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:
#snow {
pointer-events: none;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,
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/questions/1883…c-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.
Dass es nicht funktioniert, liegt daran, dass Du mit innerHTML den Inhalt der gesamten Box überschrieben hast, so dass er hier:
var dayClicked = parseInt(this.children[0].innerHTML);den geklickten Tag nicht mehr findet, weil das Element jetzt das Bild ist.
Du musst das Bild in das zweite content-span eintragen, so:
this.children[1].innerHTML = '<img src="./img/gif' + dayClicked + '.gif" />';Sehr gut, dann braucht man nur classlist.add durch classlist.toggle zu ersetzen:
var tuerchen = document.querySelectorAll(".door");
for (var i = 0; i < tuerchen.length; i++) {
tuerchen[i].addEventListener("click", function () {
now = new Date();
dayNow = now.getDate();
month = now.getMonth() + 1;
dayNow = 19; // nur zum Test
month = 12; // nur zum Test
var dayClicked = parseInt(this.children[0].innerHTML);
if (month == 12 && dayClicked <= dayNow) {
this.classList.toggle("open");
} else {
// Hinweis, dass es noch zu frueh fuer dieses Tuerchen ist
}
});
}Das Bild kannst Du mit diesem CSS in den Vordergrund bringen:
.door.open {
background-color: transparent;
opacity: 1;
position: relative;
z-index: 999;
}Für das Schließen gibt es mehrere Möglichkeiten:
Was wäre dir lieber?
Ich verstehe es auch nicht richtig: Sind die Pünktchen Platzhalte und die URLs heißen in Wirklichkeit so (z. B.)?
<img src="ordner1/thumbs/anderes-bild.jpg">
<img src="ordner1/thumbs/ganz-anderes-bild.jpg">Vermisse da nur die dunklen Töne wie Schwarz und Braun,oder ich habe was Falsch gemacht?
Nein, Du hast nichts falsch gemacht. HSL bedeutet hue (Farbton), saturation (Sättigung) und lightness (Helligkeit). Und wie Du siehst, habe ich nur den Farbton zufällig gemacht. Die Absicht war, möglichst leuchtende Farben (max. Sättigung) zu bekommen. Wenn Du auch die dunklen (braun, schwarz) und hellen (weiß) Farben bekommen willst, musst Du auch die Helligkeit zufällig machen:
Oh, mir scheint ich hatte dein Posting #3 nicht richtig verstanden. Meinst Du das "Get in Touch" und die Emailadresse, die ebenfalls die Farbe ändern? Für alle Elemente im Container, bzw, Kindelemente des Containers, braucht man nur das CSS zu erweitern:
#c1.hovered p:first-child {
color: blue;
}
#c1.hovered p.triggercontent {
color: red;
}Das ist CSS. Bei CSS gibt es bestimmte Regeln, wenn die selbe Eigenschaft mehrmals definiert wird. Die wichtigsten:
Du kannst die Farben auch weich überblenden:
.container {
transition: background-color 1s;
}