דילוג לתוכן 
קודים וכלים נוספים לייחוד האתר שלכם
אם אתם מחפשים לשפר את הביצועים של האתר שלכם שלכם ולהבדיל את עצמכם מהעסקים האחרים שבתחום, אתם חייבים לגרום למבקרים באתר לזכור אתכם. אפשר לעשות זאת דרך התוכן וניתן לעשות זאת דרך האלמנטים הויזואליים. כאן תקבלו את הכלים המדויקים ביותר בכדי לעשות זאת.
1. תאורת קונטיינרים במעבר עכבר - CSS + JS באלמנטור
אנחנו הולכים ליצור את האפקט הבא:
שלב מס' 1: צור את ה-Section
בואו נוסיף קטע להנחת הקלפים:
הוסף Section ולאחר מכן הוסף 3 קונטיינרים פנימיים בתוך ה-Sectio עבור הכרטיסים והגדר בקרות גמישות עבור פריסת שורה
חשוב! קרא לשלושת הקונטיינרים הפנימיים, ‘Container – Card’
שלב מס' 2: צור את הקלפים
בתוך המיכלים הנקראים ‘Container – Card’ קראו ‘card’ כמו בתמונה
הוסיפו שוליים פנימיים 1-3px – הם ישמש כרוחב הגבול
הגדר את z-index ל-0
הגדר את Overflow לנסתר
עצבו את רדיוס הגבול ואת צבע הרקע של הכרטיס שלך. שימו לב, צבע הרקע יהיה גם צבע הגבול כאשר לא מרחף עליו.
שלב מס' 3: צרו את הקונטיינר הפנימי לתוכן
הוסף קונטיינר פנימי חדש בתוך קונטיינר הכרטיס
קרא לקונטיינר הפנימי ‘Inner Container’ (אופציונלי)
תן לקונטיינר הפנימי שם 'Inner'
הוסף את התוכן שלך לתוך הקונטיינר 'הפנימי' ועצב אותו עם הגדרות גמישות כולל הריפודים והרווחים הפנימיים שלך.
הגדר את רדיוס הגבול (חייב להיות זהה לרדיוס הגבול שנקבע בתוך קונטיינר הכרטיס)
הגדר את צבע הרקע ל-0.8 אטימות
הגדר את צבע הריחוף ברקע ל-0.6 אטימות – אתה יכול להתאים את האטימות כדי להבהיר או להכהות את אפקט הריחוף שלך
שלב מס' 4: צור את מרכיבי האפקט
הוסף עוד 2 קונטיינרים בתוך קונטיינר הכרטיס שלך
סמן את הקונטיינר הראשון בתור Fake Blob Container’ (אופציונלי)
סמן את הקונטיינר השני בתור‘Fake Blob Container’ (אופציונלי)
מבנה הקונטיינר שלך צריך להראות 3 קונטיינרים פנימיים מוערמים בתוך מיכל 'Card' שלך לפי ‘Inner Container’ > ‘Blob Container’ > ‘Fake Blob Container’ – ראה תמונה למעלה
תן לקונטיינר הכתם "Blob'
תן לקונטיינר ה-Fake Blob שם 'fakeblob'
הקונטיינרים של 'בלוב' ו'בלוב מזויף', הגדר את המיקום למוחלט ואת רדיוס הגבול ל-50% מסביב
במיכל ה-Bob, בחר את צבע הריחוף שלך על ידי הגדרת צבע הרקע. זה יהיה הצבע של אפקט הזוהר.
במיכל Blob הסר את ה-0 מהיסט הכיוון האופקי והאנכי והשאיר את השדה ריק – ראה תמונה למטה.
שלב מס' 5: הוסף את ה-CSS
קוד ה-CSS מאחסן את גודל ה-blob במשתנה, הנקרא –blob-size, כך שניתן להשתמש בו במספר מקומות מבלי לשנות או להוסיף את הערך בכל פעם.
אפקט התאורה נוצר באמצעות מאפיין מסנן רקע על ידי הוספת טשטוש. מאפיין זה יוצר שגיאה גרפית ברקע.
ל-Blob יש אינדקס Z של -1, מה שמציב אותו מתחת לכרטיס (לכרטיס יש אינדקס Z של 0). לכרטיס יש צבע כהה עם 20% אטימות, ולבלוב יש צבע לבן, כך שכאשר הכתם נראית לעין, בשילוב עם אפקט הטשטוש, הוא יוצר אפקט מאיר מאחורי הסמן. אלמנט ה-blob מוסתר גם עם תכונת האטימות מוגדרת ל-0, מכיוון שאנו רוצים שהוא יופיע רק ברחף עם העכבר מעל הכרטיס. המאפיין שנותר: calc(50% – calc(var(–blob-size)/2)) ממקם את אלמנט ה-blob במרכז.
ה-Fake Blob משמש להפניה למיקום של ה-Blob כדי לסייע בהזזתו עם הסמן.
הוסף את קטע קוד ה-CSS הבא לכל אחד ממיכלי הכרטיסים:
שלב מס' 6: הוסף את ה-JavaScript
בקוד JS, אנו בוחרים תחילה את כל האלמנטים עם המחלקה "כרטיס" ומאחסנים אותם ב-const.
לאחר מכן אנו מוסיפים מאזין אירועים כדי להאזין לתנועת עכבר מעל כל כרטיס. עבור כל פעם, סמן עכבר מועבר מעל כרטיס, הוא בוחר את הכתם, ה-fblob, עוקב אחר מיקום ה-fblob, ומגדיר את האטימות של ה-blob ל-1, ובכך הופך אותו לגלוי.
לאחר מכן נוסיף את שיטת האנימציה לתרגום, כלומר, מזיזים את אלמנט ה-blob עם הסמן, מגדירים את משך הזמן t להיות 300ms.
אתה יכול להוסיף את קוד ה-JavaScript לקוד מותאם אישית של Elementor, או פשוט להוסיף קטע באותו עמוד, ולהשתמש בווידג'ט HTML כדי להוסיף את הקוד.
הנה קוד JavaScript:
טיפים מהירים
כדי לשנות את צבע אפקט הזוהר, שנה את צבע הרקע של קונטיינר הבלוב.
כדי להפוך את צבע האפקט לבהיר יותר, הגבר את האטימות של צבע הריחוף של הרקע של הקונטיינר הפנימי.
כדי להפוך את צבע האפקט לבהיר יותר, הקטינו את האטימות של צבע הריחוף של הרקע של הקונטיינר הפנימי.
כדי להוסיף גבול, התאם את הריפוד של קונטיינר הכרטיס.
