Jimdo-Elemente » Upcounter für Zahlen erstellen

03.05.2017 01:54

Starty
#1

St

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

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

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

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

az_
#5

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