מטעני אלמנט בודד: הנקודות

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

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

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

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

אנימציית הרקע

נתחיל עם הנפשה ברקע:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

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

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

כאשר עוסקים במאפייני רקע - במיוחד background-position - אני תמיד מתייחס לשלי תשובת Stack Overflow שבה אני נותן הסבר מפורט על איך כל זה עובד. אם אתה לא מרגיש בנוח עם תחבולות רקע של CSS, אני ממליץ בחום לקרוא את התשובה כדי לעזור במה שיבוא אחר כך.

באנימציה, שימו לב שהשכבה הראשונה היא Y=0% (ממוקם בחלק העליון) בעוד X הוא משתנה מ 0% ל 100%. עבור השכבה השנייה, יש לנו אותו עבור X אבל Y=100% (מונח בתחתית).

למה להשתמש ב- a conic-gradient() במקום linear-gradient()?

שאלה טובה! באופן אינטואיטיבי, עלינו להשתמש בשיפוע ליניארי כדי ליצור שיפועים דו-צבעיים כמו זה:

linear-gradient(90deg, red 50%, blue 0)

אבל אנחנו יכולים גם להגיע לאותו הדבר באמצעות א conic-gradient() - ועם פחות קוד. אנחנו מצמצמים את הקוד וגם לומדים טריק חדש בתהליך!

החלקת הצבעים ימינה ושמאלה היא דרך נחמדה לגרום לזה להיראות כאילו אנחנו מחליפים צבעים, אבל אולי עדיף שנחליף צבעים באופן מיידי במקום זאת - כך, אין סיכוי שנקודת מטעין תהבהב בשני צבעים בו זמנית . כדי לעשות זאת, בואו נשנה את animationפונקציית התזמון של linear ל steps(1)

נקודות המעמיס

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

אנחנו הולכים להשתמש radial-gradient() לזה:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

יש שם קוד משוכפל, אז בואו נעשה משתנה CSS כדי להקטין את הדברים:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

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

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

כן, זה בסך הכל שלושה שיפועים רדיאליים שם, כולם עם אותה תצורה ובאותו גודל - האנימציה תעדכן את המיקום של כל אחד. שימו לב שה- X הקואורדינטה של ​​כל נקודה קבועה. ה mask-position מוגדר כך שהנקודה הראשונה נמצאת בצד שמאל (0%), השני במרכז (50%), והשלישי מימין (100%). אנו מעדכנים רק את Y לתאם מ 0% ל 100% לגרום לנקודות לרקוד.

הנה מה שאנחנו מקבלים:

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

וריאציות של מטעין נקודות

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

מה לגבי תנועה נוספת עבור הנקודות שלנו?

כאן, כל מה שעשיתי היה לעדכן את האנימציה כדי לשקול עמדות שונות, ונקבל עוד טוען עם אותו מבנה קוד!

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

למה לא מעמיס עם נקודה אחת?

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

הנה דוגמה נוספת של מטעין שבו אני גם מבצע אנימציה radial-gradient בשילוב עם מסנני CSS ו mix-blend-mode כדי ליצור אפקט בלובי:

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

אם אתה רוצה להבין את הקסם מאחורי אפקט הכתם הזה, אתה יכול להתייחס אליו השקופיות האינטראקטיביות הללו (ב-Chrome בלבד) מאת אנה טיודור כי היא מכסה את הנושא כל כך טוב!

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

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

אה, ושימו לב כיצד ההדגמה הזו משתמשת ב-CSS Grid. זה מאפשר לנו למנף את ברירת המחדל של הרשת stretch יישור כך ששני האלמנטים הפסאודו יכסו את כל שטח ההורה שלהם. אין צורך בגודל! דחוף קצת את הסביבה translate() וכולנו מסודרים.

דוגמאות נוספות!

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

הבא בתור…

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

---

מטעני אלמנט בודד: הנקודות פורסם במקור ב CSS-טריקים. אתה צריך לקבל את הניוזלטר.

• Coinsmart. בורסת הביטקוין והקריפטו הטובה באירופה.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה חופשית.
• CryptoHawk. רדאר אלטקוין. ניסיון חינם.
• מקור: https://css-tricks.com/single-element-loaders-the-dots/