יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור

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

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

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

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

תוכלו להוריד את הטמפלט המוכן או לעצב אותו בעצמכם.

*יש קובץ JSON להעלאה לאלמנטור בתוך תיקייה דחוסה, צריך לחלץ את הקובץ לפני העלאה.

שלב 1) יצירת הבסיס:

נוסיף קונטיינר עם 4 קונטיינרים פנימיים ונגדיר לקונטיינר האב גובה של 400px.

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

זאת התוצאה לבנתיים

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

לאחר מכן ניתן לקונטיינר נכד את הקלאס: reveal

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

שלב 2 ) הוספת אפקט הזכוכית:

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

CSS
.reveal{
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

שלב 3 ) הצגת התוכן במעבר עכבר:

זה החלק שאליו חיכינו, השלב שבו האפקט יעבוד לנו,
בשביל זה פשוט נצטרך להוסיף את הקוד הבא לקונטיינר הנכד:

CSS
.reveal{
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.reveal:hover{
    opacity: 1;
}

שלב 4) ביטול האפקט במובייל:

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

CSS
@media only screen and (min-width: 1024px){
    .reveal{
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.reveal:hover{
    opacity: 1;
}
}

והנה התוצאה:

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

יש לכם רעיונות לאפקטים מעניינים נוספים? נתקלתם בבעיה? תכתבו לי בתגובות או בקבוצה של הקהילה.

תגובה אחת

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

ישראל פאר בניית אתרים
ישראל פאר
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
יצירת אפקט מעבר צבע בכפתור אלמנטור
שדרגו את הנראות של הכפתורים באתרים שלכם.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
ווקומרס
איך ליצור תוויות למוצרים בווקומרס עם ג'ט
הוספת תוויות חיווי למוצרים באתרי מכירות – משפר את חווית המשתמש ומגדיל את המכירות.
אלמנטור
החלפת חיצי הניווט בסליידרים של אלמנטור וג'ט
שנו את חיצי ברירת מחדל בווידג'טים של אלמנטור או ג'ט לחיצים מעוצבים שלכם.
חיפוש חופשי
חיפוש חכם ע"י AI (בהרצה)
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).