כיצד להוסיף בקלות את אפקט פרלקסה לאתר וורדפרס שלך

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

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

מהו Parallax?

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

עיצוב אתר האינטרנט פרלקסה היא טכניקה שבה תמונות רקע לנוע במהירות שונה, בדרך כלל לאט יותר מאשר בתמונות הקדמי. המטרה היא ליצור אשליה של עומק (אפקט 3D פו) בסביבת 2D.

היישום של parallax כבר סביב משנות ה -80 בעולם המשחקים, אבל מעצבי אינטרנט רק החלו לשלב את האפקט נרחב בשנת 2011 באמצעות HTML5 ו CSS3.

נתיב ראשון: ערכות נושא וורדפרס

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

יש טונות של נושאים פרלקס מוכן WP בחוץ, הן בחינם והן בתשלום. חיפוש מהיר ב- Google ובמאגר הנושאים של WordPress ייתן לך אפשרויות נוספות שתוכל להתמודד איתן.

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

1. Parallax מסגרת

2. מרווי

3. SimpleShift

4. אלגנטיו

5. אינטגרל

6. קנאות

7. ג'וניפר

8. ואל תשכח את הנושא הרשמי האחרון מ WordPress, עשרים ושבע עשרה, תומך גם כותרת פרלקסה.

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

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

נתיב שני: תוספים וורדפרס

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

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

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

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

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

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

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

טריק קטן להוסיף לארסנל שלך: אף אחד לא אמר שאתה לא יכול לשלב את ערכת הנושא ואת התוסף. שימוש בפלאגין אחד הוא גם חוקי. אתה יכול, למשל, להשתמש עשרים ושמונה עבור הנושא שלך ולהתקין Aesop סיפור מנוע בתוספת Parallax Scroll כמו תוספת spicing מתכון האינטרנט שלך.

עכשיו אתה יכול לצאת למסע פרלקסה וואו המבקרים שלך לאורך הדרך.