איך יצרתי את אנימציית הסקלטון המושלמת לטעינת עמודים (וסיפור משעשע על הדרך) ⚡

וואו סוף סוף גיא הצליח! אחרי שעות של מאמץ סזיפי ואימון משקולות מוחי, הוא הצליח ליצור את אנימציית הסקלטון (שלד בעברית של בן יהודה) המהבהב המושלמת לאתר, שתצוץ בעת טעינה של דפים. 🤓 הוא ישב שם מול המחשב בחדר העבודה, מועך את העכבר ביד ימין עד שכמעט נשבר, והביט במסך שעות ארוכות מבלי למצמץ או לנשום. כבר חצות חלף עבר ונפשו יצאה, העור שלו התחיל לגרד מבפנים. (אולי הוא השמין והעור כבר לא במידה שלו?) אשתו כבר ישנה בחדר ליד, והנחירות שלה יצרו את הסימפוניה בלה מינור של באך לכלי נשיפה. אבל הוא לא ויתר! הוא היה חייב להשיג את האנימציה המושלמת הזו. הוא ניסה הכל - קודים שונים, ספריות אנימציה, ואפילו ריקוד אינדיאני עתיק שמתאים להורדת שלדים מהשמיים. שום דבר לא עבד כמו שצריך. הוא היה כרגע לפני לוותר וללכת לישון בייאוש, אבל אז זה קרה! פתאום קפץ השלדון המושלם והתחיל לרקוד על המסך בדיוק כמו שהוא ראה בחזון העצמות היבשות! הוא ציחקק בקול רם מרוב התרגשות, ורץ להעיר את אשתו כדי להראות לה את הפלא שהוא ברא! אבל היא כבר ישנה עמוקות ורק מלמלה משהו על חמור גמור שמעיר אותה באמצע הלילה בשביל אנימציות מטופשות... ועל זה שהיא תצא עליו בטעות ברוורס מהחניה מחר. "תודה לסקלטון היקר, אתה באמת האור שבחיי. עכשיו כולם יראו כמה אני מגניב ומוכשר!" הוא לחש לעצמו ובחש בכוס קפה שחור קר עם מזלג חד פעמי, וכרסם עוגיית עבאדי פג תוקף. 🤑 ומה תקחו מהפוסט הזה: אל תהיו גיא - יש ערימות של קודים לסקלטון מוכן ברשת שאתם יכולים להשתמש בו בקלות. העיקרון הוא דיבים (div) בצורות שאתם רוצים (בצורה של האתר האמיתי), עם אנימציה פשוטה שמעלה ומורידה את הopacity בלופ אינסופי - יש לאנימציה הזו, שפופלארית בעיקר באפליקציות אפקט נחמד שמרגיש כאילו האתר עוד מאיה כבר עולה. לדוגמא (tailwind):

אתר שיש בו דוגמאות מדהימות, שכוללות אפילו מצב של darkMode ורספונסיביות מלאה. בnext יש אפשרות ליצור קומפוננטה של loading בשם הקבוע loading.ts שבאופן אוטומטי תיטען ברגע שדפים נטענים ושם תוכלו לשים את השלד המהבהב שלכם או כל דף טעינה שתרצו. קישור למאמר המתאים בnext:

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