@charset "UTF-8"; /* ========================================================= effects.css ｜ 動的演出（共通） いどがやえがお歯科クリニック サンプルサイト ・スクロールフェードイン ・カードのホバー演出 ・ヒーロー / ページヘッダーの登場アニメ ・ヘッダーのスクロール演出 ・ヒーロー背景の軽いパララックス（PCのみ） ・診療内容ページの追従ナビ（現在地ハイライト） ◆ 仕組み に reveal-on クラスが付いている間だけ演出が有効です。 reveal-on は head 内のスクリプトが付与し、JS(effects.js)が 万一読み込めなかった場合は自動で外れて、内容が普通に表示されます。 ========================================================= */ /* --------------------------------------------------------- 1. 初期状態：演出対象を隠しておく（一瞬見えてしまう「チラ見え」防止） ※ このCSSは 内で読まれるため、描画前に適用されます --------------------------------------------------------- */ .reveal-on .sec-head, .reveal-on .treat-sec-head, .reveal-on .treat-lead, .reveal-on .feat-card, .reveal-on .treat-card, .reveal-on .philosophy-card, .reveal-on .staff-card, .reveal-on .item-card, .reveal-on .method-card, .reveal-on .equipment-item, .reveal-on .reason-item, .reveal-on .treat-menu-item, .reveal-on .treat-point, .reveal-on .news-item, .reveal-on .info-card, .reveal-on .team-msg-card, .reveal-on .step, .reveal-on .faq-item, .reveal-on .cta-btns, .reveal-on .map-wrap, .reveal-on .concept-grid > *, .reveal-on .greeting-grid > *, .reveal-on .director-grid > *, .reveal-on .clinic-grid > *, .reveal-on .access-grid > * { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } /* ヒーロー / ページヘッダーの中身も隠しておく */ .reveal-on .hero-content > *, .reveal-on .hero-hours-card, .reveal-on .page-hero > * { opacity: 0; transform: translateY(24px); transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } /* --------------------------------------------------------- 2. 表示状態：JSが is-visible を付けると、ふわっと出てくる --------------------------------------------------------- */ .reveal-on .is-visible { opacity: 1 !important; transform: none !important; } /* 並んだ要素を少しずつ遅らせて出す（スタッガー） */ .reveal-on .fx-d1 { transition-delay: 0.08s; } .reveal-on .fx-d2 { transition-delay: 0.16s; } .reveal-on .fx-d3 { transition-delay: 0.24s; } .reveal-on .fx-d4 { transition-delay: 0.32s; } .reveal-on .fx-d5 { transition-delay: 0.40s; } .reveal-on .fx-d6 { transition-delay: 0.48s; } /* --------------------------------------------------------- 3. ヒーロー背景の軽いパララックス（PC幅のみ） 背景画像を少し大きめにして、スクロールでゆっくり動かす --------------------------------------------------------- */ @media (min-width: 901px) { .reveal-on .hero-bg { height: 124%; will-change: transform; } } /* --------------------------------------------------------- 4. ヘッダーのスクロール演出（少し下げると、ふわっと影がつく） --------------------------------------------------------- */ header { transition: box-shadow 0.3s ease, background 0.3s ease; } header.fx-scrolled { box-shadow: 0 6px 22px rgba(87, 186, 231, 0.22); background: rgba(255, 255, 255, 0.99); } /* --------------------------------------------------------- 5. カード類のホバー演出（ふわっと浮き上がる） --------------------------------------------------------- */ .reveal-on .feat-card, .reveal-on .treat-card, .reveal-on .philosophy-card, .reveal-on .staff-card, .reveal-on .item-card, .reveal-on .method-card, .reveal-on .equipment-item, .reveal-on .reason-item, .reveal-on .treat-menu-item, .reveal-on .info-card, .reveal-on .team-msg-card { transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s ease, box-shadow 0.3s ease; } .reveal-on .feat-card.is-visible:hover, .reveal-on .treat-card.is-visible:hover, .reveal-on .philosophy-card.is-visible:hover, .reveal-on .staff-card.is-visible:hover, .reveal-on .item-card.is-visible:hover, .reveal-on .method-card.is-visible:hover, .reveal-on .equipment-item.is-visible:hover, .reveal-on .reason-item.is-visible:hover, .reveal-on .treat-menu-item.is-visible:hover, .reveal-on .info-card.is-visible:hover, .reveal-on .team-msg-card.is-visible:hover { transform: translateY(-6px) !important; box-shadow: 0 14px 32px rgba(87, 186, 231, 0.2); } /* 診療内容・選ばれる理由のアイコンが、ホバーでちょこっと動く */ .reveal-on .treat-card .treat-icon, .reveal-on .feat-card .feat-icon { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .reveal-on .treat-card:hover .treat-icon, .reveal-on .feat-card:hover .feat-icon { transform: scale(1.12) rotate(-5deg); } /* --------------------------------------------------------- 6. 診療内容ページ：追従ナビの現在地ハイライト --------------------------------------------------------- */ .reveal-on .treat-nav-item { transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .reveal-on .treat-nav-item.is-current { background: var(--primary, #57bae7); color: #ffffff; transform: translateY(-2px); } .reveal-on .treat-nav-item.is-current img { filter: brightness(0) invert(1); } /* --------------------------------------------------------- 7. 固定ヘッダー分のアンカー位置補正 ページ内リンクで飛んだ時、見出しがヘッダーに隠れないように --------------------------------------------------------- */ .reveal-on section[id], .reveal-on [id].treat-section { scroll-margin-top: 92px; } /* --------------------------------------------------------- 8. アクセシビリティ配慮 OS側で「視差効果を減らす」設定の方には演出を無効化 --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal-on .sec-head, .reveal-on .treat-sec-head, .reveal-on .treat-lead, .reveal-on .feat-card, .reveal-on .treat-card, .reveal-on .philosophy-card, .reveal-on .staff-card, .reveal-on .item-card, .reveal-on .method-card, .reveal-on .equipment-item, .reveal-on .reason-item, .reveal-on .treat-menu-item, .reveal-on .treat-point, .reveal-on .news-item, .reveal-on .info-card, .reveal-on .team-msg-card, .reveal-on .step, .reveal-on .faq-item, .reveal-on .cta-btns, .reveal-on .map-wrap, .reveal-on .concept-grid > *, .reveal-on .greeting-grid > *, .reveal-on .director-grid > *, .reveal-on .clinic-grid > *, .reveal-on .access-grid > *, .reveal-on .hero-content > *, .reveal-on .hero-hours-card, .reveal-on .page-hero > * { opacity: 1; transform: none; transition: none; } .reveal-on .hero-bg { height: 100%; transform: none !important; } }