v2.5.2
Giriş yap
<!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>