ステッパーナビ
デザインは、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) " ";
}
//数字の前に0をつける
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;