Bloggerデザイン : フェードインタイムライン

1. デザインのタイプ

【ネオン・ダーク・タイムライン】
漆黒の背景に映えるディープ・シアンのアクセント。中央の軸から左右へ交互に展開されるアニメーションが、情報の「流れ」をドラマチックに演出します。モダンな開発実績やステップ紹介に最適な、先進的デザインです。

東京パフォーマンスドール

1990年4月、原宿RUIDOを拠点に始動。ゴルバチョフのペレストロイカにちなみ、芸能界に革命を起こすべく名付けられた伝説的グループの系譜。

Perfume

広島で結成され、中田ヤスタカによるテクノポップなアイデンティティを確立。近未来的な演出とテクノロジーを融合させた独自のスタイル。

本田美奈子.

圧倒的な歌唱力を誇り、アイドル界随一の実力派として知られた彼女。華奢な体からは想像できないパワフルな表現力が魅力。

中森明菜

1980年代を席巻した記録的なセールス。アーティストトータルセールス1位を4回獲得するなど、時代の頂点に君臨した歌姫。

2. デザインの特徴

• ダイナミックなフェードイン
  ページ読み込み時に中央のラインが伸び、各カードが時間差で浮き上がるアニメーションを搭載。
• センター・アイコン・ナビゲーション
  タイムラインの接点にアイコンを配置。視覚的なマイルストーンとして機能します。
• スマート・レスポンシブ
  幅775px以下で左軸固定の1列レイアウトへ自動切替。モバイル環境でも高い可読性を維持します。

3. 紹介コード

<div class="blg-timeline-wrapper">
  <div class="blg-container">
    <div class="blg-vertical-line"></div>

    <div class="blg-box blg-box-left">
      <i class="fa-brands fa-html5"></i>
      <div class="blg-info">
        <h2>タイトル</h2>
        <p>本文</p>
      </div>
    </div>

    <div class="blg-box blg-box-right">
      <i class="fa-brands fa-css3"></i>
      <div class="blg-info">
        <h2>タイトル</h2>
        <p>本文</p>
      </div>
    </div>
  </div>
</div>

<style>
.blg-timeline-wrapper { background-color: #051719; padding: 40px 10px; overflow: hidden; }
.blg-container { position: relative; max-width: 1000px; margin: 40px auto; }
.blg-vertical-line { position: absolute; top: 0; left: 50%; width: 6px; height: 0; transform: translateX(-50%); background: linear-gradient(45deg, #051719, #003136 186%); animation: blg-animateLine 2s linear forwards; }
@keyframes blg-animateLine { 100% { height: 100%; } }
.blg-box { position: relative; width: 50%; padding: 1rem 3rem; opacity: 0; animation: blg-animateBox 0.5s linear forwards; }
@keyframes blg-animateBox { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
.blg-box i { position: absolute; top: 30px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 10; color: #00626c; border: 4px solid #00626c; background: #000; }
.blg-box-left i { right: -25px; }
.blg-box-right i { left: -25px; }
.blg-info { position: relative; padding: 1.5rem; border-radius: 10px; background: #002124; color: #fafafa; border-bottom: 2px solid #00626c; }
@media screen and (max-width: 775px) { .blg-vertical-line { left: 40px; } .blg-box { width: 100%; padding-left: 80px; } .blg-box-left, .blg-box-right { left: 0; } .blg-box i { left: 15px; } }
</style>