29 fantastiche linee temporali di progettazione in CSS e con un po 'di Javascript

Scorri la cronologia

Le tempistiche o le tempistiche sono un altro degli elementi extra che possiamo integrare in un sito web per mostrare progressi o evoluzione negli anni di un'azienda o di un'azienda. Un'espressione grafica ben visiva che, sapendo comporla elegantemente con tipografia ed elementi visivi, può mostrare nel tempo i passi compiuti da un servizio o prodotto.

Queste 29 linee temporali che troverai di seguito sono da linee temporali verticali come sarebbero gli orizzontali. Troverai quello più adatto alle tue esigenze per individuarlo in una pagina del sito che stai sviluppando per un cliente o per te stesso. Stiamo andando con una raccolta di linee temporali molto interessanti che sono molto piacevoli visivamente.

Timeline scorrendo

Scorri la cronologia

Una sequenza temporale che si trova in codice HTML, CSS e JavaScript per posizionarsi con grazia come un file buon minimalista che enfatizza il rosso per l'elenco degli anni a sinistra e il nero per il carattere e gli H2. La cosa migliore di questa sequenza temporale è che mentre scorri la pagina, il cambio dell'anno verrà effettuato automaticamente. Ottima finitura, design e risultato.

Timeline in CSS

Proprietà della sequenza temporale CSS

Questa sequenza temporale utilizza il codice CSS per poter essere configurata correttamente anche in alcune delle sue proprietà. Non ha lo scorrimento come il precedente, ma è caratterizzato da una serie di riquadri e da un colore blu per dargli un ulteriore tocco di eleganza ed entrare a far parte dell'elenco delle timeline di questa pubblicazione.

Slider della timeline reattivo

Slider della timeline reattivo

Questa sequenza temporale è realizzata con la libreria Swiper JS per includere codice HTML, CSS e JavaScript. Non ha lo scorrimento mentre avanziamo nella pagina web, ma lo fa pone gli anni sul lato destro e un pulsante con il quale possiamo passare al successivo, oltre a poter usare il puntatore del mouse per andare a un anno specifico. Ottima animazione in ciascuna delle transizioni.

Timeline avanzata

Timeline avanzata

Questa sequenza temporale si distingue per l'utilizzo di HTML, CSS e JavaScript, oltre a vai nel monocolore, precisamente nei toni del rosso. Si caratterizza inoltre per l'utilizzo di un pulsante che permette di avanzare o tornare indietro nella timeline contrassegnata da questo ottimo risultato, codice abbastanza minimalista.

Timeline con intestazione fissa e Flexbox

Timeline fissa

Codice HTML e CSS per un'intestazione fissa che rimarrà fisso nel momento in cui effettueremo lo scrolling nella pagina. Di grande sottigliezza per essere una linea temporale di grande interesse per qualsiasi sviluppatore attuale che vuole distinguersi per gli attuali standard di web design.

Cronologia del progetto

Cronologia del progetto

Questa sequenza temporale utilizza CSS e HTML per presentare un'importante sequenza temporale da utilizzare quello specifico periodo di tempo per un progetto. Mentre lo scorriamo scorre attraverso i giorni della settimana, quindi è perfetto per implementarlo per strumenti di collaborazione realizzati dall'azienda stessa.

Sequenza temporale

Sequenza temporale

Una sequenza temporale in HTML, CSS e JavaScript che si distingue dal resto per il tema visivo. Ed è che mentre scorriamo la timeline verticale, ogni volta che troviamo una nuova fotografia nella timeline, diventerà l'immagine di sfondo della pagina web in cui abbiamo inserito questo codice.

Hyperloop

Hyperloop

Hyperloopu è una linea temporale che si distingue piuttosto per il design utilizzato e per essere programmato nient'altro che in HTML e CSS. Si caratterizza per l'utilizzo di diverse dimensioni nel font del testo con una linea verticale e una serie di caselle che segnano ogni momento importante della timeline.

Timeline verticale

Timeline verticale

Un intervallo temporale che prende le distanze dal resto con il suo tocco visivo. Ha uno sfondo sfumato molto attuale nel design e una serie di caselle che contrassegnano ciascuno di quegli intervalli. Programmato in CSS e HTML.

Timeline in Flexbox

Flexbox della timeline

Uno dei migliori tempi finiti e quello si basa sulle carte per includere tutte le informazioni di cui abbiamo bisogno per quell'intervallo di tempo. Sviluppato anche in HTML e CSS, si deve tenere conto che tutte le carte devono avere la stessa altezza e larghezza per calcolare lo spazio per schermi più grandi.

Timeline in DIV

Divisione cronologia

Una linea temporale minimalista nel design e questo è stato sviluppato solo in HTML e CSS, quindi la sua implementazione può essere molto veloce. È perfettamente adatto per esprimere una sequenza temporale in un mezzo di informazione grazie alla sua finitura monocromatica.

Timeline in CSS e HTML

Sequenza temporale CSS

Puoi posizionare Immagini in formato 400 × 300 in questa linea temporale contraddistinta dal colore verde delle linee e dal testo delle date e dei giorni. Non ha animazioni ed è piuttosto caratterizzato dal suo design semplice a tutti i livelli.

Commenti e cronologia dei feedback

Commenti sulla sequenza temporale

Una linea temporale molto diversa dalle altre per consentire mettere le carte con le foto degli utenti, o almeno questa è l'intenzione all'inizio. Con un ottimo stile visivo, le carte usano l'ombreggiatura per una linea temporale piuttosto piatta senza animazioni.

Timeline mattutina in HTML e CSS

Tempistica reattiva

Una sequenza temporale perfetta per una risposta reattiva si caratterizza per essere HTML, CSS e offrono una sequenza temporale abbastanza semplice ma molto mobile.

Interfaccia utente della sequenza temporale

Sequenza temporale

Questo codice in HTML e CSS funziona perfettamente per presentare la giornata lavorativa di un allenamento. È reattivo con un'immagine di intestazione e una serie di pulsanti che lo mostrano in modo molto chiaro e pulito nell'aspetto visivo.

Timeline solo in CSS

Sequenza temporale CSS

Questa sequenza temporale è caratterizzata dall'essere in CSS e da un file serie di colori ben scelti: rosso e verde. Verde per coprire completamente l'intera pagina, bianco per testo e linee di divisione e rosso per distinguere l'intervallo di tempo in cui ci troviamo. Possiamo fare clic su ogni intervallo per posizionarlo con un riquadro che lo circonda e lo evidenzia.

Timeline reattiva V3

Timeline reattiva V3

La prima delle linee temporali orizzontali nell'elenco in HTML, CSS e JavaScript. Si distingue visivamente per il uso dei colori nero e grigio per posizionare una linea orizzontale con una serie di punti. Ogni intervallo è evidenziato con maggior peso nella sorgente e nel contenuto del testo.

Timeline incastonata nel colore

Annidati

Una delle linee temporali orizzontali la più alta qualità visiva nell'elenco. Una linea temporale ben interattiva con animazioni molto sottili e ben presentate per offrire un'ottima esperienza utente ogni volta che viene premuto uno degli intervalli di tempo. È fatto con HTML CSS / Sass e JavaScript / TypeScript (jquery.js).

Cronologia reattiva della cronologia

Storia reattiva

Una sequenza temporale perfetta per mostra i diversi eventi in immagini di una fascia oraria nella storia. È orizzontale e reattivo per essere stato sviluppato in HTML, CSS e JavaScript.

Cronologia del gruppo

Gruppo sequenza temporale

Questa sequenza temporale si distingue per una buona transizione eseguito con un'animazione orizzontale. Di grande colore e un design raffinato per evidenziare ciascuno degli intervalli di tempo. È in HTML, CSS e JavaScript per presentare una serie di carte sovrapposte a un'immagine di sfondo rappresentativa.

Sequenza temporale orizzontale CSS e HTML

Envato orizzontale

Fatto da lui noto Envato Tuts +, ci viene presentata una linea temporale orizzontale con una serie di carte pulite e di base nel design. Colori piatti e una linea orizzontale con una serie di punti rossi che intrecciano ogni intervallo.

Sequenza temporale CSS, HTML e slick.js 

Timeline pastello

Toni pastello nel design per una timeline che si distingue per la presentazione di ciascuna delle immagini mostrando ogni intervallo di tempo. È la transizione tra ciascuna delle immagini e gli intervalli che fa risaltare questa sequenza temporale.

Sequenza temporale V1

Sequenza temporale

Una linea temporale che si distingue per pulsanti su ciascuna linea verticale di ogni intervallo per collegare un'immagine di sfondo a schermo intero ogni volta che ne premiamo uno.

Sequenza temporale orizzontale HTML CSS

Cronologia risorse umane

Non sarai in grado di fare clic in nessun punto di questa sequenza temporale evidenziata da un design raffinato dalla scelta saggia della tavolozza dei colori e una serie di panini per ciascuna delle sequenze temporali. Non ci sono animazioni, ma visivamente è molto piacevole alla vista.

Cronologia di Codyhouse

Timeline CodyHouse

Questa sequenza temporale presentato da Codyhouse è monocolore nel design ed è sviluppato in HTML, CSS e JavaScript. Presenta una linea minimalista con una serie di punti come intervalli su cui fare clic e provoca l'animazione orizzontale di meno di mezzo secondo. Semplice, ma potente.

Timeline orizzontale

Timeline orizzontale

Un'altra sequenza temporale realizzata in HTML, CSS e JavaScript. Caratterizzato dal colore unico, contiene un design elegante con un colore verde per mettere il pizzo su ciascuno dei punti che rappresentano gli intervalli di tempo. Ogni volta che ne premiamo uno, inizia un'animazione laterale molto fluida.

Timeline senza nome

Timeline senza nome

L'unica linea temporale nera dall'elenco in basso. Quindi usa colori diversi per differenziare ogni anno e il testo contemporaneamente ai suoi limiti. Ha un'animazione eccezionale da passare tra ciascuno dei testi.

Sequenza temporale

Sequenza temporale

Questa sequenza temporale mette l'accento sul colore verde essere totalmente statico.

Un'altra linea temporale orizzontale

Un'altra sequenza temporale

Si può posizionare un'immagine vicino allo schermo intero per una timeline che si distingue per l'uso del blu e del grigio, più una serie di cerchi che rappresentano ogni anno.

Da non perdere un'altra serie di menu in CSS e HTML.


Il contenuto dell'articolo aderisce ai nostri principi di etica editoriale. Per segnalare un errore fare clic su qui.

Puoi essere il primo a lasciare un commento

Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.