מונים מונפשים ללא JavaScript

לא מעט מעיצובי המונים כאן זזים. המספר עולה מעצמו, הלוח מצייר את עצמו, או שמשהו נופל למקומו ומתייצב.

אף אחד מהם אינו משתמש אפילו בשורת JavaScript אחת.

איך זה עובד

המונים הם SVG, ו־SVG יכול להכיל גיליון סגנונות משלו. התנועה היא CSS keyframes שנכתבו בתוך התמונה עצמה, כך שהכול מגיע כקובץ אחד, בבקשה אחת, ומתחיל לזוז מעצמו. הדפדפן מטפל בו כמו בכל הנפשת CSS אחרת: במנגנון ההרכבה, בלי להעיר סקריפט.

התוצאה המעשית היא שמונה מונפש עולה כמו מונה דומם. הגדלים שלהם נעים בין כ־1.8 ל־3.2 KB. אין ספרייה, אין בקשה שנייה, ואין דבר שיחסום את יתר הדף בזמן הטעינה.

סוגי התנועה

הם מקובצים לפי האופן שבו הם זזים ולא לפי המראה שלהם, כי מתברר שזה מה שהבחירה באמת תלויה בו:

• נבנים בהדרגה – המונה מצייר את עצמו, קו אחר קו.
• עם משקל – משהו נופל פנימה, קופץ ומתייצב. תנועה עם אינרציה מאחוריה.
• עתידניים בתנועה – זוהר, קווי סריקה, ערפל נסחף. הראוותניים ביותר מבין השלושה.

יש גם משפחה עתידנית רגועה, למקרה שרוצים את המראה בלי התנועה. חמישים ושמונה מהעיצובים המוצעים מונפשים בזמן הכתיבה, הרבה יותר ממה שתוכנן מלכתחילה לבנות.

כשמבקר ביקש פחות תנועה

במערכות הפעלה יש הגדרה להפחתת הנפשה. אנשים מפעילים אותה בגלל רגישות לתנועה, הפרעות במערכת שיווי המשקל, מיגרנות, ולפעמים פשוט כי דברים שזזים בדף מתישים. הדפדפן מעביר את ההעדפה הזאת לכל דף.

המונים האלה מכבדים אותה. אם מבקר ביקש ממערכת ההפעלה להפחית תנועה, ההנפשה אינה פועלת והוא מקבל מונה דומם עם אותו מספר. הדבר נבדק עיצוב אחר עיצוב בזמן הכתיבה, ולא הונח מראש.

כדי לכבד זאת נדרשת שורה אחת בגיליון סגנונות, וזה ההבדל בין קישוט למטרד.

מילה נגד השימוש בהם

תנועה מושכת את העין. זאת כל מטרתה, וזה גם הנימוק לריסון.

אם המונה אינו נושא הדף – וברוב הדפים הוא אינו כזה – דבר שזז בפינה מתחרה בתוכן האמיתי על תשומת הלב של המבקר, שהיא הייתה מטרת הדף. מונה דומם מציג את אותו מספר בלי לבקש דבר.

יש להשתמש במונים המונפשים במקום שבו המונה הוא חלק מאופי הדף: אתר אישי, דף פרויקט, משהו עם מעט ראוותנות. בדף שבו מישהו מנסה לקרוא, יש לבחור מונה שנשאר דומם.