タイムラインまたはタイムラインは、私たちができるもうXNUMXつの追加要素です。 進捗状況や進化を示すためにウェブサイトに統合する 会社または会社の年で。 書体と視覚的要素を使用してエレガントに構成する方法を知っている、サービスまたは製品が時間の経過とともに取ったステップを示すことができる、よく視覚的なグラフィック表現。
以下にある29のタイムラインは次のとおりです。 垂直タイムラインから 水平線もそうです。 あなたはあなたがクライアントのためにまたはあなた自身のために開発しているウェブサイトのページでそれを見つけるためにあなたのニーズに合った最高のものを見つけるでしょう。 視覚的に非常に魅力的な非常に興味深いタイムラインのコレクションを使用します。
スクロールによるタイムライン
HTML、CSS、およびJavaScriptコードで記述されたタイムラインで、自分自身を 良いミニマリスト これは、左側の年のリストでは赤に、フォントとH2では黒にアクセントを付けます。 このタイムラインの最も良い点は、ページをスクロールすると、年の変更が自動的に行われることです。 素晴らしい仕上がり、デザイン、そして結果。
CSSのタイムライン
このタイムラインはCSSコードを使用して、一部のプロパティで適切に構成することもできます。 スクロールはありません 前のものと同じですが、一連のボックスと青い色が特徴で、非常にエレガントなタッチを加えて、この出版物のタイムラインのリストに追加します。
レスポンシブタイムラインスライダー
このタイムラインは、HTML、CSS、およびJavaScriptコードを含むSwiperJSライブラリで作成されています。 Webページを進むにつれてスクロールはありませんが、スクロールはあります。 年を右側に配置します マウスポインタを使用して特定の年に移動できることとは別に、次の年に移動できるボタン。 それぞれのトランジションで素晴らしいアニメーション。
高度なタイムライン
このタイムラインは、HTML、CSS、JavaScriptを使用することで際立っています。 単色になります、正確には赤の色調です。 また、この優れた結果コードでマークされたタイムラインを非常にミニマリストに進めるまたは戻ることができるボタンを使用することも特徴です。
固定ヘッダーとFlexboxのタイムライン
固定ヘッダーのHTMLおよびCSSコード スクロールを行った時点では修正されたままになります ページ内。 現在のWebデザイン標準で強調したい現在の開発者にとって非常に興味深いタイムラインになることは非常に微妙です。
プロジェクトタイムライン
このタイムラインは、CSSとHTMLを使用して、使用する重要なタイムラインを示します。 その特定の期間 プロジェクトのために。 スクロールすると曜日が移動するので、会社自体が作成したコラボレーションツールに実装するのに最適です。
タイムライン
のタイムライン 他とは一線を画すHTML、CSS、JavaScript ビジュアルテーマ用。 また、垂直タイムラインをスクロールすると、タイムラインで新しい写真が見つかるたびに、このコードを配置したWebページの背景画像になります。
ハイパーループ
Hyperloopuはそのタイムラインです 使用したデザインでかなり目立ちます そして、HTMLとCSSだけでプログラムされているため。 これは、テキストのフォントにさまざまなサイズを使用し、縦線とタイムラインの各重要な瞬間をマークする一連のボックスを使用することを特徴としています。
垂直タイムライン
その間隔のタイムライン 彼の視覚的なタッチによって他の人から自分自身を遠ざける。 デザインには非常に最新のグラデーションの背景があり、これらの間隔のそれぞれをマークする一連のボックスがあります。 CSSとHTMLでプログラムされています。
Flexboxのタイムライン
最高の完成したタイムラインのXNUMXつとそれ カードに基づいています その時間間隔に必要なすべての情報を含めるため。 また、HTMLとCSSで開発されており、大画面のスペースを計算するには、すべてのカードの高さと幅が同じである必要があることを考慮に入れる必要があります。
DIVのタイムライン
デザインのミニマリストのタイムラインであり、 HTMLとCSSでのみ開発、そのため、その実装は非常に高速になります。 モノクローム仕上げのため、情報媒体でタイムラインを表現するのに最適です。
CSSとHTMLのタイムライン
あなたが置くことができます 400×300サイズの画像 このタイムラインでは、線の緑色と日付と曜日のテキストによって区別されます。 アニメーションはなく、すべてのレベルでシンプルなデザインが特徴です。
コメントとフィードバックのタイムライン
許可するための他のものとは非常に異なるタイムライン ユーザーの写真が入ったカードを置く、または少なくとも最初はそれが意図です。 優れた視覚スタイルを備えたカードは、アニメーションのないかなりフラットなタイムラインにシェーディングを使用します。
HTMLとCSSのタイムラインの朝
それに対応するための完璧なタイムライン HTML、CSSであることが特徴です かなりシンプルですが、非常にモバイルなタイムラインを提供します。
タイムラインUI
HTMLとCSSのこのコードは、 就業日を提示する トレーニングの。 ヘッダー画像と一連のボタンで応答し、視覚的に非常に明確でクリーンな方法で表示します。
CSSのみのタイムライン
このタイムラインは、CSSに含まれていることと 厳選されたカラーシリーズ：赤と緑。 緑はページ全体を完全にカバーし、白はテキストと分割線を表し、赤は私たちがいる時間間隔を区別します。 各間隔をクリックして、それを囲み、強調表示するボックスを配置できます。
レスポンシブタイムラインV3
HTML、CSS、JavaScriptのリストの最初の水平タイムライン。 視覚的に際立っている 黒とグレーの色の使用 一連の点で水平線を配置します。 各間隔は、ソースとテキストコンテンツでより大きな重みで強調表示されます。
カラーに囲まれたタイムライン
水平方向のタイムラインのXNUMXつ リストで最高の視覚品質。 時間間隔のXNUMXつが押されるたびに優れたユーザーエクスペリエンスを提供する、非常に微妙で適切に提示されたアニメーションを備えた非常にインタラクティブなタイムライン。 それはで作られています HTML CSS / SassおよびJavaScript / TypeScript（jquery.js）.
レスポンシブヒストリータイムライン
の完璧なタイムライン さまざまなイベントを画像で表示する 歴史の中でタイムスロットの。 HTML、CSS、JavaScriptで開発された水平で応答性があります。
グループのタイムライン
このタイムラインは、優れた移行を際立たせています 横長アニメーションで実施。 素晴らしい色と絶妙なデザインで、それぞれの時間間隔を強調しています。 代表的な背景画像に重ねられた一連のカードを表示するのは、HTML、CSS、およびJavaScriptです。
水平方向のCSSとHTMLのタイムライン
彼によって作られた 既知のEnvatoTuts +、デザインの一連のクリーンで基本的なカードを含む水平方向のタイムラインが表示されます。 平らな色と、各間隔を連動させる一連の赤い点のある水平線。
タイムラインCSS、HTML、slick.js
タイムラインのデザインのパステルトーン それぞれの画像のプレゼンテーションで際立っています 各時間間隔を示しています。 このタイムラインを際立たせるのは、各画像と間隔の間の遷移です。
タイムラインシーケンスV1
際立ったタイムライン 各縦線のボタン XNUMXつを押すたびに全画面の背景画像をリンクするための各間隔の。
水平タイムラインHTMLCSS
このタイムラインで強調表示されている場所をクリックすることはできません。 カラーパレットの賢明な選択による絶妙なデザイン タイムラインごとに一連のサンドイッチ。 アニメーションはありませんが、見た目はとても楽しいです。
タイムラインCodyhouse
このタイムライン コーディハウスが発表したのは単色です デザインで、HTML、CSS、JavaScriptで開発されています。 これは、クリックされる間隔として一連のポイントを持つ最小限の線を示し、XNUMX秒未満の水平アニメーションを引き起こします。 シンプルですが、強力です。
水平方向のタイムライン
HTML、CSS、およびJavaScriptで作成された別のタイムライン。 単色が特徴、時間間隔を表す各ポイントにレースを配置するための緑色のエレガントなデザインが含まれています。 XNUMXつを押すたびに、非常にスムーズなサイドアニメーションが始まります。
名前のないタイムライン
下のリストからの唯一の黒いタイムライン。 それから彼は使用します 毎年とテキストを区別するための異なる色 その限界と同時に。 各テキスト間を通過する際立ったアニメーションがあります。
タイムライン
このタイムラインは 緑のアクセント 完全に静的であること。
別の水平タイムライン
それができる フルスクリーンの近くに画像を配置する 青と灰色の使用で際立っているタイムラインに加えて、毎年を表す一連の円。
お見逃しなく CSSとHTMLの別の一連のメニュー.