תכונות Parallax חינם באמצעות וניל

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

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

לכן אני ממליץ Rellax.js עבור הצרכים פרלקסה שלך. זה תוסף קוד פתוח חינם בנוי על וניל JavaScript, כך אין כל תלות.

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

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

כל קוד המקור Rellax זמין בחינם על GitHub אם אתה רוצה להוריד עותק.

ההתקנה כולה משתמשת בפונקציה JS אחת מיקוד .rellax מחלקה כזו:

 var rellax = Rellax חדש ('rellax'); 

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

מכאן, אתה פשוט לעטוף את האלמנטים parallax שלך בתוך div עם .rellax בכיתה ו הגדר את מאפיין המהירות. זה עובד דרך מהירות- relaxax תכונה מותאמת אישית המקבלת ערכים מ -10 עד 10.

הנה קטע טקסט לדוגמה מה- HTML בדף ההדגמה:

 
 אני איטי וחלק 
 

אתה יכול גם אלמנטים מרכזיים בדף ו להתאים אישית את עמדות אלמנט באמצעות CSS.

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

כדי לראות א דמו ישיר, לקחת להציץ באתר הראשי או לדפדף ריפו GitHub. זה כולל כמה תיעוד, יחד עם קישורים לאתרים חיים באמצעות Rellax.js.

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