عدادات متحركة دون JavaScript
عدد لا بأس به من تصاميم العدادات هنا يتحرك. فالرقم يتصاعد من تلقاء نفسه، أو ترسم اللوحة نفسها تدريجيًا، أو يسقط شيء في مكانه ثم يستقر.
ولا يستخدم أيٌّ منها سطرًا واحدًا من JavaScript.
كيف يعمل ذلك
العدادات بصيغة SVG، ويمكن لملف SVG أن يحمل ورقة الأنماط الخاصة به. والحركة عبارة عن إطارات مفتاحية (keyframes) في CSS مكتوبة داخل الصورة نفسها، لذا يصل كل شيء في ملف واحد، وبطلب واحد، ويبدأ بالحركة من تلقاء نفسه. ويتعامل المتصفح معه كما يتعامل مع أي حركة CSS أخرى: في مرحلة التركيب (compositor)، دون إيقاظ أي سكربت.
والنتيجة العملية أن العداد المتحرك يكلّف ما يكلّفه العداد الثابت. فحجمها يتراوح بين 1.8 و3.2 كيلوبايت تقريبًا. لا مكتبة، ولا طلب ثانٍ، ولا شيء يعطّل بقية الصفحة أثناء التحميل.
أنواع الحركة
جُمعت حسب طريقة حركتها لا حسب شكلها، لأن هذا تبيّن أنه ما يتوقف عليه الاختيار فعلًا:
- البناء التدريجي — يرسم العداد نفسه حتى يكتمل، خطًّا بعد خط.
- بثقل — يسقط شيء، ويرتد، ثم يستقر. حركة يقف وراءها قصور ذاتي.
- مستقبلي، متحرك — توهج، وخطوط مسح، وضباب منجرف. الأكثر استعراضًا بين الثلاثة.
وهناك أيضًا عائلة مستقبلية هادئة، لمن يريد ذلك المظهر دون حركة. وحتى كتابة هذه السطور، يبلغ عدد التصاميم المتحركة المتاحة 58، وهو عدد يفوق بكثير ما كان أحد ينوي بناءه.
عندما يطلب الزائر حركة أقل
في أنظمة التشغيل إعداد لتقليل الحركة. يفعّله الناس بسبب الحساسية للحركة، أو اضطرابات الجهاز الدهليزي، أو الصداع النصفي، وأحيانًا لمجرد أن الأشياء المتحركة في الصفحة مُرهِقة. وينقل المتصفح هذا التفضيل إلى كل صفحة.
وهذه العدادات تحترمه. فإذا طلب الزائر من نظامه تقليل الحركة، لا تعمل الحركة ويرى عدادًا ثابتًا يحمل الرقم نفسه. وقد جرى التحقق من ذلك تصميمًا تصميمًا أثناء كتابة هذا المقال، لا افتراضًا.
احترام ذلك لا يكلّف سوى سطر واحد في ورقة الأنماط، وهو الفرق بين الزينة والإزعاج.
كلمة ضد استخدامها
الحركة تجذب العين. هذا هو الغرض منها كله، وهو أيضًا الحجة للاعتدال في استخدامها.
إذا لم يكن العداد موضوع الصفحة — وهو ليس كذلك في معظم الصفحات — فإن شيئًا يتحرك في الزاوية ينافس المحتوى الحقيقي على انتباه الزائر، وهو ما وُجدت الصفحة من أجله. أما العداد الثابت فيعرض الرقم نفسه دون أن يطلب أي شيء.
استخدم العدادات المتحركة حيث يكون العداد جزءًا من طابع الصفحة: موقع شخصي، أو صفحة مشروع، أو شيء فيه قدر من الاستعراض. أما في صفحة يحاول فيها أحدهم القراءة، فاختر عدادًا ثابتًا.