<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Counter-up Örneği | PROTOTURK</title>
<style>
@import"https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap";
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
html, body {
font-family: 'Mulish', sans-serif;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.counter-up {
font-size: 10vh;
font-weight: 500;
}
.go-back {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.go-back a {
font-size: 20px;
color: #fff;
letter-spacing: 1px;
text-decoration: underline wavy;
}
button {
height: 60px;
width: 300px;
margin-top: 20px;
background: #00d859;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
letter-spacing: 1px;
color: #222;
border-radius: 3px;
cursor: pointer;
border: none;
outline: 0;
}
</style>
</head>
<body>
<div class="go-back">
<a href="https://prototurk.com/makaleler/jquery-ile-eklentisiz-counter-up-yapmak">Makaleye geri dönmek için tıklayın</a>
</div>
<span class="counter-up" data-value="5000000" data-prefix="$" data-duration="2000" data-format="true"></span>
<button type="submit">Başlat</button>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
const isIframe = (self.frameElement && (self.frameElement + "").indexOf("HTMLIFrameElement") > -1);
if (isIframe) {
$('.go-back').remove();
}
$('button').on('click', function () {
$('.counter-up').each(function () {
$('button').hide();
$(this).prop('CounterUp', 0).animate({
CounterUp: $(this).data('value')
}, {
duration: $(this).data('duration') || 3500,
easing: 'swing',
step: step => {
let number = Math.ceil(step);
if ($(this).data('format')) {
number = new Intl.NumberFormat('tr-TR').format(number);
}
if ($(this).data('prefix')) {
number = $(this).data('prefix') + ' ' + number;
}
if ($(this).data('suffix')) {
number += ' ' + $(this).data('suffix');
}
$(this).text(number)
},
complete: () => {
$('button').show().text('Yeniden Başlat');
}
})
});
}).trigger('click');
</script>
</body>
</html>