Κινούμενοι μετρητές χωρίς JavaScript

Αρκετά από τα σχέδια μετρητών εδώ κινούνται. Ο αριθμός μετράει μόνος του προς τα πάνω, ή το πλαίσιο σχεδιάζεται σταδιακά, ή κάτι πέφτει στη θέση του και ησυχάζει.

Κανένα από αυτά δεν χρησιμοποιεί ούτε μία γραμμή JavaScript.

Πώς λειτουργεί

Οι μετρητές είναι SVG, και ένα SVG μπορεί να περιέχει το δικό του φύλλο στυλ. Η κίνηση είναι CSS keyframes γραμμένα μέσα στην ίδια την εικόνα, οπότε το σύνολο φτάνει ως ένα αρχείο, με ένα αίτημα, και αρχίζει να κινείται από μόνο του. Το πρόγραμμα περιήγησης το χειρίζεται όπως κάθε άλλη κίνηση CSS: στον compositor, χωρίς να ξυπνήσει κάποιο script.

Η πρακτική συνέπεια είναι ότι ένας κινούμενος μετρητής κοστίζει όσο και ένας στατικός. Το μέγεθός τους κυμαίνεται περίπου από 1,8 έως 3,2 KB. Δεν υπάρχει βιβλιοθήκη, ούτε δεύτερο αίτημα, ούτε τίποτα που να μπλοκάρει την υπόλοιπη σελίδα όσο φορτώνει.

Τα είδη κίνησης

Είναι ομαδοποιημένα με βάση το πώς κινούνται και όχι με βάση την εμφάνισή τους, γιατί αποδεικνύεται ότι από αυτό εξαρτάται στην πράξη η επιλογή:

• Σταδιακό χτίσιμο — ο μετρητής σχεδιάζεται σταδιακά, γραμμή προς γραμμή.
• Με βάρος — κάτι πέφτει, αναπηδά και ησυχάζει. Κίνηση με αδράνεια.
• Φουτουριστικά, σε κίνηση — λάμψη, γραμμές σάρωσης, ομίχλη που μετακινείται. Η πιο εντυπωσιακή από τις τρεις.

Υπάρχει επίσης μια ήρεμη φουτουριστική οικογένεια, για την περίπτωση που θέλετε αυτή την εμφάνιση χωρίς την κίνηση. Πενήντα οκτώ από τα διαθέσιμα σχέδια κινούνται τη στιγμή που γράφεται αυτό το κείμενο, πολύ περισσότερα απ’ όσα σκόπευε αρχικά να φτιάξει κανείς.

Όταν ένας επισκέπτης έχει ζητήσει λιγότερη κίνηση

Τα λειτουργικά συστήματα έχουν μια ρύθμιση για τη μείωση των κινούμενων εφέ. Οι άνθρωποι την ενεργοποιούν λόγω ευαισθησίας στην κίνηση, λόγω αιθουσαίων διαταραχών, λόγω ημικρανιών, και μερικές φορές απλώς επειδή ό,τι κινείται σε μια σελίδα είναι κουραστικό. Το πρόγραμμα περιήγησης μεταβιβάζει αυτή την προτίμηση σε κάθε σελίδα.

Αυτοί οι μετρητές τη σέβονται. Αν ένας επισκέπτης έχει ζητήσει από το σύστημά του να μειώσει την κίνηση, η κίνηση δεν εκτελείται και βλέπει έναν στατικό μετρητή με τον ίδιο αριθμό. Αυτό ελέγχθηκε σχέδιο προς σχέδιο κατά τη συγγραφή του κειμένου, δεν θεωρήθηκε δεδομένο.

Ο σεβασμός αυτής της προτίμησης κοστίζει μία γραμμή σε ένα φύλλο στυλ, και κάνει τη διαφορά ανάμεσα σε ένα διακοσμητικό στοιχείο και σε μια ενόχληση.

Ένα επιχείρημα κατά της χρήσης τους

Η κίνηση τραβάει το βλέμμα. Αυτός είναι ακριβώς ο σκοπός της, και αυτό είναι επίσης το επιχείρημα υπέρ της συγκράτησης.

Αν ο μετρητής δεν είναι το θέμα της σελίδας — και στις περισσότερες σελίδες δεν είναι — τότε κάτι που κινείται στη γωνία ανταγωνίζεται το πραγματικό περιεχόμενο για την προσοχή του επισκέπτη, που ήταν και ο σκοπός της σελίδας. Ένας στατικός μετρητής λέει τον ίδιο αριθμό χωρίς να ζητά τίποτα.

Χρησιμοποιήστε τους κινούμενους εκεί όπου ο μετρητής είναι μέρος του χαρακτήρα της σελίδας: ένας προσωπικός ιστότοπος, μια σελίδα έργου, κάτι με λίγη διάθεση για επίδειξη. Σε μια σελίδα όπου κάποιος προσπαθεί να διαβάσει, επιλέξτε έναν που μένει ακίνητος.