Parallax

מה זה Parallax

 

מה זה Parallax

זמן קריאה: 6 דקות

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

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

ה-HTML להשגת אפקט ה Parallax

בשביל להתחיל, אנחנו נצטרך קודם קצת קוד HTML, אנחנו נכלול טקסט פילטר כדי להכניס אותו במקטע מסוים ואז עוד <div>

שישמש כרקע שלנו:<div class=”bg”> </div>

 

<section>

<h1>דף הבית</h1>

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

<ul>

<li>מיתוג</li>

<li>לוגו</li>

<li>אתרים</li>

<li> יישומי רשת</li>

<li>פיתוח אתרים</li>

<li>מערכות ניהול תוכן</li>

<li>עיצוב אתרים ריספונסיבי</li>

<li>כרטיסי ביקור</li>

<li>עיצוב לדפוס</li>

</ul>

<h1>תת עמוד</h1>

<p>לפני שאתם בוחרים בנו כחברה שתלווה אתכם בפרוייקט היינו רוצים שתכירו אותנו טוב יותר. הנה הצוות שלנו:</p>

<img alt="" src="http://lorempixum.com/500/600" /> <p>שם של מישהו וניסיון.</p>

<p> שם של מישהו וניסיון.</p> <p> שם של מישהו וניסיון.</p> <img alt="" src="http://lorempixum.com/500/600/sports" /> <p> שם של מישהו וניסיון.</p>

</section>

זה כל ה-HTML שאנחנו צריכים. הטקסט הוא רק כדי לוודא שאנחנו מכסים את כל העמוד כדי שאנחנו נהיה חייבים להשתמש בגלילה. נמשיך עם ה-CSS:

ה-CSS

ה- CSS שאנחנו צריכים בשביל ליצור אפקט Parallax הוא די פשוט אם אתם מבינים למה הוא נכתב כמו שהוא נכתב. אנחנו קודם כל צריכים להגדיר את תמונת הרקע של ה- .bg div ואז אנחנו צריכים למנוע מה div את הגלילה כי פעולת הגלילה תיושם באמצעות jQuery: אז אנחנו צריכים להגדיר את המיקום שלו כ fixed. אח"כ אנחנו צריכים להגדיר את הרוחב ל-100% ואת הגובה ל-300% כדי לוודא שה div יותר גדול מהמסך עצמו. אנחנו נמקם אותו בצד העליון השמאלי העליון ואז ניתן לו z-index של -1 כדי לוודא שהוא מוצג מתחת לטקסט.

.bg {

background: url('bg.jpg') repeat;

position: fixed;

width: 100%;

height: 300%;

top:0;

left:0;

z-index: -1;

}

זה ה-CSS שאנחנו צריכים בשביל ה bg div, עכשיו אנחנו רק צריכים להוסיף style לשאר העמוד למרות שזה ממש לא הכרחי כי זה לא משפיע על אפקט הגלילה:

section {
color: #fff;
font-family: arial;
width: 500px;
margin: auto;
line-height: 20px;
font-size: 16px;
}

תנסו לגלול עכשיו בעמוד ואתם תראו שהטקסט יגלול למטה אבל התמונה תישאר במקומה, אנחנו הולכים לשנות את זה עם jQuery:

ה-jQuery

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

function parallax(){
var scrolled = $(window).scrollTop();

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

$('.bg').css('top', -(scrolled) + 'px');
}

הרעיון של אפקט Parallax הוא לזוז במהירות שונה, אז כדי להתאים את המהירות אנחנו מכפילים את הערך בשבר, לדוגמא 0.5 זה 50%:

function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top', -(scrolled * 0.2) + 'px');
}

יש רק דבר אחד שאנחנו צריכים לעשות וזה לקרוא לפונקציה כל פעם שהגלילה מופעלת:

$(window).scroll(function(e){
parallax();
});

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

סיכום

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

השתמשתם ב Parallax בעבר? יש לכם שיטה טובה יותר? תיידעו אותנו בתגובות למטה

בניית אתרים לעסקים NextSite

 

0 תגובות

השאירו תגובה

Want to join the discussion?
Feel free to contribute!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *