Upcounter für Zahlen erstellen

Antworten
#1
03.05.2017 01:54
avatar  Starty
#1
St
Starty

Hallo Zusammen,

bisher ist es mir nicht gelungen einen UpCounter zu erstellen d.h. nach dem nach unten scrollen soll die Zahl z.B. von 0 auf 100 steigen.

Ich hoffe, ihr könnt mir weiterhelfen!

Lg Starty


 Antworten

 Beitrag melden
#2
06.05.2017 01:14
avatar  Starty
#2
St
Starty

möchte gerne z.B. diesen IQuery einbinden - leider keine Ahnung wie bzw funktioniert nicht

<head>
<script>
jQuery(document).ready(function($) {
$('.counter').counterUp({
delay: 10,
time: 1000
});
});
</script>
</head>
<body>
<span class="counter">1,234,567</span>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
</body>


 Antworten

 Beitrag melden
#3
06.05.2017 01:24
avatar  Starty
#3
St
Starty

oder per Javascript?!

var options = {
  useEasing : true,
  useGrouping : true,
  separator : ',',
  decimal : '',
};
var demo = new CountUp("myTargetElement", 0, 65, 0, 3, options);
demo.start();


 Antworten

 Beitrag melden
#4
06.05.2017 01:51
avatar  Starty
#4
St
Starty

oder gibt es eine Möglichkeit folgendes miteinander zu verknüpfen?

<div id="value">65</div>
<script type="text/javascript">
function animateValue(id, start, end, duration) {
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}

animateValue("value", 0, 65, 3000);
</script>



<p><span style="font-size: 65px;"><span style="color: #cc0000;"><strong>65</strong></span></span></p>


 Antworten

 Beitrag melden
#5
09.05.2017 12:10
avatar  az_
#5
avatar
az_

...für Adaptionen nach Jimdo immer erst die Demo anschauen:

- https://bfintal.github.io/Counter-Up/demo/demo.html

da findest Du dann auch die richtigen Quelldateien!

LG, az

PS: Test s.h.: https://designtest-dublin.jimdo.com/test/

PPS: Quellenangaben sind auch hier im Forum immer sehr hilfreich!


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Forenspende

 

Spenden über PayPal

Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit. 

Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.

 Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!

...hier ist der direkte Spendenlink
für unsere Kaffeekasse!