בתנועה, פרלקסה פירושה שינוי במיקום של אובייקט על רקע כלשהו ביחס לצופה שנמצא במקום. מונח זה זכה לפופולריות באינטרנט. בפרט, האתר נראה מעניין, בעיצובו ישנם אלמנטים דינמיים. Parallax היא טכניקת עיצוב דפי אינטרנט המשמשת מנהלי אתרים כדי למשוך מספר רב של מבקרים.
איך זה פרללקס
ניתן להשתמש בגלילה בפראלקס אנכית וגם בקו ישר. נינטנדו היא הדוגמה הטובה ביותר. רבים מאיתנו זוכרים בנוסטלגיה משחקי מחשב, המיוצגים על ידי תנועת הדמויות הראשיות מהצד השמאלי של המסך לימין. אפשר גם לנוע למטה, המתבצע לאורך קו ישר הממוקם אנכית. לעתים קרובות נעשה שימוש באפקט הפרלקס על הרשת. אתה יכול להשתמש ב-JavaScript או ב-CSS כדי ליצור מחוון אנכי 3.
האפקט המרחבי התלת מימדי המתואר הוא רק אופייני להם. יוצרי המשחקים השתמשו במספר שכבות רקע. הם שונים במרקם, בעוד התנועה מתבצעת עם שונהמהירות.
אל תחשוב שהפרלקסה היא רק אפקט תלת מימדי. בעמוד, ניתן להזיז את הסמלים הקיימים. יתר על כן, זה נראה די אטרקטיבי. אפשרות טובה במיוחד היא להשתמש במסלול אישי עבור כל אחד מהם. במקרה זה, נעשה שימוש בסמלים שונים, הנעים לאורך מסלולים שונים. עיצוב זה מושך תשומת לב.
תמונה מתעוררת לחיים
קשה למצוא אתר בלי תמונות. רישומים איכותיים ומדגימים מושכים מבקרים. אבל מרבית תשומת הלב נמשכת לסוגים שונים של תמונות דינמיות. ואכן, אם יש תנועה בעת ביקור באתר, אז זה מושך תשומת לב. מגדיל באופן משמעותי את הסבירות שמבקר יחזור למשאב לתמונה דינמית. נראה שהוא זז או לא? לכן, כדי למשוך מבקרים לאתר, כדאי ללמוד דבר כזה כמו אפקט הפרלקסה.
דוגמאות לאתר תמונות נעות:
- hvorostovsky.com;
- www.kagisointeractive.com.
כפי שמוצג בדוגמאות, החוויה משתפרת על ידי תפריטים נפתחים לפריטי משנה. אלמנט כזה חוסך זמן למבקרים, ולכן הוא אטרקטיבי עבורם.
jQuery library
המונח jQueryParallax מגדיר את הספרייה באותו שם. הודות לו, קל להשיג את האפקט של תנועה בפורמט תלת מימד. בספריית jQuery נוצרת תפיסה תלת מימדית במגוון דרכים. אחד מהם מורכב בתנועה אופקית בו זמנית של אובייקטים ברקע עםמהירות שונה. ספרייה זו מאופיינת בנוכחות של מספר רב של סוגים שונים של נכסים. והעקירה המתוארת כאן היא רק חלק קטן מהיכולות שלה.
האתר נראה די אטרקטיבי, שלצורך יצירתו נעשה שימוש באלמנטים מודרניים שונים. אחד מהם הוא פרלקסה. אתרים לדוגמה עשויים להיראות כך:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallax מיוצג על ידי שכבות שנעות עם העכבר. אלמנטים דינמיים מאופיינים במיקום מוחלט (מיקום:אבסולוט;). כל אחד מהם מאופיין בגודל משלו ובתנועה במהירות אישית. זה יכול להיות טקסט או תמונה (לבקשת יוצרי המשאב).
תפיסת המבקר באתר
לאחר מכן, אדם בדרך כלל שם לב לכך שהדף מעוצב באיכות גבוהה, נוח ובעל ידע. עובדה זו מכבדת בדרך כלל. קורה שמתעוררת סקרנות לנסות אלמנטים אחרים. יש מספר עצום של אתרים זהים באינטרנט. איך להפוך את המשאב שלך למיוחד?
אם אתה אוהב את העיצוב, המבקר יישאר לתקופה ארוכה יותר. לפיכך, הסבירות שהוא יימשך מהמידע שפורסם עולה, הוא יגלה עניין. כתוצאה מכך, אדם ישתמש בשירות, במוצר או במבצע הקידום המוצעים.
משחקים ישנים מועדפים
המושג "פרלקס" צריך להיות מוכר לכולםחובבי קונסולות של שנות ה-80 וה-90. זה חל על משחקים:
- האחים מריו
- מורטל קומבט.
- Streets of Rage.
- Moon Patrol.
- צבים בזמן.
כלומר, פרלקסה היא טכניקה שנמצאת בשימוש כבר תקופה ארוכה למדי. המשחקים האלה זכורים באמת בכמה נוסטלגיה. אחרי הכל, נראה שהם חדורים באופי של אותה תקופה.
התמונות על המסך נוצרות בטכניקה כמו גלילת פרלקסה. אין שום דבר מפתיע בעובדה שהטכניקה הזו זכתה לפופולריות ראויה. הקונספט העיצובי הזה מתקבל בחום על ידי אלה ששיחקו בשנות ה-80-90 או צפו בשעות הפנאי של חברים.
גלילה מקבילה
משווקים של המותגים המובילים בעולם השתמשו זה מכבר בכל מיני התקדמות טכנית. כך, ניתן לעניין אפילו מבקר מזדמן באתר.
גלילת Parallax נוצלה בצורה מוצלחת למדי על ידי נייקי. האתר המקורי של החברה עוצב על ידי ווידן וקנדי. אבל העיצוב הזה לא שרד. המשאב עודכן בהדרגה, בהתאם למגמות של זמננו. Activatedrinks.com הוא דוגמה לאתר שהעיצוב שלו מזכיר את זה שבו השתמשו משווקי נייקי של התקופה.
הרמקולים לא צריכים להיות יותר מדי
אל תשכח שעיצוב האתר הוא לרוב הקריטריון המרכזי שמנחה את המבקר. ביצוע גרועהמשאב בדרך כלל משאיר את המשתמש עם רושם קלות הדעת של חברת הבעלים. אבל אתר עם כל מיני אלמנטים עיצוביים אטרקטיביים מעיד על הרצון של בעלי הארגון לעניין את המבקרים.
כאן כדאי לזכור על פרלקסה. זהו כלי נפלא. אבל אפילו הם לא צריכים להיסחף יותר מדי. כי הדף, שבו יש מספר רב של סוגים שונים של אלמנטים נעים, די קשה לתפוס. עדיף להפוך את העיצוב לאופנתי למדי ומובן.
Dynamic צריך להיות אלמנטים בודדים הדורשים בחירה. תיתכן גם תמונה שנוצרת באמצעות שכבות הנעות אחת ביחס לשנייה. אל תשכח כי אתר המשתמש מיועד בעיקר למבקרים. זה לא חייב להיות יצירת מופת של מנהל אתרים שהשקיע בו את כל הידע שלו. אחרי הכל, גישה כזו רק תסבך את התפיסה.
איך ליצור ניווט באתר
איך עושים פרלקסה? שאלה זו מעניינת בוני אתרים רבים. אין צורך להכיר את המורכבויות של כתיבת תגים. זה מאוד נוח להשתמש במשאבים מיוחדים באינטרנט. ממספר ההצעות הגדול הזמין, ניתן להבחין בין העוזרים הבאים:
- Plax היא תוכנית קלה למדי לשימוש. זה נוטה להפוך את הדף לנוזל על ידי הזזת העכבר.
- jQuery Parallax Image Slider - תוסף jQuery המשמש ליצירת מחווני תמונה.
- Jquery Image Parallax - מתאים לעיצוב שרטוטים שקופים. באמצעות השימוש שלו ב-PNG, קובצי-g.webp" />
- Curtain.js משמש ליצירת דף עם לוחות קבועים. במקרה זה, השפעת פתיחת הווילונות נצפה.
- גלילה פרלקס: תוסף jQuery נועד ליצור אפקט פרלקס בעת גלילה בגלגל העכבר.
כמה תוספים שימושיים נוספים
כפי שאתה יודע, המידע הוא בעל הערך הגדול ביותר. וככל שמספר הדרכים להשגת הרצוי ידוע גדול יותר, כך ההסתברות להשיג את התוצאה הנכונה קרובה יותר. תוספים שימושיים המשמשים ליצירת דינמיקה:
- jQuery Scroll Path - משמש להצבת אובייקטים בנתיב שצוין.
- Scrollorama הוא תוסף jQuery. הוא משמש ככלי לעיצוב חומר אטרקטיבי. מאפשר לך "להחיות" את הטקסט בעמוד עקב גלילה נוחה.
- Scrolldeck הוא תוסף jQuery. זהו פתרון מצגת נהדר לאתרי עמוד בודד.
- jParallax מייצג את תנועת השכבות בהתאם לתנועת מצביע העכבר.
- Stellar.js הוא תוסף שבעזרתו כל אלמנט מעוצב בתוספת אפקט גלילה פרלקסי.
Parallax מעוגן לסמן
הפרלקס הזה נראה די מרשים. חסר תנועה במבט ראשוןאובייקטי דף אתר זזים כאשר סמן העכבר מתקרב. נראה שהוא מתעורר לחיים ועוקב אחר האלמנט המוזז.
ראשית, כדאי לעצור בתמונה. התמונה הנדרשת ממוקמת במסגרת, כאשר הקצוות שלה חייבים להיות מוסתרים. השיטה פשוטה מאוד, והציור שהתקבל נראה די אטרקטיבי.
אפקט הפראלקס עבור האתר הוא דרך נפלאה לעצב. השימוש בו מצביע על כך שהוקדשה תשומת לב ראויה ליצירת המשאב. לכן, כדאי לשים לב לשירותים המוצעים או למידע לקריאה. אתרים כאלה נראים מועילים יותר על רקע משאבים זהים אך מעוצבים בפשטות.
