אתר בדף אחד



שתפו את הפוסט

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

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

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

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

נתחיל עם הhtml של הדף:

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

אני מקווה שההסבר לא מבלבל. העקרון הוא משהו כגון: <a href="#home"></a>.

ואז ניצור דיב או סקציה (תלוי שאיזו גירסת html משתמשים) שהid שלה יהא home. וכך הלאה לכל אזור שנרצה.

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

body{ margin: 0; padding: 0; background-color: bisque}
         nav{ width: 200px; background-color: blanchedalmond; border: 1px solid #000 ; position: fixed; top: 30%; z-index: 20;}
         nav ul li{list-style: none; margin-bottom: 5px;}
         .section{ width: 100%; background-color: white; height: 680px; margin-bottom: 10px; margin-top: 20px; position: relative;}
         header:not(#mainheader){width: 100%; background-color: aqua;text-align: center;}
         footer:not(#mainfooter){width: 100%; background-color: aqua; position: 20px;text-align: center; position: absolute; bottom: 0px;}

 

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

לשם כך נשתמש בפלאגין של jquery המכונה: scrollTo

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

ואז נוסיף את הקוד הפשוט הבא:

       $(document).ready(function(){
	

	$('nav a,footer a.up').click(function(e){

		

		$.scrollTo( this.hash || 0, 500);
		e.preventDefault();
	});

});

 

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

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

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

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



שתפו את הפוסט

אולי יעניין אתכם לקרוא גם:


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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