OsirionReveal

OsirionReveal wraps content and fades or slides it into view the first time it scrolls into the viewport. Use it for sections of a landing page, not for content a reader must see at once. The animation is an enhancement made by a small script that runs in the browser.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

<OsirionReveal>
    <p>This paragraph slides up and fades in when it scrolls into view.</p>
</OsirionReveal>

<OsirionReveal Animation="OsirionReveal.RevealAnimation.Fade">
    <p class="mb-0">This one only fades in.</p>
</OsirionReveal>

Usage

@using Osirion.Blazor.Components

<OsirionReveal>
    <section>
        <h2>Pricing</h2>
        <p>Content that slides up when it scrolls into view.</p>
    </section>
</OsirionReveal>

<OsirionReveal Animation="OsirionReveal.RevealAnimation.Fade">
    <p>Content that only fades in.</p>
</OsirionReveal>

The enum is nested in the component, so outside it you write OsirionReveal.RevealAnimation.Fade. The component loads its script through BlazorJSComponents, which AddOsirion registers; without AddOsirion, call builder.Services.AddJSComponents();.

Parameters

Unmatched attributes go on the root <div>. Class and Style are accepted but the component does not write them, so put your own classes on the content inside. Theme is written to the root element.

Behavior

• The root is <div class="osirion-reveal osirion-reveal-{animation}"> with data-osirion-reveal set to the Animate value. The component adds no ARIA roles.
• A script observes the root with an IntersectionObserver. When at least 12% of it is visible, the script adds the class osirion-reveal-visible and stops observing, so the reveal happens once.
• Before it starts observing, the script adds the class osirion-reveal-armed. Only then does the stylesheet start the element at opacity: 0, moved 1.25rem away in the direction of Animation (Fade has no movement), with a 0.55 second transition.
• Without the script (blocked, failing to load, or before it runs) the element is server-rendered visible and in place: nothing hides it until the script has armed it.
• With Animate="false" the script does nothing, so the content is visible and in place.
• Under prefers-reduced-motion: reduce the script does not arm or observe, so the content is visible and in place for every direction.

Styling

The component's rules are scoped to it, so to restyle the transition, target the content you place inside, or override with a selector that is more specific than a class plus the component's scope attribute.

Related

• Content components
• Metric card, which counts its figures up as it scrolls into view
• Reading progress