- Subgroup of
-
-
עיצוב ובניית אתרים
כל מה שקשור לעיצוב, אפיון, בנית אתרים, אלמנטור, וורדפרס, וויקס ועוד
שמנה לב – למתכנתות וורדפרס פתחנו... פירוט נוסף
מובילה:
- Organized by
-
-
החלפת מסכות, מרצה וובינר שנכנס למחשב – ומה שבינהם
-
החלפת מסכות, מרצה וובינר שנכנס למחשב – ומה שבינהם
מה שלומכן בנות?
אני רוצה להציג דוגמאות מגניבות
לשימוש בפקודת CSS:
position: fixed; או background-position: fixed;
או לחילופין – בהגדרת אלמנטור –
מיקום-> מקובע
(ההגדרה הזו בעצם מוסיפה את פקודת ה positions fixed).
או – גלילה -> קבוע.
הכל עובד על אותו עיקרון CSS –
האלמנט נשאר במקומו למרות שהכל זז,
מה שמאפשר לנו לשחק וליצור אפקטים מדליקים.
<hr>
אפקט 1. החלפת מסכות לדמות
את האפקט הזה יצרתי ע”י הגדרת 3 איזורים,
כשבכל אחד מהם הגדרתי
שערך הגלילה של תמונת הרקע הוא – מוחלט.
תמונת הרקע בשלושתם כמעט זהה.
ההבדל היחיד בין שלושת תמונות הרקע הוא
שכל אחת מהן מכילה את אותה הדמות עם מסכה שונה.
אלה שלושת תמונות הרקע:
יצרתי 4 איזורים,
כשבכל אחד תמונת רקע אחרת מתוך הרביעיה:
עכשיו,
לכל איזור הגדרתי שמיקום תמונת הרקע יהיה עם ערך גלילה קבוע.
מה זה בעצם נתן לי?
שכשהמשתמש גולל באתר,
תמונת הרקע “תקועה” עד שהאלמנט הבא “עולה” עליה.
מה שגורם שכל פעם תמונת רקע תעלה על תמונת הרקע הקודמת.
בגלל שהתמונות זהות והשינוי היחיד הוא המסכה –
זה נראה כאילו הדמות עומדת והמסכה מתחלפת עם גלילת הדף.
ככה זה נראה כשהמשתמש גולל את הדף:
(כל התמונות מצורפות למטה, ככה הסתדר כאן. תנסינה להבין כל תמונה איפה היא אמורה להיות משולבת בהדרכה 🙂
-
6 תגובות
-
אפקט 2. המרצה נכנס לוובינר
את רואה את האיש שנשאר “תקוע” במיקום שלו
גם כשכל הדף זז?
כשהוובינר מגיע, הוא “נכנס” לשם בטבעיות…
איך עשיתי את זה?
איפשהו בדף (במקרה בתחילת הדף) שמתי את התמונה של המרצה:
הגדרתי את המיקום שלו כ”מקובע” כדי שלא יזוז גם כשכל הדף נגלל.
ההגדרה הזו כתבה את פקודת ה CSS:
position: fixed;
אז אם את רוצה יכול לבצע את האפקט ע”י פקודת CSS בלבד,
את ממש לא צריכה את אלמנטור בשביל זה:
כדי להגדיר איפה בדיוק אני רוצה שהמרצה יהיה מקובע
(במקום שאליו אמור להגיע המחשב עם הוובינר)
אני מגדירה לו ב CSS הגדרת bottom.
הגדרתי את זה ב CSS –
כי האלמנטור מאפשר הגדרת מיקום יחסית לקצה העליון של הדף (top),
אבל אני רציתי למדוד את המרחק דווקא מהקצה התחתון
כדי להיות מדוייקת עם המיקום של המחשב מכל גובה של כל מסך:
למטה בתחתית הדף הוספתי את תמונת המחשב,
היה יותר יפה אם תמונת המחשב הייתה בלי המרצה,
והמרצה היה נכנס אליה בטבעיות…
את זה אני משאירה לך 🙂
זו התוצאה:
אם את ממש סקרנית לראות איך יוצרים את האפקט
בלי להשתמש באלמנטור בכלל
את מוזמנת להוריד את הקוד מכאן
יש עוד המון רעיונות איך אפשר לשחק עם המיקומים המקובעים,
צריך רק איך לפתוח את הראש.
מה דעתך?
רבקיטוב, גם כאן כל התמונות התקבצו למטה במקום להיות משולבות בהדרכה…
-
רבקי, תודה.
איזו הדרכה יפה!
ממש השראה, וגם מאד קל עם ההסברים שלך לתרגל אותה.
אין עליך!
-
איזה כיף צילי 🙂
תשתפי בתוצאות
-
מהמם רבקי
תודה רבה.
באתר שלי בעמוד הבית יש משהו דומה-
אך חשוב להדגיש שאפקט הקבוע עובד רק ברספונסיביות של מסכים גדולים.
(בכל אופן באלמנטור רגיל- לא ידוע לי עם קוד).
-
האתר שלך מקסים !
-
-
תודה יפי! תבורכי!
Log in to reply.
