בנה דף נחיתה בעל מסך מפוצל

מְחַבֵּר: Peter Berry

תאריך הבריאה: 13 יולי 2021

תאריך עדכון: 13 מאי 2024

וִידֵאוֹ: How to create a responsive split screen using pure HTML5/CSS3

תוֹכֶן

01. התארגן
02. סיים את ה- HTML
03. חקור משתני סאס
04. התאימו את עיצוב הגוף
05. סגנו את כותרות המדור
06. הפוך את ה- CTA לבלוטת
07. הגדר את רקע המיכל ואת המסכים
08. הוסף תמונות רקע
09. הוסף מעברים ואפקטים של רחף
10. עברו ל- JavaScript
11. הוסף והסר כיתה
12. הפוך אותו למגיב

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

עיין ב- CodePen העובד להדרכה זו

במדריך זה נעבור כיצד לבנות דף נחיתה מרתק עבור מותג אופנה בדיוני. הוא יתרכז סביב עיצוב בעל מסך מפוצל עם תמונות גדולות ומעברים מונפשים שקורים ברחף.בדף זה יהיו שני לחצני קריאה לפעולה ברורים ואנו נשתמש ב- HTML, Sass לעיצוב ונגיעה של JavaScript וניל המשתמשת בתחביר ES6 (זכרו לוודא כי אחסון אתרים שלכם מתאים לצרכי האתר שלכם). מורכב מדי? צרו אתר ללא צורך בקוד, נסו בונה אתרים פשוט.

01. התארגן

אם אתה משתמש ב- CodePen, ודא שה- CSS מוגדר ל- 'SCSS' בהגדרות העט. באפשרותך לבצע שינוי זה על ידי לחיצה על כרטיסיית ההגדרות, בחר 'CSS' ושינוי מעבד ה- CSS Pre-Processor ל- SCSS באפשרויות הנפתחות.

אז נוכל להתחיל להוסיף ב- HTML שלנו. אנו הולכים לעטוף קטע שנקרא 'שמאל' וקטע שנקרא 'ימינה' בתוך מחלקת מיכלים, כששני החלקים מקבלים מחלקה של 'מסך'.

div> קטע> / קטע> קטע> / קטע> / div>

02. סיים את ה- HTML

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

div> קטע> h1> אופנת גברים / h1> כפתור> a href = "#"> למידע נוסף / a> / כפתור> / קטע> קטע> h1> אופנת נשים / h1> כפתור> a href = "#"> למד עוד / a> / כפתור> / קטע>

03. חקור משתני סאס

הדבר היחיד שכולנו אוהבים בסאס הוא השימוש במשתנים. למרות שמשתני CSS מקוריים מקבלים יותר תמיכה, אנו נשמור על הדברים באמצעות Sass. אנו שמים את אלה בראש שלנו .scss, ואתה יכול לבחור את הצבעים שאתה רוצה, אך באמצעות rgba ערכים יתנו לנו יותר גמישות.

/ * * משתנים * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ כפתור שמאל-רחף: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ כפתור העכבר-רחף: rgba (255, 140, 219, 0.7); רוחב ריחוף $: 75%; $ רוחב קטן: 25%; $ animateSpeed: 1000ms;

04. התאימו את עיצוב הגוף

ראשית, ננקה את כל ריפוד ברירת המחדל והשוליים לגוף ואז נגדיר את משפחת הגופנים ל- Open Sans. זה ישפיע רק על הכפתור, כך שלא משנה יותר מדי באיזה גופן אנו משתמשים. ואז נגדיר את הרוחב והגובה ל- 100% וודא שכל דבר שעולה על גדותיו על ציר ה- X יוסתר.

html, body {ריפוד: 0; שוליים: 0; font-family: 'Open Sans', sans-serif; רוחב: 100%; גובה: 100%; הצפה- x: מוסתר; }

05. סגנו את כותרות המדור

הגיע הזמן לבחור גופן של גוגל לכותרות החלקים - בחרנו ב- Playfair Display. ואז באמצעות תרגם X אנו יכולים לוודא שכותרות החלקים מתרכזות תמיד בציר ה- X.

h1 {font-size: 5rem; צבע: #fff; עמדה: מוחלט; עזבו: 50%; עליון: 20%; טרנספורמציה: translateX (-50%); חלל לבן: nowrap; משפחת גופנים: 'Playfair Display', serif; }

06. הפוך את ה- CTA לבלוטת

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

. כפתור {display: block; עמדה: מוחלט; עזבו: 50%; עליון: 50%; גובה: 2.6rem; ריפוד עליון: 1.2rem; רוחב: 15rem; יישור טקסט: מרכז; צבע לבן; גבול: 3px מוצק #fff; גבול-רדיוס: 4 פיקסלים; משקל גופן: 600; שינוי טקסט: אותיות גדולות; קישוט טקסט: אין; טרנספורמציה: translateX (-50%); מעבר: כל ה -2.

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

.screen.left .button: רחף {רקע-צבע: $ כפתור שמאל-רחף; גבול צבע: $ כפתור שמאל-רחף; } .screen.right .button: רחף {רקע-צבע: $ כפתור ימני-רחף; גבול צבע: $ ימני כפתור רחף;

07. הגדר את רקע המיכל ואת המסכים

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

.container {עמדה: קרוב משפחה; רוחב: 100%; גובה: 100%; רקע: $ container-BgColor; .screen {position: מוחלט; רוחב: 50%; גובה: 100%; הצפה: מוסתרת; }}

08. הוסף תמונות רקע

גם החלקים השמאליים והימניים יציגו תמונה, ותוכלו למצוא תמונות מלאי ללא תמלוגים מאתרים כמו Unsplash, Pixabay או Pexels (בהם השתמשתי במדריך זה). כדי להקל על הדברים השתמשתי בשירות אירוח ושיתוף תמונות בחינם בשם imgbb שאליו אנו יכולים לקשר ב- CSS שלנו.

.screen.left {משמאל: 0; רקע: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) מרכז מרכז ללא חזרה; גודל רקע: כריכה; &: לפני {עמדה: מוחלט; תוכן: ""; רוחב: 100%; גובה: 100%; רקע: $ left-bgColor; }}

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

.screen.right {right: 0; רקע: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) מרכז מרכז ללא חזרה; גודל רקע: כריכה; &: לפני {עמדה: מוחלט; תוכן: ""; רוחב: 100%; גובה: 100%; רקע: $ right-bgColor; }}

09. הוסף מעברים ואפקטים של רחף

מהירות האנימציה להשפעת הרחף שלנו בשני המסכים תישלט על ידי מעבר המחזיק בערך המשתנה שלנו $ animateSpeed, שזה 1000ms (שנייה אחת). ואז נסיים עם הקלה מסוימת לאנימציה, וזו קלות פנימה והחוצה שתסייע לנו להנפיש בצורה חלקה יותר.

.screen.left, .screen.right, .screen.right: לפני, .screen.left: לפני {מעבר: $ animateSpeed כל קלות-ב-אאוט; }

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

.רחף-שמאל. שמאלה {רוחב: $ רחף-רוחב; }. רחף-שמאל. ימני {רוחב: $ רוחב קטן; }. רחף-שמאל. Right: לפני {z-index: 2; }

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

. רחף-ימין. ימני {רוחב: $ רחף-רוחב; }. רחף ימני. שמאלה {רוחב: $ רוחב קטן; }. רחף ימינה. שמאלה: לפני {z-index: 2; }

10. עברו ל- JavaScript

אנו נשתמש במגע של JavaScript וניל כדי לעזור לנו להוסיף ולהסיר שיעורי CSS ונשתמש גם בחלק מהתכונות החדשות של ES6. הדבר הראשון שעלינו לעשות הוא להכריז על כמה משתנים קבועים.

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

const doc = מסמך;

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

const right = doc.querySelector (". right"); const left = doc.querySelector (". שמאל"); מיכל const = doc.querySelector (". container");

משתמש ב שמאלה המשתנה הקבוע שהכרזנו בשלב האחרון, כעת ניתן להוסיף לו מאזין לאירועים. אירוע זה יהיה עכבר עכבר אירוע ובמקום להשתמש בפונקציה להתקשרות חוזרת, נשתמש בתכונת ES6 אחרת הנקראת פונקציות חץ '(() =>).

// מוסיף מחלקה לאלמנט המיכל שנמצא ברחף left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});

11. הוסף והסר כיתה

בשלב האחרון, מאזין האירועים שלנו הוסיף א עכבר עכבר אירוע המכוון למחלקת המכולות הראשית ומוסיף מחלקה חדשה בשם רחף-שמאל לאלמנט החלק השמאלי. עם הכינוי הזה נוסף, כעת עלינו להסיר אותו כשאנחנו מרחפים ממנו. נעשה זאת באמצעות עלי עכבר האירוע וה- .לְהַסִיר() שיטה.

// מסיר את המחלקה שנוספה ב- hover left.addEventListener ("mouseleave", () => {container.classList.remove ("רחף-שמאל");});

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

right.addEventListener ("עכבר מרכז", () => {container.classList.add ("רחף ימינה");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("רחף ימינה");});

12. הפוך אותו למגיב

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

@media (רוחב מקסימלי: 800 פיקסלים) {h1 {font-size: 2rem; }. כפתור {רוחב: 12rem; }

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

@media (גובה מקסימלי: 700 פיקסלים) {. כפתור {למעלה: 70%; }}

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

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

מאמר זה פורסם במקור במגזין נט גיליון 305. הירשם עכשיו.

סעיף הקודם