ステッパー

ステッパーナビ

デザインは、CSS、ステップアニメーションは、javascript

Start
First Step
Middle Stage
Finish

CSSナンバリングだけのシンプルステッパー

Start
First Step
Middle Stage
Finish

Start
First Step
Middle Stage
Finish

Start
First Step
Middle Stage
Finish

Start
First Step
Middle Stage
Finish

Start
First Step
Second Stage
THAAD Stage
4th Stage
Finish

  
    li:before {
      counter-increment: number 1;
      content: counter(number) " ";
    }
//数字の前に０をつける
    li:before {
      counter-increment: number;
      content: counter(number,decimal-leading-zero);
    }
//数字の前に接頭辞をつける
    li:before {
      counter-increment: number 1;
      content: "STEP."counter(number) " ";
    }
//漢数字
    li:before {
      counter-increment: number 1;
      content: counter(number,cjk-ideographic) " ";
    }
//ひらがな（あいうえお）
    li:before {
      counter-increment: number 1;
      content: counter(number,hiragana) " ";
    }

CSSナンバリング＋矢印付き

Step 1
Step 2
Step 3
Step 4

Step 1
Step 2
Step 3
Step 4

Step 1
Step 2
Step 3
Step 4
Step 5
Step 6

スクロールバー

スクロールバーデザインの参考


/* スワイプタブ切替 */
.custom-nav > .nav { flex-wrap: nowrap; }
.custom-nav { position:relative; overflow-x:scroll; overflow-y:hidden; }
.custom-nav > .nav > .nav-item { min-width:200px; }

/* perfect-scrollbar javascript */
var ps = new PerfectScrollbar('.custom-nav', {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20,
  maxScrollbarLength: 160
});

/* perfect-scrollbar デザイン */
.ps__thumb-y { background-color: #fd284c; }
.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { background-color: none; }

/* */
scroll-snap-align: start;
scroll-snap-type: y mandatory;