תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

כיצד להוסיף אפקט parallax מדהים לאתרי אינטרנט?

 

מחבר:
בתאריך:

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

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

 

אפקט parallax מאפשר לנו לראות חלקים שונים של התמונה בזמן שאנו גוללים את הדף ונותן לנו תחושה מציאותית ותלת-ממדית של האובייקט שאנו צופים בו. האפקט נוצר באמצעות השארת תמונת הרקע במצב קבוע בזמן שהגולש גולל את הדף. ניתן ליצור אפקט בקלות רבה ב-css באמצעות התכונה:
background-attachment:fixed

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

.fixed-background {
    /* תמונת הרקע צריכה להיות ארוכה יותר מהאלמנט שבתוכו היא יושבת */
    background-image: url("telaviv.png");
    /* חייבים לקבוע את הגובה של האלמנט שמכיל את התמונה.
    והגובה של האלמנט חייב להיות נמוך יותר מהתמונה שהוא עוטף */
    height: 400px;
    /* קבע את הרקע ל-fixed כדי שתישאר במקום למרות שגוללים את הדף */
    background-attachment: fixed;
    /* נמרכז את תמונת הרקע */
    background-position: center center;
    /* תמונת הרקע תופיע פעם אחת בלבד */
    background-repeat: no-repeat;
    /* נפרוס את התמונה לכל אורכה */
    background-size: cover;
}

הסבר:

  1. תמונת הרקע צריכה להיות ארוכה יותר מהאלמנט שבתוכו היא יושבת. בדוגמה זו ה-div מקבל אורך של 400 והתמונה ארוכה פי-2.
  2. חייבים לתת ל-div העוטף גובה מינימלי או קבוע (height, min-height)
  3. משתמשים בתכונה background-attachment: fixed בשביל לקבל את האפקט
  4. תכונות הרקע background-position, background-repeat, background-size מעניקות לתמונה את תכונות המיקום והגודל הרצויות.

 

התאמות למכשירים ניידים?

כיוון שהתכונה אינה עובדת במכשירים ניידים ניתן להשתמש ב-media query כדי לדרוס את התכונה במסכים צרים, ואת זה עושים באמצעות:
background-attachment:scroll;

@media only screen and (max-width:600px) {
    .fixed-background {
        background-attachment: scroll;
    }
}

לכל מדריכי ה-CSS3

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

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

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

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

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מהם שלוש רשויות השלטון בישראל?

 

תמונת המגיב

אא בתאריך: 19.07.2022

תודה!