29 לוחות זמנים של CSS עם JavaScript מהודר

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

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

אינדקס

1 ציר הזמן על ידי גלילה
2 ציר זמן ב- CSS
3 מחוון ציר הזמן רספונסיבי
4 ציר זמן מתקדם
5 ציר זמן עם כותרת קבועה ו- Flexbox
6 ציר הזמן של הפרויקט
7 ציר זמן
8 הייפרלופ
9 ציר זמן אנכי
10 ציר זמן בפלקסבוקס
11 ציר זמן ב- DIV
12 ציר זמן ב- CSS ו- HTML
13 הערות וציר זמן משוב
14 בוקר ציר זמן ב- HTML ו- CSS
15 ממשק משתמש לציר הזמן
16 ציר זמן ב- CSS בלבד
17 ציר זמן רספונסיבי V3
18 ציר הזמן שוכן בצבע
19 ציר זמן היסטורי רספונסיבי
20 ציר זמן קבוצתי
21 ציר זמן אופקי של CSS ו- HTML
22 ציר זמן CSS, HTML ו- slick.js
23 רצף ציר הזמן V1
24 ציר זמן אופקי HTML CSS
25 ציר הזמן קודיאוס
26 ציר זמן אופקי
27 ציר זמן ללא שם
28 ציר זמן
29 ציר זמן אופקי נוסף

ציר הזמן על ידי גלילה

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

ציר זמן ב- CSS

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

מחוון ציר הזמן רספונסיבי

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

ציר זמן מתקדם

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

ציר זמן עם כותרת קבועה ו- Flexbox

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

ציר הזמן של הפרויקט

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

ציר זמן

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

הייפרלופ

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

ציר זמן אנכי

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

ציר זמן בפלקסבוקס

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

ציר זמן ב- DIV

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

ציר זמן ב- CSS ו- HTML

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

הערות וציר זמן משוב

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

בוקר ציר זמן ב- HTML ו- CSS

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

ממשק משתמש לציר הזמן

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

ציר זמן ב- CSS בלבד

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

ציר זמן רספונסיבי V3

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

ציר הזמן שוכן בצבע

אחד מקווי הזמן האופקיים האיכות החזותית הגבוהה ביותר ברשימה. ציר זמן אינטראקטיבי היטב עם אנימציות עדינות ומוצגות היטב כדי להציע חווית משתמש נהדרת בכל פעם שנלחץ על אחד מרווחי הזמן. זה עשוי עם HTML CSS / Sass ו- JavaScript / TypeScript (jquery.js).