COUNTER UP - RESPONSIVE
Progetto FREE
Recentemente aggiornato da Giancarlo Web utente help center Incomedia. 
PRO
- Effetto gradevole (indipendentemente dai gusti personali)
- Possibilità di manipolare i contatori cambiando quelli presenti sul codice
- Utilizzo di risorse minime
- Responsive
CONTRO 
- Nessuna controindicazione ma è preferibile per l'utente che vuole smanettare copiare il codice direttamente da PC per evitare che i browser possano interpretare male i rientri del codice che si verificano al restringimento della tabella a risoluzioni più basse.
CREDITI
- Sito web GiancarloWeb. Sul sito in questione potete trovare altri interessanti codici e dei bellissimi template pronti all'uso per sviluppatori incomedia.
Un esempio per creare su un semplice oggetto COUNTER UP ossia un contatore animato che parte da un valore iniziale (spesso 0) e aumenta gradualmente fino a un valore finale in un certo intervallo di tempo. È spesso utilizzato nei siti web per mostrare statistiche animate, come il numero di clienti, vendite o eventi completati. Ecco Un esempio di come si può realizzare .
Il contenuto del codice e dei relativi testi vanno inseriti in un normale oggetto html 
2,523
Customers
63,075
Total Web Pages
12,218
Cups Of Coffee
CODICE DA INSERIRE
aggiornato il 25.03.2025
INSERISCI IN CODICE HTML | ||
<!-- Includi le librerie nel corretto ordine --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css"> <div class="container"> <div class="row"> <div class="col-md-4"> <h1><span class="counter">2,523</span></h1> <h3>Customers</h3> <i class="fa fa-users"></i> </div> <div class="col-md-4"> <h1><span class="counter">63,075</span></h1> <h3>Total Web Pages</h3> <i class="fa fa-desktop"></i> </div> <div class="col-md-4"> <h1><span class="counter">12,218</span></h1> <h3>Cups Of Coffee</h3> <i class="fa fa-coffee"></i> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js"></script> <script> $('.counter').counterUp({ delay: 10, time: 2000 }); $('.counter').addClass('animated fadeInDownBig'); $('h3').addClass('animated fadeIn'); </script> |
INSERISCI SU ESPERTO | ||
.col-md-4 { text-align: center; padding-bottom: 50px; border-right: 1px dashed black; } .col-md-4:last-child { border-right: 0px solid black; } .counter { animation-duration: 1s; animation-delay: 0s; } i { font-size: 20px !Important; } @media (max-width: 991px) { .col-md-4 { border-right: 0px dashed black; border-bottom: 1px dashed black; width: 50%; margin: auto auto; } .col-md-4:last-child { border-bottom: 0px dashed black; } } |
COMMENTA ▼
2 recensioni
MASSIMILIANO F.
Lunedì 10 Mar 2025
Guida spiegata in modo semplice e chiaro! Ho finalmente risolto quei fastidiosi errori del software. È come avere un mentore sempre a disposizione! Anche Giancarlo web da quello che ho visto sul suo sito non scherza :))
MAX
Sabato 08 Mar 2025
initialization of the comments part