כיצד להפוך את האתר שלך לרספונסיבי ואינטראקטיבי עם CSS ו-JavaScript

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

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

במאמר הדרכה זה, תלמד כיצד להפוך את אתר ה-HTML וה-CSS שלך לרספונסיבי ואינטראקטיבי.

הפיכת האתר שלך לאינטראקטיבי

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

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

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

בספריית הפרויקט שלך, תצטרך ליצור קובץ JavaScript חדש ולקשר אותו לקובץ ה-HTML שלך באמצעות שורת הקוד הבאה:

ב תַסרִיט תג, ה src value הוא השם של קובץ ה-JavaScript, שבדוגמה למעלה הוא main.js.

הקובץ main.js

// שימוש ב-Javascript כדי להפעיל פריט תפריט על גלילה
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll("section");
function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("active");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

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

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

#navbar .menu li.active a{
צבע: #fff;
}

הפעלת פריטי תפריט בלחיצה

 //באמצעות jquery להפעלת פריט תפריט בלחיצה
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

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

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

סָעִיף{
scroll-margin-top: 4.5rem;
}

הקוד שלמעלה יבטיח שכאשר אתה מנווט לכל קטע על ידי לחיצה, סרגל הניווט יישאר 4.5 רם מעל כל קטע (או 72px). עוד תכונה מגניבה להוסיף לאתר שלך היא גלילה חלקה, שתוכל לבצע באמצעות קוד ה-CSS הבא:

html {
גלילה-התנהגות: חלקה;
}

הפיכת דף הבית שלך לאינטראקטיבי

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

באתר הפורטפוליו, הקישור היחיד בדף הבית כולל את btn class (מה שנותן לו מראה של כפתור). אז כדי להפוך את הכפתור הזה לאינטראקטיבי, אתה יכול פשוט להקצות את :לְרַחֵף בורר ל btn מעמד.

שימוש בבורר :hover

 .btn: hover{
רקע: #fff;
צבע כחול;
גבול: מוצק כחול;
border-radius: 5px;
}

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

תכונה מגניבה נוספת עבור דף הבית היא אנימציית הקלדה, אשר משתמשת typed.js (תסריט אנימציה להקלדת jQuery).

שימוש ב-typed.js

// תסריט אנימציה של טקסט להקלדת jquery
var typed = new Typed(".typing", {
strings: ["מפתח תוכנה"],
סוג מהירות: 100,
מהירות חזרה: 60,
לולאה: נכון
});

לאחר שתוסיף את הקוד למעלה לקובץ ה-JavaScript שלך, תצטרך לבצע את השינוי הבא ב-HTML:

ואני א 

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

הפיכת חלקים אחרים באתר האינטרנט שלך לאינטראקטיביים

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

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

‎.img-container img{
רוחב מקסימלי: 450 פיקסלים;
מעבר: כל 0.3s קלות החוצה;
סמן: מצביע;
}
.img-container img: hover{
טרנספורמציה: קנה מידה (1.2);
}

הפיכת האתר שלך לרספונסיבי

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

קָשׁוּר: כיצד להשתמש בשאילתות מדיה ב-HTML ו-CSS ליצירת אתרים רספונסיביים

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

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

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

הכנסת שורת הקוד למעלה בתוך ה- רֹאשׁ תג של קובץ ה-HTML שלך (או במקרה זה קובץ אתר הפורטפוליו) יבטיח שכל מכשיר ברוחב מסך של 1100 פיקסלים ומתחת ישתמשו בסטיילינג ב- widescreen.css קוֹבֶץ.

הקובץ widescreen.css

/* בית */
#navbar .container h1 a span{
אל תציג דבר;
}
#home .home-content .text-3 span{
צבע: #000000;
}
/* תיק עבודות */
.projects{
להצדיק-תוכן: מרכז;
}
.פּרוֹיֶקט{
flex: 0;
}
/* על אודות */
.about-content{
flex-direction: עמודה;
}
/* איש קשר */
.contact-content{
flex-direction: עמודה;
}

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

קובץ ה-CSS השני יצור את מבנה הפריסה עבור סמארטפונים וטאבלטים במצב פורטרט. יהיה לו רוחב מקסימלי של 760 פיקסלים, כפי שניתן לראות בתג הקישור הבא:

הקובץ mobile.css

/* Navbar */
#navbar .container h1 a span{
אל תציג דבר;
}
#navbar .container .menu{
שוליים-שמאליים: 0rem;
}
#ham-menu{
רוחב: 35 פיקסלים;
גובה: 30 פיקסלים;
שוליים: 30px 0 20px 20px;
סמן: מצביע;
}
#navbar .container .menu-wrap .menu{
אל תציג דבר;
}
.בָּר{
גובה: 5 פיקסלים;
רוחב: 100%;
צבע רקע: #ffffff;
בלוק תצוגה;
border-radius: 5px;
מעבר: קלות של 0.3 שניות;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* בית */
#בית{
תצוגה: flex;
background: url("/images/home.jpg") no-repeat center;
גובה: 100Vh;
}
#home .container{
שוליים: 6rem 1rem 2rem 1rem;
ריפוד: 2rem;
}
#home .home-content .text-1{
גודל גופן: 20px;
שוליים: 1.2 רם;
}
#home .home-content .text-2{
גודל גופן: 45px;
משקל גופן: 500;
שוליים: 1rem;
}
#home .home-content .text-3{
גודל גופן: 22px;
שוליים: 1.2 רם;
}
#home .home-content .text-3 span{
צבע: #0000ff;
משקל גופן: 600;
}
#home .container{
שוליים-שמאליים: 4.5 רם;
}
/* על אודות */
#about .container{
ריפוד: 0;
}
/* איש קשר */
#contact .container{
ריפוד: 0;
}

הקובץ שלמעלה ייצור את פריסת הסמארטפון הרספונסיבית הבאה:

דרכים אחרות ליצור אתרים אינטראקטיביים רספונסיביים

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

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

15 תבניות ג'ומלה אופנתיות לאתרים רספונסיביים

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

קרא הבא

על הסופר