CSS Cross Fade
פוסט זה כולל טיפ קצר בנושא פיתוח Front End. אם אתם רוצים ללמוד יותר לעומק על פיתוח Front End מהבסיס ועד הנושאים המתקדמים תשמחו לשמוע שבניתי קורס וידאו מקיף בנושא זה הכולל מעל 50 שיעורי וידאו והמון תרגול מעשי.
למידע נוסף והצטרפות לקורס בקרו בדף קורס Front End באתר.
למרות כל הקיטורים, CSS היא בבסיסה טכנולוגיה מאוד פשוטה. ברוב המקרים מספיקות מספר דקות כדי להבין כל אחת מה Keywords בשפה (לפחות עד שהגיע Flexbox), ואיכשהו צריך מעט מאוד קוד בשביל לכתוב דברים יפים.
הדוגמא הקטנה בפוסט הפעם הזכירה לי למה למרות הכל אני די אוהב CSS.
1. החלפת תמונות עם אפקט Fade
נקודת ההתחלה היא div עם שתי תמונות שמסתירות אחת את השניה (באמצעות position). שינוי קלאס על המיכל משנה את ה opacity של התמונות כך שאחת נעלמת והשניה מופיעה:
2. עוד כמה הערות על הקוד
גודל המיכל נקבע ב vw ו vh כדי שיתפוס את כל המסך. את הרוחב אפשר היה לקבוע באחוזים אבל בשביל הגובה vh נותן פתרון פשוט יותר.
המאפיין object-fit דואג שהתמונה תמלא את כל המקום אבל בלי חיתוכים ובלי עיוות. המאפיין חדש (עדיין לא נתמך ב IE), ובכל זאת מומלץ לקרוא עליו אם לא הכרתם.