29 ויסגעצייכנט פּלאַן טיימליינז אין CSS און מיט אַ ביסל דזשאַוואַסקריפּט

מעגילע טיימליין

די טיימליינז אָדער טיימליינז זענען אן אנדער פון די עקסטרע עלעמענטן וואָס מיר קענען ויסשטימען אין אַ וועבזייטל צו ווייַזן פּראָגרעס אָדער עוואָלוציע אין יאָרן פון אַ פירמע אָדער פירמע. א געזונט וויזשאַוואַל גראַפיק אויסדרוק וואָס, ווי איר וויסן ווי צו עלעגאַנטלי קאַמפּאָוז עס מיט אַ טיפּ און וויזשאַוואַל עלעמענטן, קענען ווייַזן די טריט דורך אַ סערוויס אָדער פּראָדוקט איבער צייַט.

די 29 טיימליינז וואָס איר וועט געפֿינען אונטן זענען פון ווערטיקאַל טיימליין ווי די כאָריזאַנטאַלז. איר וועט געפֿינען די בעסטער וואָס איז פּאַסיק פֿאַר דיין באדערפענישן צו געפֿינען דאָס אויף אַ וועבזייטל וואָס איר אַנטוויקלען פֿאַר אַ קליענט אָדער פֿאַר זיך. מיר גיין מיט אַ זאַמלונג פון זייער טשיקאַווע טיימליינז וואָס זענען זייער וויזשוואַלי אָנגענעם.

טיימליין דורך סקראָללינג

מעגילע טיימליין

א טיימליין וואָס איז אין HTML, CSS, און דזשאַוואַסקריפּט קאָד צו גראַציעז שטעלע זיך ווי אַ גוט מינימאַליסט וואָס עמפאַסייזיז רויט פֿאַר די רשימה פון יאָרן אויף די לינקס, און שוואַרץ פֿאַר די שריפֿט און H2 ס. דער בעסטער זאַך וועגן דעם טיימליין איז אַז ווען איר מעגילע דורך די בלאַט, די יאָר ענדערונג וועט ווערן אויטאָמאַטיש דורכגעקאָכט. גרויס ענדיקן, פּלאַן און רעזולטאַט.

טיימליין אין CSS

CSS טיימליין פּראָפּערטיעס

דער טיימליין ניצט CSS קאָד אפילו צו זיין קאַנפיגיערד רעכט אין עטלעכע פון ​​די פּראָפּערטיעס. עס קען נישט זיין סקראָללינג ווי די פֿריִערדיקע, אָבער עס איז קעראַקטערייזד דורך אַ סעריע פון ​​באָקסעס און אַ בלוי קאָליר צו געבן עס אן אנדער זייער עלעגאַנט פאַרבינדן און לייגן צו די רשימה פון טיימליינז פון דעם ויסגאַבע.

אָפּרופיק טיימליין סליידער

אָפּרופיק טיימליין סליידער

די טיימליין איז געמאכט מיט די סוויפּער דזשס ביבליאָטעק צו אַרייַננעמען HTML, CSS און דזשאַוואַסקריפּט קאָד. עס קען נישט זיין סקראָללינג ווען מיר פאָרן דורך די וועב בלאַט, אָבער עס קען זיין שטעלן די יאָרן אויף די רעכט זייַט און אַ קנעפּל מיט וואָס מיר קענען גיין צו די ווייַטער, אַחוץ צו קענען צו נוצן די מויז טייַטל צו גיין צו אַ ספּעציפיש יאָר. גרויס אַנאַמיישאַן אין יעדער פון די טראַנזישאַנז.

אַוואַנסירטע טיימליין

אַוואַנסירטע טיימליין

די טיימליין שטייט מיט HTML, CSS און JavaScript, אַחוץ גיין אין די מאָנאָקאָלאָר, דווקא אין די רויט טאָנעס. עס איז אויך קעראַקטערייזד דורך די נוצן פון אַ קנעפּל וואָס אַלאַוז איר צו פאָרויס אָדער צוריק אין די טיימליין וואָס איז געווען גאַנץ מינימאַליסט דורך דעם גרויס רעזולטאַט קאָד.

טיימליין מיט פאַרפעסטיקט כעדער און פלעקסבאָקס

טיימליין פאַרפעסטיקט

HTML און CSS קאָד פֿאַר אַ פאַרפעסטיקט כעדער אַז עס וועט בלייבן פאַרפעסטיקט אין דעם מאָמענט ווען מיר סקראָללינג אין דעם בלאַט. פון גרויס סאַטאַלטי צו זיין אַ טיימליין פון גרויס אינטערעס פֿאַר קיין קראַנט דעוועלאָפּער וואָס וויל צו שטיין אויס לויט די קראַנט סטאַנדאַרדס פֿאַר וועב פּלאַן.

פּראָיעקט טיימליין

פּראָיעקט טיימליין

די טיימליין ניצט CSS און HTML צו פאָרשטעלן אַ וויכטיק טיימליין צו נוצן פֿאַר דער ספּעציפיש צייט פֿאַר אַ פּרויעקט. ווען מיר סקראָללינג עס גייט דורך די טעג פון דער וואָך, אַזוי עס איז גאנץ צו ינסטרומענט עס פֿאַר קאַלאַבערייטיוו מכשירים געמאכט דורך די פירמע זיך.

טיימליין

טיימליין

א טיימליין אין HTML, CSS און דזשאַוואַסקריפּט וואָס שטייט אויס פון די מנוחה פֿאַר די וויזשאַוואַל טעמע. ווען מיר סקראָללינג דורך די ווערטיקאַל טיימליין, יעדער מאָל ווען מיר געפֿינען אַ נייַע פאָטאָגראַפיע אין די טיימליין, עס וועט ווערן דער הינטערגרונט בילד פון דעם וועבזייטל וואָס מיר האָבן געשטעלט דעם קאָד.

היפּערלאָאָפּ

היפּערלאָאָפּ

Hyperloopu איז אַ צייט צייט וואָס שטייט אויס גאַנץ פֿאַר די געוויינט פּלאַן און פֿאַר פּראָוגראַמד גאָרנישט מער ווי אין HTML און CSS. עס איז קעראַקטערייזד דורך די נוצן פון פאַרשידענע סיזעס אין די שריפֿט פון די טעקסט מיט אַ ווערטיקאַל שורה און אַ סעריע פון ​​באָקסעס וואָס צייכן יעדער וויכטיק מאָמענט פון דער טיימליין.

ווערטיקאַל טיימליין

ווערטיקאַל טיימליין

אַ מעהאַלעך טיימליין אַז דיסטאַנסאַז זיך פון די מנוחה דורך זיין וויזשאַוואַל פאַרבינדן. עס האט אַ זייער קראַנט גראַדיענט הינטערגרונט אין דער פּלאַן און אַ סעריע פון ​​באָקסעס וואָס אָפּצייכענען יעדער פון די ינטערוואַלז. פּראָוגראַמד אין קסס און HTML.

טיימליין אין פלעקסבאָקס

טיימליין פלעקסבאָקס

איינער פון די בעסטער פאַרטיק טיימליינז און אַז איז באזירט אויף קאַרדס צו אַרייַננעמען אַלע די אינפֿאָרמאַציע מיר דאַרפֿן פֿאַר די צייט מעהאַלעך. אויך דעוועלאָפּעד אין HTML און CSS, עס דאַרף זיין גענומען אין חשבון אַז אַלע קאַרדס מוזן האָבן די זעלבע הייך און ברייט צו רעכענען די פּלאַץ פֿאַר גרעסערע סקרינז.

צייטלינע אין DIV

טיימליין דיוו

א מינימאַליסט טיימליין אין פּלאַן און דאָס איז געווען דעוועלאָפּעד בלויז אין HTML און CSSאַזוי די ימפּלאַמענטיישאַן קענען זיין זייער שנעל. עס איז בישליימעס פּאַסיק פֿאַר יקספּרעסינג אַ טיימליין אין אַן אינפֿאָרמאַציע מיטל רעכט צו זיין מאַנאַקראָום ענדיקן.

טיימליין אין CSS און HTML

CSS טיימליין

איר קענען שטעלן 400 × 300 גרייס בילדער אין דעם טיימליין אונטערשיידן דורך די גרין קאָליר פון די שורות און די טעקסט פון די דאַטעס און טעג. עס האט קיין אַנאַמיישאַנז און קעראַקטערייזד דורך זיין פּשוט פּלאַן אין אַלע לעוועלס.

באַמערקונגען און באַמערקונגען טיימליין

צייטלינע באַמערקונגען

אַ טיימליין איז זייער אַנדערש פון די אנדערע פֿאַר אַלאַוינג שטעלן קאַרדס מיט פאָטאָס פון וסערס, אָדער אין מינדסטער דאָס איז די כוונה אין ערשטער. מיט גרויס וויזשאַוואַל סטיל, די קאַרדס נוצן שיידינג פֿאַר אַ גאַנץ פלאַך טיימליין אָן אַנאַמיישאַנז.

טיימליין מאָרגן אין HTML און CSS

אָפּרופיק טיימליין

א שליימעסדיק טיימליין פֿאַר אָפּרופיק אַז עס איז קעראַקטערייזד דורך HTML, CSS און פאָרשלאָגן אַ פערלי פּשוט אָבער זייער רירעוודיק טיימליין.

טיימליין וי

טיימליין

דעם קאָד אין HTML און CSS אַרבעט בישליימעס פֿאַר פאָרשטעלן די אַרבעט טאָג פון אַ ווערקאַוט. עס איז אָפּרופיק מיט אַ כעדער בילד און אַ סעריע פון ​​קנעפּלעך וואָס ווייַזן עס אין אַ זייער קלאָר און ריין וועג אין די וויזשאַוואַל אַספּעקט.

צייט צייט בלויז אין CSS

CSS טיימליין

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

אָפּרופיק טיימליין V3

אָפּרופיק טיימליין V3

דער ערשטער פון די האָריזאָנטאַל טיימליינז אין HTML, CSS און JavaScript. וויזשוואַלי שטייט אויס פֿאַר די נוצן פון שוואַרץ און גרוי פארבן צו שטעלן אַ האָריזאָנטאַל שורה מיט אַ סעריע פון ​​פונקטן. יעדער מעהאַלעך איז כיילייטיד מיט גרעסערע וואָג אין דער מקור און אין די טעקסט אינהאַלט.

טיימליין נעסטלעד אין קאָלירן

נעסטעד

איינער פון די האָריזאָנטאַל טיימליינז העכסטן וויזשאַוואַל קוואַליטעט אויף דער רשימה. א ינטעראַקטיוו טיימליין געזונט מיט זייער סאַטאַל און געזונט דערלאנגט אַנאַמיישאַנז צו פאָרשלאָגן אַ גרויס באַניצער דערפאַרונג יעדער מאָל ווען איינער פון די צייט ינטערוואַלז זענען געדריקט. עס איז געמאכט מיט HTML קסס / סאַס און דזשאַוואַסקריפּט / טיפּעסקריפּט (jquery.js).

אָפּרופיק צייט צייט

אָפּרופיק דערציילונג

א גאנץ טיימליין פֿאַר ווייַזן די פאַרשידענע געשעענישן אין בילדער פון אַ צייט שפּעלטל אין געשיכטע. עס איז האָריזאָנטאַל און אָפּרופיק צו זיין דעוועלאָפּעד אין HTML, CSS און דזשאַוואַסקריפּט.

גרופּע טיימליין

צייטלינע גרופּע

דער טיימליין שטייט אויס פֿאַר אַ גוט יבערגאַנג דורכגעקאָכט מיט אַ האָריזאָנטאַל אַנאַמיישאַן. מיט ויסגעצייכנט קאָליר און ויסגעצייכנט פּלאַן צו ווייַזן יעדער פון די צייט ינטערוואַלז. עס איז אין HTML, CSS און JavaScript צו פאָרשטעלן אַ סעריע פון ​​קאַרדס אָוווערלייד אויף אַ רעפּריזענאַטיוו הינטערגרונט בילד.

האָריזאָנטאַל CSS און HTML טיימליין

האָריזאָנטאַל ענוואַטאָ

געמאכט דורך אים באַוווסט Envato Tuts +מיר פאָרשלאָגן אַ האָריזאָנטאַל טיימליין מיט אַ סעריע פון ​​ריין און יקערדיק קאַרדס אין פּלאַן. פלאַך פארבן און אַ האָריזאָנטאַל שורה מיט אַ סעריע פון ​​רויט דאַץ וואָס שליסן יעדער מעהאַלעך.

טיימליין CSS, HTML און slick.js 

פּאַסטעל טיימליין

פּאַסטעל טאָנעס אין די פּלאַן פֿאַר אַ טיימליין אַז שטייט אויס פֿאַר די פּרעזענטירונג פון יעדער פון די בילדער ווייַזונג יעדער מאָל מעהאַלעך. דאָס איז די יבערגאַנג צווישן יעדער פון די בילדער און ינטערוואַלז וואָס מאַכן דעם טיימליין זיך.

טיימליין סיקוואַנס V1

טיימליין סיקוואַנס

אַ טיימליין וואָס שטייט פֿאַר קנעפּלעך אויף יעדער ווערטיקאַל שורה פֿון יעדער מעהאַלעך צו פאַרבינדן אַ פול פאַרשטעלן הינטערגרונט בילד יעדער מאָל ווען מיר דריקן אויף איין.

האָריזאָנטאַל טיימליין HTML CSS

טיימליין הר

איר וועט נישט קענען צו גיט ערגעץ אויף דעם טיימליין וואָס איז כיילייטיד דורך אַ מעהודערדיק פּלאַן דורך די קלוג ברירה פון קאָליר פּאַליטרע און אַ סעריע פון ​​סאַנדוויטשיז פֿאַר יעדער פון די טיימליינז. עס זענען קיין אַנאַמיישאַנז, אָבער וויזשוואַלי עס איז זייער אָנגענעם צו די אויג.

טיימליין קאָדיהאָוסע

טיימליין קאָדיהאָוסע

דעם טיימליין דערלאנגט דורך Codyhouse איז איין קאָליר אין פּלאַן און איז דעוועלאָפּעד אין HTML, CSS און דזשאַוואַסקריפּט. עס אָפפערס אַ מינימאַליסט שורה מיט אַ סעריע פון ​​פונקטן ווי קלאָוזינג ינטערוואַלז און גרונט די האָריזאָנטאַל אַנאַמיישאַן פון ווייניקער ווי העלפט אַ רגע. פּשוט, אָבער שטאַרק.

האָריזאָנטאַל טיימליין

האָריזאָנטאַל טיימליין

אן אנדער טיימליין געמאכט אין HTML, CSS און JavaScript. קעראַקטערייזד דורך די איין קאָליר, עס כּולל אַן עלעגאַנט פּלאַן מיט אַ גרין קאָליר צו שטעלן די שנירל אויף יעדער פון די פונקטן וואָס פאָרשטעלן די צייט ינטערוואַלז. יעדער מאָל מיר דריקן איין, אַ זייער גלאַט זייַט אַנאַמיישאַן סטאַרץ.

אָן נאָמען טיימליין

אָן נאָמען טיימליין

די בלויז שוואַרץ טיימליין פון די דנאָ רשימה. דערנאָך ער ניצט פאַרשידענע פארבן צו דיפערענטשיייט יעדער יאָר און די טעקסט אין דער זעלביקער צייַט ווי די לימאַץ. עס איז אַ ויסגעצייכנט אַנאַמיישאַן צווישן יעדער פון די טעקסטן.

טיימליין

טיימליין

דעם טיימליין שטעלט דער אַקצענט אויף די קאָליר גרין צו זיין טאָוטאַלי סטאַטיק.

אן אנדער האָריזאָנטאַל טיימליין

אן אנדער טיימליין

איר קענען שטעלן אַ בילד לעבן פול פאַרשטעלן פֿאַר אַ טיימליין וואָס שטייט אויס פֿאַר די נוצן פון בלוי און גרוי, פּלוס אַ סעריע פון ​​קרייזן וואָס פאָרשטעלן יעדער יאָר.

דו זאלסט נישט פאַרפירן אן אנדער סעריע פון ​​מעניוז אין CSS און HTML.


דער אינהאַלט פון דעם אַרטיקל אַדכיר צו אונדזער פּרינציפּן פון לייט עטיקס. צו מעלדונג אַ טעות גיט דאָ.

זייט דער ערשטער צו באַמערקן

לאָזן דיין באַמערקונג

אייער בליצפּאָסט אַדרעס וועט נישט זייַן ארויס. Required fields זענען אנגעצייכנט מיט *

*

*

  1. פאַראַנטוואָרטלעך פֿאַר די דאַטן: Miguel Ángel Gatón
  2. ציל פון די דאַטן: קאָנטראָל ספּאַם, קאָמענטאַר פאַרוואַלטונג.
  3. לעגיטימאַטיאָן: דיין צושטימען
  4. קאָמוניקאַציע פון ​​די דאַטן: די דאַטן וועט נישט זיין קאַמיונאַקייטיד צו דריט פּאַרטיעס אַחוץ דורך לעגאַל פליכט.
  5. דאַטן סטאָרידזש: דאַטאַבייס כאָוסטיד דורך Occentus Networks (EU)
  6. רעכט: צו קיין צייט איר קענט באַגרענעצן, צוריקקריגן און ויסמעקן דיין אינפֿאָרמאַציע.