חזרה בזמן לשנת 2011, אפקט פרלקס בגלילה (parallax scrolling effect) יצר הדים והסתמן כטרנד חדש בעיצוב אתרים. אופנות רבות הגיעו ועזבו מאז אך אפקט זה ביסס מקומו ואינו מתכוון לעזוב בקרוב.
בפוסט זה נסביר מה זה parallax scrolling ונשחק מעט עם אפקט זה בעזרת ספריית JavaScript בשם Rellax. ספרייה זו מאפשרת ליצור את אותו אפקט על ידי קביעת מהירות שונה בה אלמנטים נגללים יחסית למהירות הגלילה הדיפולטיבית של העמוד עצמו.
מה זה בעצם Parallax Effect?
תנועה פרלקסית מתרחשת כאשר אלמנטים שונים זזים במהירויות שונות ביחס אחד לשני. אפקט זה מאד פופולרי מכיוון ובעזרתו ניתן ליצור אשליה של עומק (depth).
כאשר אנו בתנועה, אובייקטים הקרובים אלינו נראים כאילו זזים מהר יותר מאובייקטים הנמצאים במרחק רב יותר.
אפקט ה Parallax הוא בעצם אשליה אופטית. מכיוון והעין האנושית תופסת אובייקטים הקרובים אלינו כגדולים יותר מאובייקטים רחוקים מאיתנו, מתקבלת התחושה שאותם אובייקטים רחוקים נעים לאט יותר.
הטכניקה פופולרית במדיומים רבים, משחקי וידאו למשל בהן שכיח לראות שכבות רקעים שונות. למעשה, אשליה זו אומצה לראשונה לאנימציה מסורתית על ידי Disney כשיצרו את הסרט שלגיה ושבעת הגמדים, ואף בזמנו כשיצרו את המשחק שילידי שנות ה 70 המאוחרות מכירים על בוריו ושמו Super Mario.
תנו מבט באתר זה ובאתר הבא, שניהם משתמשים באפקט עליו אנו מדברים בדרכים שונות, אך העקרון הוא אותו עקרון ועליו נדבר בפוסט זה. לפני שנתקדם אציג דוגמה מאד בסיסית המתארת בפשטות כיצד אותו parallax effect עובד בזמן גלילה (parallax scrolling במילים אחרות).
See the Pen
Simple Parallax Effect by Roee Yossef (@roeey)
on CodePen.
כל אחת מהבוקסות שאתם רואים עולות מעלה כאשר אנו גוללים מטה את העמוד. הבוקסה האמצעית נגללת במהירות הגלילה של העמוד עצמו (כלומר ללא אפקט הפרלקס), הבוקסה השמאלית בדוגמה נגללת מהר יחסית לעמוד והשמאלית איטית יחסית לגלילה הדיפולטיבית של העמוד.
אז נאמר ונגלול את העמוד ב 100 פיקסלים, הבוקסה המהירה תנוע בפועל משהו כמו 130 פיקסלים, והבוקסה האיטית לעומת זאת תגלל בערך כ 70 פיקסלים… מובן חברים? על כל מקרה, בכדי לבצע זאת עשינו שימוש בספריית JavaScript חמודה אותה הזכרנו בתחילה ושמה Rellax.
הנה דוגמה נוספת של טקסט על תמונה. שימו לב כי הטקסט נגלל במהירות שונה מהתמונה עצמה:
הספרייה Rellax
Rellax היא ספריית JavaScript שימושית שפותחה על ידי סוכנות עיצוב כלשהי בשם Dixon & Moe. הספרייה קלת משקל ואינה תלויה ב jQuery או בכל ספרייה אחרת. נסביר על Rellax בעזרת דוגמאות.
בתור התחלה תנו מבט בדוגמה הבאה המדמה טיול בחלל. במהלך הטיול (טיול = גלילה) נעבור דרך מספר סלעים בצורות וגדלים שונים מימין ומשמאל לטקסט.
כשאני אומר סלעים אני מתכוון לאותן תמונות, או אותם אלמנטים המופיעים ליד הטקסט הרץ ולא על אותם כוכבים המופיעים בחלקו העליון של המסך.
הנה דוגמה. אני ממליץ בחום לצפות בדוגמאות המופיעות בפוסט זה דרך codepen ובמסך רחב יחסית.
See the Pen
Part 1 – Parallax by Roee Yossef (@roeey)
on CodePen.
באמצעות הספרייה Rellax נגרום לאותם סלעים לנוע במהירויות שונות בעת גלילה מאשר מהירות הגלילה הדיפולטיבית של העמוד עצמו. נתחיל….
טעינת הספרייה Rellax
הדבר הראשון שעלינו לעשות הוא לטעון את הספרייה עצמה כמובן. מכיוון וכבר הסברנו בפוסטים רבים כיצד לטעון באתרי וורדפרס נכסים, כלומר קבצי JavScript וקבצי CSS, לא אסביר זאת שוב, אך נראה בכל זאת כיצד לטעון זו בפשטות ב HTML סטנדרטי:
<script src="./javascripts/rellax.min.js"></script>
הפעלת הספרייה Rellax
לאחר שטענו את הספרייה נוסיף שורת JavaScript נוספת בכדי להפעיל את Rellax. שימו לב כי אנו מעבירים מחרוזת למתודה Rellax שנועדה לזהות או לטרגט את האלמנטים להם אנו רוצים לשנות את מהירות הגלילה. במקרה שלנו אלו יהיו האלמנטים להם קיים הקלאס rellax.
var rellax = new Rellax('.rellax');
עלינו להוסיף לאלמנטים הרצויים את הקלאס המדובר כמובן ישירות ב HTML של אותם אלמנטים המייצגים את הסלעים. במקרה שלנו, נוסיף זה לכל האלמנטים בעלי הקלאס floating-rocks.
<div class="floating-rocks rellax">
<img src="images/rock1.svg">
</div>בשלב זה נראה את אפקט הפרלקס פעיל על אותם סלעים כבדוגמה מטה (אך אני בטוח שלא תתרשמו):
See the Pen
Part 2 – Parallax by Roee Yossef (@roeey)
on CodePen.
הסלעים בשלב זה נעים לאט יותר מהטקסט המופיע על המסך שזה די נחמד אך אם שמתם לב או לא, כל הסלעים נעים בדיוק באותה מהירות במהלך הגלילה. אנו רוצים להגדיר מהירות שונה עבור כל אחד מהסלעים, ואת זה נעשה באמצעות data attributes שנוסיף ל HTML של אותם אלמנטים.
הגדרות הספרייה Rellax
Rellax מספקת מספר אפשרויות, או בעצם מספר פרמטרים שניתן להעביר לה ובאמצעותם אנו יכולים להשפיע על הדרך בה תתבצע התנועה של כל אלמנט. אנו מתמקד בשניים מאותם פרמטרים:
1. הפרמטר data-rellax-speed
הפרמטר הראשון הוא data-rellax-speed . פרמטר זה מאפשר לנו לקבוע כי את מהירות הגלילה של האלמנט ביחס למהירות הגלילה של העמוד.
על הערך להיות מספר שלם, ערך שלילי מגדיר תזוזה איטית יותר ממהירות הגלילה של העמוד, וערך חיובי קובע תזוזה מהירה יותר ממהירות הגלילה הדיפולטיבית של העמוד.
השימוש בפרמטר זה מתבצע ישירות על HTML של האלמנט באופן הבא:
<div class="floating-rocks rellax" data-rellax-speed="8">
<img src="images/rock1.svg">
</div>זה המקום לציין כי אם אנו מעוניינים לתת תחושת עומק מציאותית, עליכם לקבוע כי אלמנטים הנמצאים קרוב אלינו בציר ה Z יהיו עם תנועה מהירה יותר מאלמנטים הנמצאיפ רחוק יותר.
2. הפרמטר data-rellax-percentage
כאשר Rellax מחשבת את מרחק התנועה שעל האלמנטים לזוז במהלך לגלילה, היא עושה זאת על בסיס גובה העמוד. כתוצאה מכך, אלמנטים הנמצאים בחלקו התחתון של העמוד ינועו מרחק רב יותר בציר ה Y מאלו הנמצאים בחלקו העליון של העמוד.
בסיטואציה זו ייתכן ואלמנטים בחלקו התחתון של העמוד יופיעו לנו במיקום שאינו צפוי ולאו דווקא רצוי. ניתן לעקוף זאת באמצעות Centering. אפשרות זו תשנה את מיקום האלמנטים בהתאם למיקום ב viewport, לכן, לכשנגיע בגלילה אל אותם אלמנטים תחתונים כנראה והם יופיעו במיקום נכון יותר.
אני מודע לכך שההסבר על תכונה זו אינו מספק, תסלחו לי – חסר מידע על ספרייה זו ברשת 🙂
השימוש ב ב Centering מתבצע על ידי הוספת התכונה data-rellax-percentage ל HTML של כל אחד מהאלמנטים המדוברים כבדוגמה הבאה:
<div class="floating-rocks rellax" data-rellax-speed="8" data-rellax-percentage="0.5">
<img src="images/rock1.svg">
</div>
והנה התוצאה.. אני מזכיר לצפות ב codepen ובמסך רחב בכדי להבחין בהבדלים לעומת הדוגמה הקודמת. כמו כן, אל תתייאשו אם אינכם שמים לב להבדל – ניסוי וטעייה שלכם יסביר זאת טוב יותר.
See the Pen
Part 3 – Parallax by Roee Yossef (@roeey)
on CodePen.
לידיעתכם, ניתן אף לקבוע centering כהגדרה גלובלית ב JavaScript בעת הפעלת הספרייה:
var rellax = new Rellax('.rellax', {
center:true
});
ניישם את אפקט הפרלקס על אלמנטים נוספים
נשפר את העמוד שלנו בכך שנוסיף את האפקט גם על הכוכבים בחלקו העליון של המסך. לטובת העניין נשנה את ה HTML של אותן תמונות, כלומר נוסיף את הקלאס rellax ונקבע את מהירות הגלילה כרצוננו:
<img class="rellax" data-rellax-speed="1" src="https://savvy.co.il/wp-content/uploads/2020/08/earth.png" alt="">
<img class="rellax" data-rellax-speed="2" src="https://savvy.co.il/wp-content/uploads/2020/08/makemake.png" alt="">
<img class="rellax" data-rellax-speed="4" src="https://savvy.co.il/wp-content/uploads/2020/08/moon.png" alt="">הוספת אנימציה חלקה לתנועת האובייקטים המדוברים
אם שמתם לב בדוגמה הראשונה שהצגנו, או ראיתם את האלמנטים הצפים בחלקו העליון של פוסט זה – ודאי הבחנתם כי אלו נעים בצורה מאד חלקה. את זאת השגנו בעזרת CSS transition פשוט אותו נוסיף לקלאס rellax. הנה דוגמה כיצד עשינו זאת:
.rellax {
transition: transform 4s cubic-bezier(0, 1, 0.5, 1) 0s;
}תנו מבט בעמוד שיצרנו לאחר שינוי זה ותגלו תנועה הרבה יותר חלקה ונעימה לעין של האלמנטים….
See the Pen
Part 4 – Parallax by Roee Yossef (@roeey)
on CodePen.
לסיכום
קיימים מספר פרמטרים נוספים וכמה מתודות שלא הזכרנו בפוסט זה לספרייה Rellax. אלו מאפשרים גמישות רבה יותר ומשחק עם אותם אלמנטים להם ביצענו את השינוי. ולמרות שהדוקומנטציה של זו לוקה בחסר, אתם מוזמנים לתת מבט בעמוד הגיטהאב של הספרייה בכי לקבל מידע נוסף על האפשרויות.
כפי שהסברנו, השימוש ב Parallax Scrolling מאפשר תנועה ועומק והוא פתח לחווית משתמש מעניינת ועיצובים מגניבים שאינן מוזכרים בפוסט זה. אם יש לכם דוגמאות מדליקות של אתרים המשתמשים באפקט זה או אולי אף דרכים אחרות לשקף עומק של אלמנטים, מאד נשמח אם תשתפו אותנו.
כתמיד, אתם מוזמנים לשאול שאלות או לצעוק עליי בתגובות מטה… 🙂 למידע נוסף בנושא Parallax Scrolling תנו מבט בקישורים הבאים:
תודה רועי, איזו השקעה! ובכלל על כל הפוסטים בזמן האחרון…
תודה לך על המעורבות בבלוג עדיאל 🙂