Bloggerデザイン : フルスクリーン・バーティカルスライダー

デザインのタイプ

【CSS3フルスクリーン・バーティカルスライダー】
ラジオボタンの切り替え（:checked）とCSS3の移動アニメーションを組み合わせた、ノーボタン・スクロール演出。ホームページのトップページや、ポートフォリオサイトのように画面を大きく使ったダイナミックなインターフェースを提供します。

Panel 1 Panel 2 Panel 3 Panel 4 Panel 5

Serendipity

思わぬものを偶然に見つける才能。

Happiness

デザインが変われば、執筆も楽しくなる。

Tranquillity

静寂の中に美しさを。

Positivity

前向きなコードを。エラーを恐れず挑戦。

Passion

カスタマイズへの情熱が、唯一無二を作る。

デザインの特徴

• JavaScript不要の制御
  ラジオボタンのチェック状態のみでパネルの移動を制御。軽量かつ堅牢な動作。
• 鉄壁のボトム固定構造
  Bloggerのテーマ干渉を考慮した独自トレイ設計により、ナビゲーションを常に底へ配置。
• スムーズなイージング
  cubic-bezierを用いたカスタムアニメーションにより、高級感のあるスライド挙動を実現。

3. 紹介コード

<div class='tpd-st-outer'>
  <div class='st-container'>
    
    <input checked='checked' id='st-control-1' name='radio-set' type='radio'/>
    <input id='st-control-2' name='radio-set' type='radio'/>
    <input id='st-control-3' name='radio-set' type='radio'/>
    <input id='st-control-4' name='radio-set' type='radio'/>
    <input id='st-control-5' name='radio-set' type='radio'/>

    <div class='st-nav-tray'>
      <label class='st-nav-label label-1' for='st-control-1'>Panel 1</label>
      <label class='st-nav-label label-2' for='st-control-2'>Panel 2</label>
      <label class='st-nav-label label-3' for='st-control-3'>Panel 3</label>
      <label class='st-nav-label label-4' for='st-control-4'>Panel 4</label>
      <label class='st-nav-label label-5' for='st-control-5'>Panel 5</label>
    </div>

    <div class='st-scroll'>
      <section class='st-panel' id='st-panel-1'>
        <div class='st-deco' data-icon='&#xf069;'></div>
        <h2>Serendipity</h2>
        <p>思わぬものを偶然に見つける才能。</p>
      </section>
      <section class='st-panel st-color' id='st-panel-2'>
        <div class='st-deco' data-icon='&#xf118;'></div>
        <h2>Happiness</h2>
        <p>デザインが変われば、執筆も楽しくなる。</p>
      </section>
      <section class='st-panel' id='st-panel-3'>
        <div class='st-deco' data-icon='&#xf0f4;'></div>
        <h2>Tranquillity</h2>
        <p>静寂の中に美しさを。</p>
      </section>
      <section class='st-panel st-color' id='st-panel-4'>
        <div class='st-deco' data-icon='&#xf06c;'></div>
        <h2>Positivity</h2>
        <p>前向きなコードを。エラーを恐れず挑戦。</p>
      </section>
      <section class='st-panel' id='st-panel-5'>
        <div class='st-deco' data-icon='&#xf004;'></div>
        <h2>Passion</h2>
        <p>カスタマイズへの情熱が、唯一無二を作る。</p>
      </section>
    </div>
    
  </div>
</div>

<style>
/* --- CSS Area --- */
.tpd-st-outer {
    position: relative !important;
    width: 100%;
    height: 500px; /* 全体の高さ */
    overflow: hidden;
    font-family: 'Josefin Slab', serif;
    background: #fff;
    border: 1px solid #eee;
    margin: 20px 0;
}

.st-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* スクロール本体 */
.st-scroll {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 1;
}

.st-panel {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
}

/* ★ナビゲーション専用トレイ（ここを底に固定） */
.st-nav-tray {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 45px;
    z-index: 100; /* コンテンツより上に表示 */
    display: block;
    background: #e23a6e; /* 土台の色 */
}

.st-nav-tray input,
.st-nav-tray .st-nav-label {
    position: absolute !important;
    top: 0 !important; /* トレイ内での上端 */
    width: 20%;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
}

.st-nav-tray input {
    opacity: 0;
    z-index: 110;
}

.st-nav-label {
    z-index: 105;
    font-weight: 700;
    background: #e23a6e;
    color: #fff;
    font-size: 14px;
    display: block;
}

/* 横並びの指定 */
.st-nav-tray input:nth-of-type(1), .label-1 { left: 0; }
.st-nav-tray input:nth-of-type(2), .label-2 { left: 20%; }
.st-nav-tray input:nth-of-type(3), .label-3 { left: 40%; }
.st-nav-tray input:nth-of-type(4), .label-4 { left: 60%; }
.st-nav-tray input:nth-of-type(5), .label-5 { left: 80%; }

/* アクティブ時 */
#st-control-1:checked ~ .st-nav-tray .label-1,
#st-control-2:checked ~ .st-nav-tray .label-2,
#st-control-3:checked ~ .st-nav-tray .label-3,
#st-control-4:checked ~ .st-nav-tray .label-4,
#st-control-5:checked ~ .st-nav-tray .label-5 {
    background: #821134;
}

/* 三角矢印 */
#st-control-1:checked ~ .st-nav-tray .label-1:after,
#st-control-2:checked ~ .st-nav-tray .label-2:after,
#st-control-3:checked ~ .st-nav-tray .label-3:after,
#st-control-4:checked ~ .st-nav-tray .label-4:after,
#st-control-5:checked ~ .st-nav-tray .label-5:after {
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0; width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #821134;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}

/* 切り替えロジック */
#st-control-1:checked ~ .st-scroll { transform: translateY(0); }
#st-control-2:checked ~ .st-scroll { transform: translateY(-100%); }
#st-control-3:checked ~ .st-scroll { transform: translateY(-200%); }
#st-control-4:checked ~ .st-scroll { transform: translateY(-300%); }
#st-control-5:checked ~ .st-scroll { transform: translateY(-400%); }

/* 装飾 */
.st-deco {
    width: 140px; height: 140px;
    position: absolute; top: 0px; left: 50%;
    margin-left: -70px;
    background: #fa96b5;
    transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    width: 140px; height: 140px;
    line-height: 140px;
    text-align: center;
    font-size: 50px;
    top: 50%; left: 50%;
    margin: -70px 0 0 -70px;
    transform: rotate(-45deg) translateY(25%);
}
.st-panel h2 { color: #e23a6e; position: absolute; font-size: 32px; width: 100%; text-align: center; top: 35%; margin: 0; }
.st-panel p { position: absolute; text-align: center; font-size: 15px; color: #666; width: 80%; left: 10%; top: 50%; }
.st-color, .st-color .st-deco { background: #fa96b5; }
.st-color .st-deco { background: #fff; }
.st-color [data-icon]:after { color: #fa96b5; }
.st-color h2, .st-color p { color: #fff; }
</style>