האייקונים שאפשר לזרוק בדף הבית שלנו

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

למה קופסה

הרעיון הראשון היה לתת לאייקונים לעוף על פני כל החלק העליון של הדף. אבל שם נמצאים הכותרת והכפתורים שלנו, ואייקונים שנוחתים על “Start a project” הם מחיר גבוה מדי בשביל קצת כיף. קופסה ליד הפתיח, עם תווית בקצה שלה, שומרת על המשחק במקום מוגדר. היא גם התאימה לחלל שכבר היה קיים: המקום הריק מימין לפתיח ולכפתורים במסך רחב. בטלפונים היא ממוקמת מתחת לכפתורים.

פיזיקה אמיתית, מ-Matter.js

עיגולים שמתנגשים זה בזה קל לכתוב לבד. אבל אייקונים של אפליקציות הם ריבועים עם פינות מעוגלות, וריבוע שמתגלגל כמו מטבע נראה לא נכון מיד. כדי לקבל התהפכות ושכבות מסודרות כמו שצריך צריך מנוע פיזיקה אמיתי, ולכן השתמשנו ב-Matter.js. כל אייקון הוא מלבן עם פינות מעוגלות (chamfer) שמתאים לרדיוס הפינות של האייקון, 22%, בתוך ארבעה קירות קבועים.

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

אלמנטי DOM, לא canvas

Matter.js יכול לצייר ל-canvas, אבל אנחנו משתמשים בו רק לחישובים. האייקונים הם קישורים רגילים עם תמונות, שממוקמים בכל פריים באמצעות CSS transform:

st.setProperty("--x", (b.position.x - size / 2) + "px");
st.setProperty("--y", (b.position.y - size / 2) + "px");
st.setProperty("--a", b.angle + "rad");

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

הצל שנשאר במקום

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

// keep the shadow at (3px, 3px) in screen space while the icon turns by a
st.setProperty("--shadow-x", 3 * (Math.cos(a) + Math.sin(a)) + "px");
st.setProperty("--shadow-y", 3 * (Math.cos(a) - Math.sin(a)) + "px");

תפיסה וזריקה

כשלוחצים, אנחנו מחברים קפיץ (אילוץ של Matter.js) בין המצביע לבין הנקודה המדויקת באייקון שבה אחזתם, ולא למרכז שלו, כך שהוא מתנדנד באופן טבעי כשאוחזים בו בפינה. כשמרפים, הוא שומר על המהירות שלו, עם הגבלה כדי שהטחה חזקה לא תשלח אותו דרך הקיר. אם המצביע זז פחות משש פיקסלים, זה נחשב להקשה והקישור נפתח.

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

פרטים קטנים

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

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

להמשך קריאה: מה נדרש כדי להכין את האתרים שלנו לסוכנים, או WordPress 7.2 יוצאת ב-8 בדצמבר: מה אנחנו בודקים בתוספים שלנו.