Gdzie wykorzystać ten przykład?
Statystyki, podsumowania i wskaźniki. Wariant „Liczniki: liczba na pieczęci” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
JavaScript wyznacza kolejne wartości pomiędzy początkiem a celem. Format liczby oraz tempo zależą od wybranego wariantu.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem
</body>. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Nie wymyślaj statystyk. Docelową wartość ustaw na podstawie własnych danych i sprawdź czytelność większych liczb.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu, Czas animacji. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Liczniki: liczba na pieczęci
HTML
<div class="effect"><div class="count-pack"><i aria-hidden="true"></i><strong><span class="value">0</span></strong><p>Liczniki</p><button type="button">Odtwórz licznik ↻</button></div></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.count-pack{max-width:380px;margin:auto;padding:25px;border-radius:12px;border:4px double #e95b30;border-radius:50%;padding:35px}.count-pack strong{display:block;font:700 66px/1.1 Arial,sans-serif;letter-spacing:-3px;color:#e95b30}.count-pack p{font-size:13px;margin:14px 0}.count-pack button{display:block;border:0;background:none;border-bottom:1px solid #e95b3055;padding:5px;margin:18px auto 0;color:#e95b30;font-size:10px}.count-pack i{font-style:normal;font-size:40px;color:#e95b30}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}
JavaScript
const value=document.querySelector('.count-pack .value');
function count(){const start=performance.now();const duration=1200;const target=1024;if(matchMedia('(prefers-reduced-motion: reduce)').matches){value.textContent=target;return}function frame(now){const progress=Math.min((now-start)/duration,1);value.textContent=Math.round(target*(1-Math.pow(1-progress,3))).toLocaleString('pl-PL');if(progress<1)requestAnimationFrame(frame)}requestAnimationFrame(frame)}
document.querySelector('.count-pack button').addEventListener('click',count);count();