Styledex
← Index

Full Page Scroll

全屏滚动布局

stylekitMITDashboard · dashboardExperimental · experimentalLight · lightMedium · mediumNeutral · neutralMuted · mutedSerif · serifGeneral · general

每一屏占满整个视口的沉浸式滚动体验，通过滚动切换完整场景，适合品牌故事、产品介绍、作品集展示。

NNorthwind
Product · Pricing
Specimen
Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128
Active
4.8
Score
12ms
Edge

Attribution

"Full Page Scroll" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/full-page-scroll @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/full-page-scroll · bfa7da909e86 · © AnxForever

Do

  • 每个 section 设置 min-h-screen 或 h-screen
  • 使用 scroll-snap 实现平滑吸附 scroll-snap-type: y mandatory
  • 每屏内容垂直水平居中 flex items-center justify-center
  • 添加滚动指示器和页面导航点
  • 使用 CSS scroll-behavior: smooth
  • 考虑添加进入/离开动画
  • 提供跳过或快速导航选项
  • section 使用 group 类，内容元素用 group-hover 实现视差效果

Don't

  • 禁止内容超出单屏视口（需要滚动才能看完）
  • 禁止没有滚动提示（用户可能不知道往下滚）
  • 禁止动画过于复杂导致性能问题
  • 禁止锁定滚动时间过长
  • 禁止忽略移动端体验
  • 禁止所有内容元素使用相同的 transition delay（必须错落才能产生景深感）

Prompt

Create a brand story page with full page scroll:
1. Container with scroll-snap-type: y mandatory
2. 5 sections, each min-h-screen with different gradient backgrounds
3. Section 1: Hero with brand name and tagline
4. Sections 2-4: Timeline moments with year, title, description
5. Section 5: CTA to explore more
6. Fixed navigation dots on right side
7. Scroll indicator on first section
Content centered, smooth transitions between sections

---
"Full Page Scroll" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/full-page-scroll @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Full Page Scroll. \"Full Page Scroll\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/full-page-scroll @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-full-page-scroll",
      "license": "MIT",
      "attribution": "\"Full Page Scroll\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/full-page-scroll @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#000000"
    },
    "foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card": {
      "$type": "color",
      "$value": "#000000"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#6366f1"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#0f0f0f"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a6a6a6"
    },
    "border": {
      "$type": "color",
      "$value": "#242424"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Full Page Scroll" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/full-page-scroll @ bfa7da909e86. */
:root {
  --background: #000000;
  --foreground: #ffffff;
  --card: #000000;
  --card-foreground: #ffffff;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #ffffff;
  --secondary-foreground: #ffffff;
  --accent: #6366f1;
  --accent-foreground: #fafaf9;
  --muted: #0f0f0f;
  --muted-foreground: #a6a6a6;
  --border: #242424;
  --destructive: #dc2626;
  --ring: #000000;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Full Page Scroll" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/full-page-scroll @ bfa7da909e86. */
/** Tailwind theme extend for Full Page Scroll (stylekit-full-page-scroll) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#000000",
        "foreground": "#ffffff",
        "card": "#000000",
        "primary": "#000000",
        "primary-foreground": "#fafaf9",
        "secondary": "#ffffff",
        "accent": "#6366f1",
        "muted": "#0f0f0f",
        "border": "#242424",
        "destructive": "#dc2626",
        "ring": "#000000"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Full Page Scroll" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/full-page-scroll @ bfa7da909e86. */
@layer base {
:root {
  --background: #000000;
  --foreground: #ffffff;
  --card: #000000;
  --card-foreground: #ffffff;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #ffffff;
  --secondary-foreground: #ffffff;
  --accent: #6366f1;
  --accent-foreground: #fafaf9;
  --muted: #0f0f0f;
  --muted-foreground: #a6a6a6;
  --border: #242424;
  --destructive: #dc2626;
  --ring: #000000;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}