כיצד להוסיף אפקט 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 כוכבים