/* reveal = スクロールで画面に入ってきたときに出す仕掛け(トップページ専用) に reveal の印が付いているときだけ効く。付けるのは index.html の 。 / または /# → 印を付ける /#about など → 付けない(見たい場所が隠れていては困るため) 視差効果を減らす設定 → 付けない ★:where() は「中に何を書いても強さを0として数える」書き方。 隠す側に id が入っているので、これが無いと出す側(.is-visible)が負けて 要素が隠れたままになる。 */ html.reveal { --reveal-fade: 0.6s; --reveal-move: 0.5s; --reveal-shift-y: 20px; --reveal-shift-x: 30px; /* 年表の縦線を、項目1つぶん引くのにかける時間。 */ --line-duration: 0.7s; --reveal-lead: 0.3s; } /* ---------- 1. 出る前の状態 ---------- ★ここに並べたものが対象。セクションを増やすときは、この一覧と下の「向き」に足す。 ★ヘッダー・フッター・#welcome・#about の写真は入れないこと(最初から出す約束)。 */ html.reveal :where( #about h2, #about .about-text, #skills h2, #skills .skill-card, #skills .skills-more, #products h2, #products .product-card, #products .products-more, #experience h2, #experience .timeline-year, #experience .timeline-body > *, #contact h2, #contact .contact-form ) { opacity: 0; transform: translate(var(--reveal-x, 0px), var(--reveal-y, 0px)); transition: opacity var(--reveal-fade) ease var(--reveal-delay, 0s), transform var(--reveal-move) ease var(--reveal-delay, 0s); } /* ---------- 2. どの向きから、いつ出すか ---------- */ /* 見出しは左から右へ。セクションの1つ目なので --reveal-lead だけ待つ。 */ html.reveal :where(#about, #skills, #products, #experience, #contact) h2 { --reveal-x: calc(var(--reveal-shift-x) * -1); --reveal-delay: var(--reveal-lead); } /* 年表だけは待たずに出す(線を引く動きがあるぶん、間が空いて見えるため)。 */ html.reveal #experience h2 { --reveal-delay: 0s; } /* 本文・カード類は下から上へ。#welcome の文字と同じ動き。 */ html.reveal :where( .about-text, .skill-card, .skills-more, .product-card, .products-more, .contact-form ) { --reveal-y: var(--reveal-shift-y); } /* 見出しの次に出るものは、その --reveal-lead 後。 */ html.reveal :where( .about-text, .contact-form ) { --reveal-delay: calc(var(--reveal-lead) * 2); } /* --reveal-step(何番目か)は reveal.js が入れる。 Read More はカードの続きとして出すので、同じ計算式を使う。 */ html.reveal :where(.skill-card, .product-card, .skills-more, .products-more) { --reveal-delay: calc(var(--reveal-lead) * 2 + var(--reveal-step, 0s)); } /* ---------- 3. 出たあとの状態 ---------- ★2行目 … is-visible が付くのは一覧や項目(
  • )のほうなので、中身も一緒に出す。 */ html.reveal .is-visible, html.reveal .is-visible :where( .skill-card, .product-card, .timeline-year, .timeline-body > * ) { opacity: 1; transform: none; } /* ---------- 4. 年表(#experience) ---------- 縦線が伸びる → 線がマークに届いたらマークが出る → 同時に文字が線から離れる向きへ。 ★--mark-progress は「項目の高さのうちマークが何割の位置か」。 項目ごとに高さが違うので reveal.js が実測して入れている。 */ html.reveal .timeline-item { --line-delay: 0s; --reveal-delay: calc( var(--line-delay) + var(--line-duration) * var(--mark-progress, 0.4) ); } /* 縦線。clip-path で見えている範囲を上から下へ広げる。 線そのものの指定(色・位置・グラデーション)は experience.css。 ★linear にすること。ease にすると引く速さが変わり、マークが出る時刻とずれる。 */ html.reveal .timeline-body::after { clip-path: inset(0 0 100% 0); transition: clip-path var(--line-duration) linear var(--line-delay); } html.reveal .timeline-item.is-visible .timeline-body::after { clip-path: inset(0 0 0 0); } /* 丸・破断マーク。線がそこまで来たら出す。 */ html.reveal .timeline-body::before { opacity: 0; transition: opacity 0.25s ease var(--reveal-delay, 0s); } html.reveal .timeline-item.is-visible .timeline-body::before { opacity: 1; } /* 年は線の右から左へ、内容は線の左から右へ。線を中心に左右へ広がって見える。 */ html.reveal .timeline-year { --reveal-x: var(--reveal-shift-x); } html.reveal .timeline-body > * { --reveal-x: calc(var(--reveal-shift-x) * -1); } /* 印が付いていないときは、#welcome の font-fade も止めて最初から出す。 ★:not() を3つ重ねているのは base.css より強さを上げるため。 */ html:not(.reveal):not(.wf-loading):not(.fade-hold) .font-fade { animation: none; opacity: 1; } /* ---------- スマホ用 ---------- ★★画面幅の調整もここに書く。reveal.css は head_extra から読み込まれるので mediaqueries.css より後になり、あちらに書いても打ち消される。 */ @media (max-width: 768px) { /* 年の列がスマホでは 3.2rem しかないので、30px だと線の上まで乗り出す。 */ html.reveal { --reveal-shift-x: 20px; } }