Full-Height Scroll Prompt Hero Template

Guide your visitors to the content below with this engaging, full-screen hero and scroll prompt.

This design is perfect for landing pages, long-form storytelling, or any site where you want to create an immersive first impression and clearly indicate that more content awaits "below the fold".

A full-height hero section with a downward-pointing arrow to prompt scrolling.

Get Source Code Preview

About the Full-Height Scroll Prompt Hero

A full-screen hero section makes a bold statement. However, it can sometimes hide the fact that there's more content on the page. This template solves that problem by adding an explicit call to scroll. A gently animated arrow draws the user's eye downward, providing a clear visual cue for the next action. The entire effect is achieved with CSS, ensuring it's lightweight and reliable.

Features

Full Viewport Height: The hero fills the screen, creating an immersive experience.
Clear Scroll Prompt: An animated arrow and text explicitly tell the user to scroll.
Pure CSS Animation: The arrow's subtle bounce animation is lightweight and dependency-free.
Accessible Link: The scroll prompt is a functional anchor link, making it accessible for all users.

Code Breakdown

This component is split into CSS for your site's head and HTML for the body. The HTML includes a demo section below the hero to ensure scrolling is possible.

The full-height effect is created by setting min-height: 100vh on the .full-height-hero section. This makes the section at least as tall as the browser's viewport. The section is also set to position: relative to serve as a container for the absolutely positioned scroll prompt.

The scroll prompt link (a) is positioned at the bottom of the hero using position: absolute and bottom: 2rem. A CSS animation defined with @keyframes manipulates the transform: translateY() property of the arrow svg to create the gentle "bounce" effect.

Code

<style>
    :root {
        --fhh-padding: 3rem 1.5rem;
        --fhh-bg-color: #0f172a; /* Dark Slate */
        --fhh-text-color: #e2e8f0;
        --fhh-headline-color: #ffffff;
        --fhh-prompt-color: #94a3b8;
        --fhh-max-width: 900px;
    }
    .full-height-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--fhh-bg-color);
        min-height: 100vh; /* This makes the hero full height */
        padding: var(--fhh-padding);
        width: 100%;
        position: relative; /* Needed for absolute positioning of the prompt */

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .full-height-hero * {
         box-sizing: border-box;
    }
    .fhh-content {
        max-width: var(--fhh-max-width);
        color: var(--fhh-text-color);
    }
    .fhh-content .title {
        color: var(--fhh-headline-color);
        margin: 0 0 1rem 0;
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 800;
        line-height: 1.1;
    }
    .fhh-content .subtitle {
        font-size: 1.25rem;
        line-height: 1.6;
    }
    .scroll-prompt {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        color: var(--fhh-prompt-color);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        transition: color 0.3s ease;
    }
    .scroll-prompt:hover {
        color: #fff;
    }
    .scroll-prompt .prompt-text {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    .scroll-prompt .prompt-arrow {
        width: 1.5rem;
        height: 1.5rem;
        animation: bounce 2s infinite;
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-10px);
        }
        60% {
            transform: translateY(-5px);
        }
    }
    
    /* Extra content section for demonstrating the scroll effect */
    .scroll-demo-content-fhh {
        padding: 4rem 1.5rem;
        background-color: #fff;
        color: #111827;
    }
    .scroll-demo-content-fhh p {
        max-width: 700px;
        margin: 0 auto 1rem;
        line-height: 1.6;
    }
</style>

<section class="full-height-hero">
    <div class="fhh-content">
        <h1 class="title">The Story Begins Here</h1>
        <p class="subtitle">A new chapter in digital innovation is about to unfold.</p>
    </div>
    <a href="#next-section" class="scroll-prompt">
        <span class="prompt-text">Scroll Down</span>
        <svg class="prompt-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 5V19M12 19L19 12M12 19L5 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </a>
</section>

<section id="next-section" class="scroll-demo-content-fhh">
    <p>This is the next section of the page. The scroll prompt in the hero section provides a clear visual and functional link to bring the user here.</p>
</section>

View Output