Frage Kreis animieren - Hilfe

[Bernd Stromberg]

Hallo liebe HTML- und CSSler,

ich würde auf meiner Website gerne einen Kreis animieren. Und zwar möchte ich damit eine Art Timer realisieren, der von 20 Sekunden auf 0 Sekunden herunterzählt. Bestehen soll der Timer aus zwei übereinander gelegten Kreisen:

• unten: Schmale Linie
• oben: breite Linie

der untere Kreis sollte unanimiert bleiben, nur der obere müsste sich dann innerhalb von 20 Sekunden kreisrund abbauen. Hört sich zugegebenermaßen ziemlich komplex an Ich hab mal einen Screenshot angehängt, der es glaube ich ganz gut visualisieren kann. (Die dort sichtbare Zahl in der Mitte ist vermutlich nur schwierig realisierbar, richtig? Deshalb ist das nicht so wichtig)

Ist sowas überhaupt möglich? Ich hab in Sachen Animationen leider nur sehr rudimentäre Kenntnisse und wäre deshalb für Eure Hilfe sehr dankbar!

Lieben Dank!
Bernd

 

[Aaron3219]

Hey,

https://github.com/johnschult/jquery.countdown360
das hier sollte es sein. Lies dir auf jeden Fall die beschreibung durch und les dich ein.

WICHTIG:
Bei Punkt 3. in der Beschreibung, lese dir die Default-Options durch und adde:
"smooth: true" noch hinzu.

und um deinen 2. Kreis hinzubekommen, füge doch einfach einen 2. Kreis hinzu, welcher einen z-index von -1 hat. Den positionierts du absolute und passt ihn an. Die Fill-Color und so kannst du mit den Default-Options verändern, so dass der Counter aussieht, wie auf dem Bild.

Edit:
und weil ich so nett bin, habe ich schon mal ein bisschen davon für dich übernommen.
Wenn du das Plugin aufrufst, dann füge das hier mal ein:

Spoiler: Plugin

var countdown = $("#countdown").countdown360({
    radius: 80,
    seconds: 20,
    label: ['Sekunde', 'Sekunden'],
    fontColor: 'orange',
    autostart: false,
    fillStyle: 'transparent',
    smooth: true,
    strokeStyle: "#00FCFF",
    strokeWidth: 20,
    fontSize: 45,   
    onComplete: function () {
        //HIER ALLES REIN, WAS NACH DEM COUNTDOWN PASSIEREN SOLL
    }
});

countdown.start();

$('#countdown').click(function() {
  countdown.extendTimer(2);
});

Ins CSS kannst du das hier einfügen:

Spoiler: CSS

.second-circle {
  position: absolute;
  width: 158px;
  height: 158px;
  border: 3px solid #666;
  border-radius: 100%;
  margin-top: 18px;
  z-index: -1;
  margin-left: 17px;
}

Und das HTML wird zu dem hier:

<div class="second-circle"> 
</div>
<div id="countdown"></div>

 

[Bernd Stromberg]

Hey,

https://github.com/johnschult/jquery.countdown360
das hier sollte es sein. Lies dir auf jeden Fall die beschreibung durch und les dich ein.

WICHTIG:
Bei Punkt 3. in der Beschreibung, lese dir die Default-Options durch und adde:
"smooth: true" noch hinzu.

und um deinen 2. Kreis hinzubekommen, füge doch einfach einen 2. Kreis hinzu, welcher einen z-index von -1 hat. Den positionierts du absolute und passt ihn an. Das CSS kannst du einfach verändern, so dass der Counter aussieht, wie auf dem Bild.

Moin Aaron!

Vielen lieben Dank für den Tipp - sieht genau danach aus was ich brauche. Ich hab bereits versucht andere jquery Codes zur Implementierung eines Timers zu nutzen. Anders als bei Javascript Code hat das aber nie geklappt.
Soweit ich weiß ist jquery ja bereits in wordpress eingebunden, das heißt alles was ich noch tun müsste ist den Code innerhalb <script></script> in einem html-Feld einzusetzen, oder? Aber das funktioniert leider nicht :/

Die Frage wirkt vermutlich super dämlich - Aber ich hab mich durch das Netz gelesen und dabei keine echte Antwort finden können. Vermutlich weil's schon an den zutreffenden Begrifflichkeiten mangelt. Ist das was man dort downloadet ein Plugin oder Script?

Danke Dir jedenfalls schonmal für den Tipp!
Liebe Grüße,
Bernd

 

[Aaron3219]

Also ich habe von Wordpress nicht wirklich Ahnung, aber wenn Jquery eingebunden ist, wird das schon stimmen.

Ich habe auch schon meinen Beitrag oben editiert.
Aber deswegen meinte ich, lese dir bitte die Beschreibung durch. Dort ist eine Schritt für Schritt-Anleitung, wie man den Code implementiert.

Ich kopier dir das hier mal rein:
1. Include Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2. Include plugin's code:

<script src="jquery.countdown360.min.js"></script>

INFO: Das bedeutet aber auch, dass du den Kram von Github herunterladen musst und sie dann implementieren musst.

3. Include the plugin container in your HTML:

<div id="countdown"></div>

4. Call the Plugin:

$("#countdown").countdown360({
  radius      : 60.5,
  seconds     : 5,
  strokeWidth : 15,
  fillStyle   : '#0276FD',
  strokeStyle : '#003F87',
  fontSize    : 50,
  fontColor   : '#FFFFFF',
  autostart: false,
  onComplete  : function () { console.log('completed') }
}).start()

DEFAULT OPTIONS:

{
    radius: 15.5,                    // radius of arc
    strokeStyle: "#477050",          // the color of the stroke
    strokeWidth: undefined,          // the stroke width, dynamically calulated if omitted in options
    fillStyle: "#8ac575",            // the fill color
    fontColor: "#477050",            // the font color
    fontFamily: "sans-serif",        // the font family
    fontSize: undefined,             // the font size, dynamically calulated if omitted in options
    fontWeight: 700,                 // the font weight
    autostart: true,                 // start the countdown automatically
    seconds: 10,                     // the number of seconds to count down
    label: ["second", "seconds"],    // the label to use or false if none, first is singular form, second is plural
    startOverAfterAdding: true,      // Start the timer over after time is added with addSeconds
    smooth: false,                   // update the ticks every 16ms when true
    onComplete: function () {}
}

So und wie du deinen Code verändern musst, habe ich im obigen Beitrag beigefügt.

WICHTIG:
Bedenke, dass du die JQuery-Codes UNTEN am body-tag implementieren musst:

<body>
    ...
    ...
    ...
    <script src="jquery.countdown360.min.js"></script>
</body>

Außer, wenn du JQuery implementierst, der kann auch in den Head-Bereich:

<head>
     <title>
     </title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head

 

[Bernd Stromberg]

Danke dir für die Anpassung und Hilfe!

Ja, nach der Anleitung hatte ich es bereits probiert, das funktionierte aber nicht. Ich probier's die Tage einfach nochmal. Wird dann schon klappen ^^

Schönes Wochenende!

 

[Aaron3219]

Ich habe den Beitrag nochmal editiert.

Du hast also die JS-Dateien ALLE in Wordpress integriert?!
Schick mal einen Link zur Seite.

 

[Aaron3219]

Mmh. Ich habs mit angeschaut und entschlossen, nimm mal lieber @Sempervivum Lösung. Die kannst du glaube ich besser selber bearbeiten.

An @Sempervivum würdest du sowas auf Github/Codepen etc. mal hochladen?
Es gibt nämlich kein guten Codes für sowas. Ich musste lange suchen um sowas zu finden.

 

[Bernd Stromberg]

Danke @Sempervivum für den Code! Sieht klasse aus (y)
Ich schließe mich @Aaron3219 an, wäre sehr lieb, wenn du den auf Codepen etc. hochladen könntest :)