Ang mga timeline o timeline ay isa pa sa mga sobrang elemento na maaari naming isama sa isang website upang ipakita ang pag-unlad o ebolusyon sa mga taon ng isang kumpanya o kumpanya. Ang isang mahusay na visual na ekspresyon ng grapiko na, na alam kung paano ito elegante na isulat sa isang typeface at mga visual na elemento, maaaring ipakita ang mga hakbang na kinuha ng isang serbisyo o produkto sa paglipas ng panahon.
Ang 29 na mga timeline na mahahanap mo sa ibaba ay mula sa mga patayong timeline tulad ng magiging mga pahalang. Mahahanap mo ang pinakamahusay na nababagay sa iyong mga pangangailangan upang hanapin ito sa isang pahina ng website na iyong binubuo para sa isang kliyente o para sa iyong sarili. Pupunta kami sa isang koleksyon ng mga napaka-kagiliw-giliw na mga timeline na napaka-kaaya-aya sa paningin.
Timeline sa pamamagitan ng pag-scroll
Isang timeline na nasa HTML, CSS, at JavaScript code upang maganda ang posisyon ng sarili bilang isang magandang minimalist na naglalagay ng tuldik sa pula para sa listahan ng mga taon sa kaliwang bahagi, at sa itim para sa font at mga H2. Ang pinakamagandang bagay tungkol sa timeline na ito ay habang nag-scroll ka sa pahina, ang pagbabago ng taon ay awtomatikong gagawin. Mahusay na tapusin, disenyo at resulta.
Timeline sa CSS
Gumagamit ang timeline na ito ng CSS code upang ma-configure nang maayos sa ilan sa mga pag-aari nito. Wala itong pag-scroll tulad ng nakaraang isa, ngunit ito ay nailalarawan sa pamamagitan ng isang serye ng mga kahon at isang asul na kulay upang bigyan ito ng isa pang napaka-matikas na ugnay at sumali sa listahan ng mga timeline sa publication na ito.
Tumutugon sa slider ng timeline
Ang timeline na ito ay ginawa sa Swiper JS library upang isama ang HTML, CSS at JavaScript code. Wala itong pag-scroll habang sumusulong kami sa web page, ngunit mayroon ito inilalagay ang mga taon sa kanang bahagi at isang pindutan kung saan maaari kaming pumunta sa susunod, bukod sa magagawang gamitin ang mouse pointer upang pumunta sa isang tukoy na taon. Mahusay na animasyon sa bawat isa sa mga paglipat.
Masusing timeline
Ang timeline na ito ay nakatayo para sa paggamit ng HTML, CSS at JavaScript, bukod sa pumunta sa monocolor, tiyak sa mga pulang tono. Nailalarawan din ito sa pamamagitan ng paggamit ng isang pindutan na nagbibigay-daan sa iyo upang sumulong o paatras sa timeline na minarkahan ng mahusay na code ng resulta na ito ay medyo minimalist.
Timeline na may nakapirming header at Flexbox
HTML at CSS code para sa isang nakapirming header na mananatili itong maayos sa sandaling mag-scroll kami sa pahina. Ng mahusay na subtlety upang maging isang timeline ng mahusay na interes para sa anumang kasalukuyang developer na nais na ma-highlight ng kasalukuyang mga pamantayan sa disenyo ng web.
Timeline ng proyekto
Gumagamit ang timeline na ito ng CSS at HTML upang ipakita ang isang mahalagang timeline na gagamitin tiyak na tagal ng oras para sa isang proyekto. Sa pag-scroll namin dumadaan ito sa mga araw ng linggo, kaya perpekto ito upang ipatupad ito para sa mga tool na nagtutulungan na ginawa ng kumpanya mismo.
timeline
Isang timeline sa HTML, CSS at JavaScript na nakatayo mula sa iba pa para sa visual na tema. At ito ay sa pag-scroll namin sa pamamagitan ng patayong timeline, sa tuwing makakakita kami ng isang bagong larawan sa timeline, ito ay magiging background image ng web page kung saan inilagay namin ang code na ito.
Hyperloop
Ang Hyperloopu ay isang timeline na sa halip nakatayo para sa ginamit na disenyo at para sa pagiging program ng walang higit sa HTML at CSS. Ito ay nailalarawan sa pamamagitan ng paggamit ng iba't ibang laki sa font ng teksto na may isang patayong linya at isang serye ng mga kahon na minarkahan ang bawat mahalagang sandali ng timeline.
Vertical timeline
Isang timeline ng agwat na distansya ang kanyang sarili mula sa natitirang pamamagitan ng kanyang visual touch. Mayroon itong napaka-kasalukuyang gradient na background sa disenyo at isang serye ng mga kahon na minarkahan ang bawat isa sa mga agwat na ito. Na-program sa CSS at HTML.
Timeline sa Flexbox
Isa sa pinakamagaling na natapos na mga timeline at iyon ay batay sa cards upang maisama ang lahat ng impormasyong kailangan namin para sa agwat ng oras na iyon. Binuo din sa HTML at CSS, dapat isaalang-alang na ang lahat ng mga kard ay dapat magkaroon ng parehong taas at lapad upang makalkula ang puwang para sa mas malaking mga screen.
Timeline sa DIV
Isang minimalist na timeline sa disenyo at iyon ay binuo lamang sa HTML at CSS, kaya't ang pagpapatupad nito ay maaaring maging napakabilis. Ito ay perpektong akma upang ipahayag ang isang timeline sa isang daluyan ng impormasyon dahil sa monochrome finish nito.
Timeline sa CSS at HTML
Maaari kang maglagay 400 × 300 na mga imahe ng laki sa timeline na ito na nakikilala sa pamamagitan ng berdeng kulay ng mga linya at ang teksto ng mga petsa at araw. Wala itong mga animasyon at sa halip ay nailalarawan sa pamamagitan ng simpleng disenyo nito sa lahat ng mga antas.
Timeline ng mga komento at feedback
Isang timeline na ibang-iba sa iba para sa pinapayagan maglagay ng mga kard na may mga larawan ng mga gumagamit, o kahit papaano iyon ang intensyon sa una. Gamit ang mahusay na istilo ng visual, ang mga card ay gumagamit ng pagtatabing para sa isang patag na timeline nang walang mga animasyon.
Timeline ng umaga sa HTML at CSS
Isang perpektong timeline para sa tumutugon na ito ay nailalarawan sa pamamagitan ng pagiging HTML, CSS at nag-aalok ng isang medyo simple ngunit napaka-mobile timeline.
Timeline UI
Ang code na ito sa HTML at CSS ay gumagana nang perpekto para sa ipakita ang araw ng pagtatrabaho ng isang pag-eehersisyo. Ito ay tumutugon sa isang imahe ng header at isang serye ng mga pindutan na ipinapakita ito sa isang napakalinaw at malinis na paraan sa visual na aspeto.
Timeline sa CSS lamang
Ang timeline na ito ay nailalarawan sa pamamagitan ng pagiging sa CSS at ng a napiling mahusay na serye ng kulay: pula at berde. Green upang ganap na masakop ang buong pahina, puti para sa teksto at mga linya ng paghahati, at pula upang makilala ang agwat ng oras kung nasaan tayo. Maaari kaming mag-click sa bawat agwat upang ilagay ito sa isang kahon na pumapaligid dito at i-highlight ito.
Tumutugon sa timeline V3
Ang una sa mga pahalang na timeline sa listahan sa HTML, CSS at JavaScript. Biswal na namumukod sa paggamit ng mga kulay itim at kulay-abo upang ilagay ang isang pahalang na linya na may isang serye ng mga puntos. Ang bawat agwat ay naka-highlight na may higit na timbang sa mapagkukunan at sa nilalaman ng teksto.
Ang timeline ay matatagpuan sa kulay
Isa sa mga pahalang na timeline pinakamataas na kalidad ng visual sa listahan. Ang isang napaka-interactive na timeline na may napaka banayad at mahusay na ipinakita na mga animation upang mag-alok ng isang mahusay na karanasan ng gumagamit sa bawat oras na ang isa sa mga agwat ng oras ay pinindot. Ito ay gawa sa HTML CSS / Sass at JavaScript / TypeScript (jquery.js).
Tumutugon sa timeline ng kasaysayan
Isang perpektong timeline para sa ipakita ang iba't ibang mga kaganapan sa mga imahe ng isang puwang ng oras sa kasaysayan. Ito ay pahalang at tumutugon na binuo sa HTML, CSS at JavaScript.
Timeline ng pangkat
Ang timeline na ito ay nakatayo para sa isang mahusay na paglipat natupad sa isang pahalang na animasyon. Ng mahusay na kulay at isang magandang-maganda na disenyo upang i-highlight ang bawat isa sa mga agwat ng oras. Nasa HTML, CSS, at JavaScript ito upang ipakita ang isang serye ng mga kard na naka-overlay sa isang kinatawan ng imahe sa background.
Pahalang na timeline ng CSS at HTML
Gawa niya kilalang Envato Tuts +, ipinakita sa amin ang isang pahalang na timeline na may isang serye ng malinis at pangunahing mga kard sa disenyo. Mga patag na kulay at isang pahalang na linya na may isang serye ng mga pulang tuldok na magkakaugnay sa bawat agwat.
Timeline CSS, HTML at slick.js
Ang mga tono ng pastel sa disenyo para sa isang timeline na nakatayo para sa pagtatanghal ng bawat isa sa mga imahe ipinapakita ang bawat agwat ng oras. Ito ay ang paglipat sa pagitan ng bawat isa sa mga imahe at agwat na nagpapasikat sa timeline na ito.
Pagsunud-sunod ng timeline V1
Isang timeline na pinanindigan mga pindutan sa bawat patayong linya ng bawat agwat upang mai-link ang isang imahe ng background sa buong screen sa bawat oras na pinindot namin ang isa.
Pahalang na timeline HTML CSS
Hindi ka makakapag-click kahit saan sa timeline na ito na na-highlight ng a magandang-maganda na disenyo ng matalinong pagpili ng color palette at isang serye ng mga sandwich para sa bawat timeline. Walang mga animasyon, ngunit biswal na nakalulugod ito sa mata.
Timeline Codyhouse
Ang timeline na ito ipinakita ni Codyhouse ay nag-iisang kulay sa disenyo at binuo sa HTML, CSS at JavaScript. Nagpapakita ito ng isang minimalist na linya na may isang serye ng mga puntos bilang mga agwat upang mai-click at maging sanhi ng pahalang na animasyon na mas mababa sa kalahating segundo. Simple, ngunit mahusay na epekto.
Pahalang na timeline
Ang isa pang timeline na ginawa sa HTML, CSS, at JavaScript. Nailalarawan ng solong kulay, naglalaman ito ng isang matikas na disenyo na may berdeng kulay upang ilagay ang puntas sa bawat isa sa mga puntos na kumakatawan sa mga agwat ng oras. Sa tuwing pipindutin namin ang isa, magsisimula ang isang napaka-makinis na animasyon sa gilid.
Hindi pinangalanan na timeline
Ang tanging itim na timeline mula sa ilalim na listahan. Tapos gumagamit siya iba't ibang mga kulay upang maiiba ang bawat taon at ang teksto kasabay ng mga hangganan nito. Ito ay may isang kilalang animasyon upang pumasa sa pagitan ng bawat isa sa mga teksto.
Timeline
Inilalagay ang timeline na ito ang tuldik sa kulay berde upang maging ganap na static.
Isa pang pahalang na timeline
Kaya nito maglagay ng imahe malapit sa full screen para sa isang timeline na tumatayo para sa paggamit ng asul at kulay-abo, kasama ang isang serye ng mga bilog na kumakatawan sa bawat taon.
Huwag palalampasin isa pang serye ng mga menu sa CSS at HTML.