29 nagyszerű ütemterv CSS-ben és egy kis Javascript-tel

Görgessen az idővonalon

Az idővonalak vagy az idővonalak a további extra elemek, amelyeket tehetünk integrálódjon egy weboldalba a fejlődés vagy az evolúció bemutatása érdekében egy vállalat vagy vállalat éveiben. Egy jól vizuális grafikai kifejezés, amely tudja, hogyan kell elegánsan összeállítani tipográfiával és vizuális elemekkel, megmutatja egy szolgáltatás vagy termék idővel megtett lépéseit.

Ez a 29 idővonal, amelyet alább talál függőleges idővonalakból mint a vízszintesek lennének. Megtalálja a legjobbat, amely megfelel az Ön igényeinek, és keresse meg a weboldal azon oldalán, amelyet Ön fejleszt az ügyfelek számára vagy saját maga számára. Nagyon érdekes ütemtervek gyűjteményével készülünk, amelyek vizuálisan nagyon kellemesek.

Az idővonal görgetéssel

Görgessen az idővonalon

Idővonal, amely HTML, CSS és JavaScript kódban van, hogy kecsesen elhelyezkedjen a jó minimalista amely az ékezetet pirosra teszi az évek listáján a bal oldalon, fekete pedig a betűtípust és a H2-ket. A legjobb dolog ebben az idővonalban az, hogy amint végiggörgeti az oldalt, az évváltás automatikusan megtörténik. Kiváló kivitel, tervezés és eredmény.

Idővonal a CSS-ben

CSS idővonal tulajdonságai

Ez az idővonal CSS-kódot használ arra, hogy egyes tulajdonságaiban még megfelelően konfigurálható legyen. Nincs görgetés mint az előző, de dobozsorozat és kék szín jellemzi, hogy még egy nagyon elegáns vonást kölcsönözzön neki, és kiegészüljön a kiadvány idővonalainak listájával.

Érzékeny idővonal csúszka

Érzékeny idővonal csúszka

Ez az idővonal a Swiper JS könyvtárral készült, HTML, CSS és JavaScript kódot tartalmazva. Nincs görgetés, ahogy haladunk a weboldalon, de igen az éveket a jobb oldalra helyezi és egy gomb, amellyel a következőre léphetünk, eltekintve attól, hogy az egérmutatót használhatjuk egy adott évre. Nagyszerű animáció az egyes átmeneteknél.

Haladó idővonal

Haladó idővonal

Ez az idővonal kiemelkedik a HTML, CSS és a JavaScript használatától menj be a monokolorba, pontosan a piros tónusokban. Jellemző továbbá egy gomb használata, amely lehetővé teszi, hogy előre lépjen vagy visszalépjen az idővonalon, amelyet ez a nagyszerű eredménykód jelöl, hogy meglehetősen minimalista legyen.

Idősor fix fejléccel és Flexbox-szal

Az idővonal rögzítve

HTML és CSS kód egy fix fejléchez rögzített marad abban a pillanatban, amikor görgetünk az oldalon. Nagyszerű finomság, hogy minden jelenlegi fejlesztő számára nagy érdeklődésű ütemterv legyen, aki ki akarja emelni a jelenlegi webdesign-előírásokkal.

Projekt ütemezése

Projekt ütemezése

Ez az idővonal CSS-t és HTML-t használ egy fontos idővonal bemutatásához az a bizonyos időtartam egy projektre. Ahogy görgetjük, a hét napjain megy keresztül, így tökéletesen alkalmazható a vállalat által készített együttműködési eszközökhöz.

Network TwentyOne Global

Network TwentyOne Global

Idővonal HTML, CSS és JavaScript, amely kiemelkedik a többi közül a vizuális témához. És az, hogy amint görgetünk a függőleges idővonalon, minden alkalommal, amikor új fényképet találunk az idővonalon, az annak a weboldalnak a háttérképévé válik, ahová ezt a kódot elhelyeztük.

hyperloop

hyperloop

A Hyperloopu egy idővonal, amely inkább az alkalmazott dizájnnal tűnik ki és amiért csak HTML-ben és CSS-ben van programozva. Jellemzője, hogy a szöveg betűtípusában különböző méreteket használnak függőleges vonallal és olyan dobozok sorozatával, amelyek az idővonal minden fontos pillanatát megjelölik.

Függőleges idővonal

Függőleges idővonal

Egy intervallum idővonal, amely vizuális érintésével elhatárolódik a többitől. A kialakítás nagyon aktuális színátmenetes háttérrel rendelkezik, és egy sor olyan doboz található, amelyek megjelölik ezeket az intervallumokat. CSS-ben és HTML-ben programozva.

Idősor a Flexboxban

Idősor flexbox

Az egyik legjobban befejezett idővonal és ez kártyákon alapul tartalmazzon minden információt, amelyre szükségünk van az adott időintervallumhoz. A HTML-ben és a CSS-ben is kifejlesztve figyelembe kell venni, hogy minden kártya azonos magasságú és szélességű legyen a nagyobb képernyők számára szükséges hely kiszámításához.

Idővonal a DIV-ben

Idővonal div

Minimalista idővonal a tervezésben, és ez volt csak HTML-ben és CSS-ben fejlesztették, így a megvalósítása nagyon gyors lehet. Monokróm felülete miatt tökéletesen alkalmas idővonal kifejezésére információs közegben.

Idővonal CSS-ben és HTML-ben

CSS idővonal

Elhelyezheti 400 × 300 méretű képek ezen az idővonalon a vonalak zöld színe, valamint a dátumok és napok szövege különbözteti meg. Nincs animációja, és inkább minden szinten egyszerű kialakítása jellemzi.

Megjegyzések és visszajelzések ütemezése

Idővonal megjegyzések

A megengedéshez nagyon más idővonal, mint a többi tegyen kártyákat a felhasználók fényképeivel, vagy legalábbis eleinte ez a szándék. Nagyszerű vizuális stílus mellett a kártyák árnyékolást használnak egy meglehetősen lapos idővonalhoz animációk nélkül.

Idősor reggel HTML-ben és CSS-ben

Reszponzív idővonal

Tökéletes idővonal erre reagálni jellemzi, hogy HTML, CSS és meglehetősen egyszerű, de nagyon mobil idővonalat kínál.

Idővonal felhasználói felület

Network TwentyOne Global

Ez a HTML és CSS kód tökéletesen működik mutassa be a munkanapot egy edzés. Fejlécképpel és gombsorozattal reagál, amelyek vizuális szempontból nagyon világos és tiszta módon mutatják.

Idővonal csak CSS-ben

CSS idővonal

Ezt az idővonalat a CSS-ben való tartózkodás és a jól megválasztott színsor: piros és zöld. Zöld az egész oldal teljes lefedéséhez, fehér a szöveghez és az elválasztó sorokhoz, a piros pedig az időintervallum megkülönböztetéséhez, amelyben vagyunk. Minden intervallumra kattintva elhelyezhetjük azt egy mezővel, amely körülveszi és kiemeli.

Reszponzív idővonal V3

Adaptív idővonal V3

Az első a vízszintes idővonalak közül a listában HTML, CSS és JavaScript formátumban. Vizuálisan kiemelkedik a fekete és szürke színek használata hogy vízszintes vonalat helyezzen el egy pontsorozattal. Mindegyik intervallum nagyobb súllyal van kiemelve a forrásban és a szöveges tartalomban.

Az idővonal színesen fészkelődött

Beágyazott

Az egyik vízszintes idővonal a legmagasabb vizuális minőség a listán. Jól interaktív ütemterv nagyon finom és jól bemutatott animációkkal, hogy minden egyes időintervallum megnyomásakor nagyszerű felhasználói élményt nyújtson. Azzal készül HTML CSS / Sass és JavaScript / TypeScript (jquery.js).

Adaptív előzmények ütemterve

Reszponzív történet

Tökéletes idővonal képeken mutatják be a különböző eseményeket egy időrés a történelemben. Vízszintes és érzékeny a HTML, CSS és JavaScript fejlesztésére.

Csoport idővonal

Idősor csoport

Ez az idővonal kiemelkedik a jó átmenetről vízszintes animációval hajtották végre. Kiváló színű és kiváló kialakítású, hogy kiemelje az egyes időintervallumokat. HTML-ben, CSS-ben és JavaScript-ben van egy reprezentatív háttérképre helyezett kártyasorozat.

Vízszintes CSS és HTML idővonal

Vízszintes envato

Ő készítette ismert Envato Tuts +, vízszintes idővonalat mutatunk be a tiszta és az alapkártyák sorozatával. Lapos színek és vízszintes vonal piros pontok sorával, amelyek összekapcsolják az egyes intervallumokat.

Idővonal CSS, HTML és slick.js 

Pasztell idővonal

Pasztell tónusok a tervezés egy idővonal, hogy kiemelkedik az egyes képek bemutatásával minden időintervallumot bemutatva. Ez az átmenet az egyes képek és intervallumok között emeli ki ezt az idővonalat.

V1 idővonal szekvencia

Idővonal sorrend

Egy idővonal, amelyről kiemelkedik gombok az egyes függőleges vonalakon az egyes intervallumokból egy teljes képernyős háttérkép összekapcsolásához minden egyes megnyomásakor.

Vízszintes idővonal HTML CSS

Idősor HR

Nem fog tudni kattintani ezen az idővonalon sehová, amelyet egy a jelöl ki kitűnő kialakítás a színpaletta bölcs megválasztásával és szendvicssorozatot az egyes idővonalakhoz. Nincsenek animációk, de vizuálisan nagyon kellemes a szemnek.

Codyhouse Timeline

Idősor CodyHouse

Ez az idővonal a Codyhouse által bemutatott egyszínű a tervezés során, HTML, CSS és JavaScript formában fejlesztették ki. Minimalista vonalat mutat, ahol pontsorozatot kell kattintani, és fél másodpercnél rövidebb vízszintes animációt okoz. Egyszerű, de nagyszerű hatás.

Vízszintes idővonal

Vízszintes idővonal

Egy másik idővonal HTML, CSS és JavaScript nyelven készült. Az egyetlen szín jellemzi, elegáns, zöld színű kivitelt tartalmaz, amely a csipkét az időintervallumokat ábrázoló pontokra helyezi. Minden alkalommal, amikor megnyomunk egyet, egy nagyon sima animáció indul.

Névtelen idővonal

Névtelen idővonal

Az egyetlen fekete idővonal az alsó listából. Aztán használja különböző színekkel megkülönböztetni az éveket és a szöveget korlátjaival egyidejűleg. Kiemelkedő animációval rendelkezik az egyes szövegek között.

Idővonal

Idővonal

Ez az idővonal tesz a zöld szín akcentusa hogy teljesen statikus legyen.

Egy másik vízszintes idővonal

Újabb idővonal

Ez lehet helyezzen képet teljes képernyõ közelében olyan idővonalra, amely a kék és a szürke, valamint az évente megjelenő körök sorozatával tűnik ki.

Ne hagyja ki újabb menüsorozat CSS-ben és HTML-ben.


A cikk tartalma betartja a szerkesztői etika. A hiba bejelentéséhez kattintson a gombra itt.

Legyen Ön az első hozzászóló

Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra.

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.