לעתים קרובות אנו חושבים על תמונות רקע כעל מרקם או משהו שמספק ניגוד לתוכן קריא - במילים אחרות, לא ממש תוכן. אם זה היה מרוצה, סביר להניח שהיית מגיע ל- <img>
בכל מקרה, נגישות ומה לא.
אבל יש מקרים שבהם ה עמדה or סולם של תמונת רקע עשויה לשבת איפשהו בין קטבי התוכן והקישוט. ההקשר הוא המלך, נכון? אם נשנה את מיקום תמונת הרקע, היא עשויה להעביר קצת יותר הקשר או חוויה.
איך זה? בואו נסתכל על כמה דוגמאות שראיתי מרחפות מסביב.
כשנתחיל, אזהיר שיש קו דק בהדגמות האלה בין תמונות המשמשות לקישוט לבין תמונות המשמשות כתוכן. להבדל יש השלכות נגישות כאשר הרקע אינו מוכרז לקוראי מסך. אם התמונה שלך היא באמת תמונה, אז אולי תשקול א <img>
תג עם תקין alt
טֶקסט. ובזמן שאנחנו מדברים על נגישות, זה רעיון טוב שקול את העדפת התנועה של המשתמש גם כן.
תראה לי עוד!
לכריס קוייר יש את ההדגמה הקטנה והמסודרת הזו מלפני כמה שנים.
ההדגמה היא סופר פרקטית בהמון מובנים מכיוון שזו גישה מסודרת להצגת מודעות בתוכן. יש לך את ההצעה למכירות ותמונה מפתה כדי להשלים אותה.
המגבלה הגדולה של רוב המודעות, הייתי מהמר, היא הנדל"ן המוגבל. אני לא יודע אם אי פעם נאלצת לשחרר מודעה לדף, אבל אני מבקש ובדרך כלל מהמפרסם תמונה העונה על מידות פיקסלים מדויקות, כך שהנכס מתאים לחלל.
אבל ההדגמה של כריס מקלה על בעיית החלל. העבר את העכבר על התמונה וצפה בה גם זזה וגם קנה מידה. המשתמש למעשה מקבל יותר ההקשר למוצר מאשר היה להם כשהתמונה הייתה במקומה המקורי. זה win-win, נכון? המפרסם זוכה ליצור תמונה מושכת את העין מבלי לפגוע בהקשר. בינתיים, המשתמש מקבל מעט ערך נוסף מהחלקים החדשים של התמונה.
אם תציץ בסימון ההדגמה, תבחין שזה פחות או יותר מה שהיית מצפה. הנה גרסה מקוצרת:
<div class="ad-container"> <a href="#" target="_blank" rel="noopener"> <!-- Background image container --> <div class="ad-image"></div> </a> <div class="ad-content"> <!-- Content --> </div>
</div>
אולי נוכל להתפלפל קצת בסמנטיקה, אבל זה לא העניין. יש לנו מיכל עם מקושר <div>
לתמונת הרקע ועוד אחת <div>
להחזיק את התוכן.
באשר לסטיילינג, החלקים החשובים נמצאים כאן:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
לא נורא, נכון? אנו נותנים למיכל כמה ממדים ומגדירים עליו תמונת רקע שאינה חוזרת וממוקמת בקצה השמאלי התחתון שלו.
הטריק האמיתי הוא עם JavaScript. נשתמש בזה כדי לקבל את מיקום העכבר ואת ההיסט של המכולה, ואז נמיר את הערך הזה לסולם מתאים כדי להגדיר את background-position
. ראשית, בואו נקשיב לתנועות העכבר על .container
אֵלֵמֶנט:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
מכאן נוכל להשתמש במיכל offsetX
ו offsetY
נכסים. אבל לא נשתמש בערכים האלה ישירות, מכיוון שהערך של קואורדינטת X קטן ממה שאנחנו צריכים, וקואורדינטת Y גדולה יותר. נצטרך לשחק קצת כדי למצוא קבוע שנוכל להשתמש בו כמכפיל.
זה קצת מגע ותחושה, אבל מצאתי את זה 1.32
ו 0.455
עובדים בצורה מושלמת עבור קואורדינטות X ו-Y, בהתאמה. נכפיל את הקיזוזים בערכים האלה, נוסיף א px
יחידה על התוצאה, ולאחר מכן החל אותה על background-position
ערכים.
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { container.style.backgroundPositionX = -e.offsetX * 1.32 + "px"; container.style.backgroundPositionY = -e.offsetY * 0.455 + "px"; }
);
לבסוף, נוכל גם לאפס את מיקומי הרקע בחזרה למקור אם המשתמש עוזב את מיכל התמונה.
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
מכיוון שאנחנו ב-CSS-Tricks, אני אציע שיכולנו לעשות גרסה זולה בהרבה של זה עם מעבר קטן של ריחוף ב- Vanilla CSS:
צייר תמונה גדולה יותר
אין ספק שהיית באיזו חנות בגדים מקוונת או כל דבר אחר ונתקלת בתכונת זום-על-רחף.
הדפוס הזה קיים במשך מה שמרגיש כמו נצח (דילן ווין-בראון שיתף את גישתו שוב 2016), אבל זו רק עדות (אני מקווה) לתועלת שלה. המשתמש מקבל יותר הקשר כשהם מתקרבים ומקבל מושג טוב יותר על תפירת הסוודר או מה יש לך.
יש לזה שני חלקים: ה מכולה ו זכוכית מגדלת. הקונטיינר הוא הדבר היחיד שאנחנו צריכים בסימון, מכיוון שנזריק את אלמנט ההגדלה במהלך האינטראקציה של המשתמש. אז, הנה ה-HTML שלנו!
<div class="container"></div>
ב-CSS, ניצור width
ו height
משתנים לאחסון הממדים של זכוכית המגדלת עצמה. אז אנחנו ניתן את זה .container
צורה כלשהי וא background-image
:
:root {
--magnifer-width: 85;
--magnifer-height: 85;
} .container { width: 500px; height: 400px; background-size: cover; background-image: url("/path/to/image.png"); background-repeat: no-repeat; position: relative;
}
יש כמה דברים שאנחנו כבר יודעים על הזכוכית המגדלת עוד לפני שאנחנו רואים אותו, ואנחנו יכולים להגדיר את הסגנונות האלה מראש, במיוחד את המשתנים שהוגדרו קודם לכן עבור .maginifier
's width
ו height
:
.magnifier { position: absolute; width: calc(var(--magnifer-width) * 1px);
height: calc(var(--magnifer-height) * 1px);
border: 3px solid #000;
cursor: none;
background-image: url("/path/to/image.png");
background-repeat: no-repeat;
}
זהו ריבוע קטן הממוקם לחלוטין שמשתמש ב- אותו קובץ תמונת רקע בתור .container
. שימו לב שפונקציית ה-calc משמשת כאן אך ורק כדי להמיר את הערך נטול היחידה במשתנה לפיקסלים. אל תהסס לארגן את זה איך שתמצא לנכון עד כדי ביטול החזרות בקוד שלך.
כעת, הבה נפנה ל-JavaScript שמחבר את כל זה ביחד. ראשית עלינו לגשת למשתנה CSS שהוגדר קודם לכן. נשתמש בזה במספר מקומות בהמשך. אז אנחנו צריכים לקבל את מיקום העכבר בתוך המיכל כי זה הערך שבו נשתמש עבור מיקום הרקע של הזכוכית המגדלת.
// Get the css variables
let root = window.getComputedStyle(document.documentElement);
let magnifier_width = root.getPropertyValue("--magnifer-width");
let magnifier_height = root.getPropertyValue("--magnifer-height"); let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top); // Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;
מה שאנחנו צריכים זה בעצם א mousemove
מאזין אירועים ב- .container
. לאחר מכן, נשתמש ב- event.pageX
or event.pageY
מאפיין כדי לקבל את קואורדינטת X או Y של העכבר. אבל כדי לקבל את מְדוּיָק המיקום היחסי של העכבר על אלמנט, עלינו להחסיר את המיקום של אלמנט האב ממיקום העכבר שאנו מקבלים מה-JavaScript שלמעלה. דרך "פשוטה" לעשות זאת היא להשתמש getBoundingClientRect()
, המחזיר את גודלו של אלמנט ואת מיקומו ביחס לנקודת התצוגה.
שימו לב איך אני לוקח בחשבון את הגלילה. אם יש הצפה, הפחתת החלון pageX
ו pageY
קיזוזים יבטיחו שהאפקט יפעל כצפוי.
ראשית ניצור את div מגדילה. לאחר מכן, ניצור א mousemove
פונקציה והוסיפו אותה למיכל התמונה. בפונקציה זו, ניתן למגדיל תכונה מחלקה. כמו כן, נחשב את מיקום העכבר וניתן לזכוכית המגדלת את הערכים השמאלי והעליון שחישבנו קודם לכן.
בואו נתקדם ונבנה את magnifier
כשאנחנו שומעים א mousemove
אירוע על .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
כעת עלינו לוודא שיש לו שם מחלקה שנוכל להגדיר ל-CSS:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
הסרטון לדוגמה שהראיתי קודם ממקם את הזכוכית המגדלת מחוץ למיכל. אנחנו נשמור על זה פשוט ונכסה אותו על גבי המיכל במקום כשהעכבר זז. אנחנו נשתמש if
הצהרות כדי להגדיר את מיקום הזכוכית המגדלת רק אם ערכי X ו-Y הם יותר or שווה לאפס, ו פחות מאשר רוחב או גובה המיכל. זה אמור לשמור את זה בגבולות. רק הקפד להחסיר את הרוחב והגובה של זכוכית המגדלת מערכי X ו-Y.
// Run the function on mouse move.
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier"); // Get mouse position let rect = container.getBoundingClientRect(); let x = (e.pageX - rect.left); let y = (e.pageY - rect.top); // Take page scrolling into account x = x - window.pageXOffset; y = y - window.pageYOffset; // Prevent magnifier from exiting the container // Then set top and left values of magnifier if (x >= 0 && x <= container.clientWidth - magnifier_width) { magnifier.style.left = x + "px"; } if (y >= 0 && y <= container.clientHeight - magnifier_height) { magnifier.style.top = y + "px"; }
});
אחרון, אבל בהחלט לא פחות חשוב... אנחנו צריכים לשחק קצת עם תמונת הרקע של הזכוכית המגדלת. כל העניין הוא שהמשתמש מקבל תצוגה גדולה יותר של תמונת הרקע בהתבסס על המקום שבו מתרחש הריחוף. אז, בואו נגדיר זכוכית מגדלת שבה נוכל להשתמש כדי להגדיל את העניינים. לאחר מכן נגדיר משתנים עבור הרוחב והגובה של תמונת הרקע כדי שיהיה לנו על מה לבסס את קנה המידה, ונקבע את כל הערכים הללו על .magnifier
סגנונות:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
ניקח את קואורדינטות ה-X וה-Y של תמונת הזכוכית המגדלת ונחיל אותן על .magnifier
של אלמנט background-position
. כמו בעבר עם מיקום הזכוכית המגדלת, עלינו להחסיר את הרוחב והגובה של הזכוכית המגדלת מערכי ה-X וה-Y באמצעות משתני ה-CSS.
// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15; // set backgroundPosition for magnifier if it is within image
if ( x <= container.clientWidth - magnifier_width && y <= container.clientHeight - magnifier_height
) { magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}
טאדה!
תעשה את זה קולנועי
האם ראית את אפקט קן ברנס? זה דבר קלאסי ונצחי שבו תמונה גדולה יותר מהמיכל שבו היא נמצאת, ואז גולשת ומסתגלת לאט כמו שבלול. נראה כי כמעט כל סרט תיעודי בעולם משתמש בו לצילומי סטילס. אם יש לך Apple TV, אז בהחלט ראית אותו בשומר המסך.
יש שפע of דוגמאות ב-CodePen אם אתה רוצה לקבל רעיון טוב יותר.
אתה תראה שיש מספר דרכים לגשת לזה. חלקם משתמשים ב-JavaScript. אחרים הם 100% CSS. אני בטוח שגישות ה-JavaScript טובות למקרי שימוש מסוימים, אבל אם המטרה היא פשוט להתאים את התמונה בעדינות, CSS מתאים לחלוטין.
נוכל לתבל קצת את הדברים באמצעות רקעים מרובים במקום אחד. או, טוב יותר, אם נרחיב את הכללים לשימוש באלמנטים במקום בתמונות רקע, נוכל להחיל את אותה הנפשה על כל הרקעים ולהשתמש במקף של animation-delay
להדהים את האפקט.
הרבה דרכים לעשות זאת, כמובן! בהחלט ניתן לבצע אופטימיזציה עם משתני Sass ו/או CSS. לעזאזל, אולי אתה יכול להוציא את זה עם סינגל <div>
אם כן, שתפו בתגובות!
בונוס: הפוך אותו לסוחף
אני לא יודע אם משהו יותר מגניב מזה של שרה דרזנר עט "ליל כל הקדושים שמח".... וזה מ-2016! זוהי דוגמה מצוינת שמשכבת רקעים ומזיזה אותם במהירויות שונות כדי ליצור חוויה כמעט קולנועית. אלוהים אדירים זה מגניב!
GSAP הוא הדרייבר הראשי שם, אבל אני מתאר לעצמי שנוכל ליצור גרסה מבושלת שפשוט מתרגמת כל שכבת רקע משמאל לימין במהירויות שונות. לא כל כך מגניב, כמובן, אבל בהחלט חווית הבסיס. צריך לוודא שההתחלה והסוף של כל תמונת רקע יהיו עקביים כך שהיא חוזרת בצורה חלקה כשהאנימציה חוזרת.
זהו לבינתיים! די מסודר שאנחנו יכולים להשתמש ברקע להרבה יותר מאשר מרקם וניגודיות. אני בטוח לחלוטין שיש עוד המון אינטראקציות חכמות שאנחנו יכולים ליישם על רקע. תמני עפיף עשתה בדיוק את זה עם חבורה של אפקטי ריחוף מסודרים לקישורים. על מה אתה חושב? שתפו אותי בתגובות!
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
- מקור: https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- אודות
- מֵעַל
- מוּחלָט
- בהחלט
- גישה
- נגישות
- חֶשְׁבּוֹן
- למעשה
- Ad
- מודעות
- קדימה
- תעשיות
- כְּבָר
- ו
- הנפשה
- הודיע
- אחר
- תפוח עץ
- החל
- גישה
- גישות
- מתאים
- סביב
- נכס
- בחזרה
- רקע
- רקע תמונה
- רקע
- רע
- בסיס
- מבוסס
- Baseline
- בעיקרון
- כי
- לפני
- מוטב
- בֵּין
- גָדוֹל
- גדול
- קצת
- גבול
- לִבנוֹת
- צרור
- לחשב
- מחושב
- מקרים
- בהחלט
- שינוי
- זול יותר
- בכיתה
- קלאסי
- ביגוד
- קוד
- מתפשר
- לשקול
- עִקבִי
- קבוע
- מכולה
- תוכן
- הקשר
- לעומת זאת
- להמיר
- קריר
- לתאם
- יכול
- קורס
- לכסות
- לִיצוֹר
- CSS
- לזנק
- מוגדר
- הדגמות
- DID
- הבדל
- אחר
- ממדים
- ישירות
- מציג
- מסמך
- תעודה
- לא
- לא
- ספק
- נהג
- ירידה
- בְּמַהֲלָך
- כל אחד
- מוקדם יותר
- אדג '
- השפעה
- תופעות
- אלמנטים
- חיסול
- לְהַבטִיחַ
- אחוזה
- אֲפִילוּ
- אירוע
- אי פעם
- כל
- בדיוק
- דוגמה
- דוגמאות
- יציאה
- לְהַרְחִיב
- לצפות
- צפוי
- ניסיון
- נוסף
- תופס את העין
- מאפיין
- מעטים
- שלח
- סרט צילום
- סוף
- ראשון
- מתאים
- צף
- לנצח
- מצא
- חופשי
- החל מ-
- פונקציה
- לקבל
- לתת
- זכוכית
- Go
- מטרה
- Goes
- טוב
- גדול
- גובה
- כאן
- להחזיק
- לקוות
- לרחף
- איך
- אולם
- HTML
- HTTPS
- חולה
- רעיון
- תמונה
- תמונות
- השלכות
- חשוב
- in
- באחר
- במקום
- אינטראקציה
- יחסי גומלין
- סוגיה
- IT
- עצמו
- JavaScript
- שמור
- המלך
- לדעת
- גדול יותר
- שכבה
- שכבות
- הגבלה
- מוגבל
- קו
- קְצָת
- נראה
- ראשי
- לעשות
- בינתיים
- פוגשת
- יכול
- אכפת לי
- יותר
- רוב
- תנועה
- המהלך
- תנועות
- מהלכים
- נע
- מספר
- רקעים מרובים
- שם
- צורך
- הבא
- מספר
- הַצָעָה
- לקזז
- ONE
- באינטרנט
- אופטימיזציה
- מְקוֹרִי
- אחר
- אחרים
- בחוץ
- תבנית
- חתיכות
- גובה הצליל
- פיקסל
- מקום
- מקומות
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- לְשַׂחֵק
- נקודה
- עמדה
- מיקום
- עמדות
- חיובי
- מעשי
- יפה
- למנוע
- קוֹדֶם
- כנראה
- המוצר
- תָקִין
- נכסים
- רכוש
- מספק
- מושך
- לְהַגִיעַ
- הקוראים
- ממשי
- מקרקעין
- לחזור על
- תוצאה
- החזרות
- גילה
- שורש
- כללי
- הפעלה
- מכירות
- אותו
- סאס
- סולם
- מאזניים
- היקף
- מסך
- קוראי מסך
- גלילה
- בצורה חלקה
- נראה
- סמנטיקה
- סט
- כמה
- צוּרָה
- שיתוף
- משותף
- צריך
- פָּשׁוּט
- בפשטות
- יחיד
- מידה
- שקופיות
- להאט
- קטן יותר
- So
- מוצק
- כמה
- משהו
- אי שם
- מֶרחָב
- במיוחד
- מהירויות
- תבלין
- מרובע
- התחלה
- החל
- הצהרות
- חנות
- סגנון
- מַתְאִים
- סוּפֶּר
- תָג
- לקחת
- נטילת
- מדבר
- ברית
- השמיים
- העולם
- דבר
- דברים
- נצחי
- פִּי
- ל
- יַחַד
- טון
- חלק עליון
- מַעֲבָר
- נָכוֹן
- תור
- tv
- בדרך כלל
- יחידה
- להשתמש
- משתמש
- ערך
- ערכים
- גרסה
- וִידֵאוֹ
- לצפיה
- שעון
- דרכים
- מה
- אשר
- בזמן
- כל
- ויקיפדיה
- יצטרך
- בתוך
- לְלֹא
- מילים
- תיק עבודות
- עוֹלָם
- היה
- X
- שנים
- אתה
- זפירנט
- אפס
- זום