CP Registry

Scroll Narrative

Sticky-Scroll-Storytelling: Die Media-Spalte bleibt sichtbar während der Nutzer durch Text-Steps scrollt. Ideal für Prozesserklaerungen, Förderwege und Klimaschutz-Geschichten.

Dateien: components/ScrollNarrative/ScrollNarrative.astro + scroll-narrative.ts

Solar-Förderung — Schritt für Schritt

4 Steps mit wechselnden Visualisierungen. Media-Spalte links sticky.

Solar-Förderung erklären (media-left)

4 Steps, Visualisierung wechselt per IntersectionObserver

01

Solar-Förderantrag online stellen

Laden Sie Ihre Anlagendaten hoch und füllen Sie das Formular in weniger als 10 Minuten aus. Keine Unterschriften, kein Papier — alles digital.

  • Anlagengröße und Hersteller angeben
  • Installationsadresse bestätigen
  • IBAN für die Auszahlung hinterlegen
02

Prüfung durch unser Förder-Team

Innerhalb von 5 Werktagen prüft unser Team Ihren Antrag auf Vollständigkeit und Förderfaehigkeit. Sie erhalten eine automatische Statusmeldung per E-Mail.

  • Technische Prüfung der Anlagendaten
  • Abgleich mit Förderrichtlinien
  • Rueckfragen werden direkt kontaktiert
03

Förderzusage erhalten

Nach erfolgreicher Prüfung erhalten Sie eine verbindliche Förderzusage. Diese gilt 6 Monate und gibt Ihnen Planungssicherheit für die Installation.

  • Verbindliche Fördersumme schriftlich
  • Gueltig für 6 Monate
  • Direkt downloadbar als PDF
04

Auszahlung nach Inbetriebnahme

Laden Sie den Inbetriebnahme-Nachweis hoch und die Fördersumme wird innerhalb von 10 Werktagen direkt auf Ihr Konto überwiesen.

  • Netzeinspeise-Bescheinigung hochladen
  • Abschlussfoto der Anlage
  • Auszahlung innerhalb von 10 Werktagen
<ScrollNarrative align="media-left">
  <div slot="media">
    <div data-narrative-media="antrag">
      <!-- Schritt 1: Antrag stellen -->
    </div>
    <div data-narrative-media="pruefung">
      <!-- Schritt 2: Prüfung -->
    </div>
    <!-- ... -->
  </div>
  <div slot="steps">
    <div data-step="antrag" class="narrative-step">
      <h3>Antrag online stellen</h3>
      <p>In 10 Minuten fertig...</p>
    </div>
    <!-- ... -->
  </div>
</ScrollNarrative>

Variante: Media rechts

Mit align="media-right" wird die Media-Spalte auf die rechte Seite gelegt.

Ladeinfrastruktur erklären (media-right)

2 Steps als kompaktes Beispiel

01

Ladestation in Ihrer Nähe finden

Über 1.200 öffentliche Ladepunkte in Ihrer Region — in der App oder auf der Karte. Echtzeit-Verfügbarkeit inklusive.

02

Einfach laden, einfach bezahlen

QR-Code scannen oder Kundenkarte verwenden. Keine Registrierung notwendig. Abrechnung per kWh — transparent und fair.

<ScrollNarrative align="media-right">
  <div slot="media">
    <div data-narrative-media="standort">...</div>
    <div data-narrative-media="nutzung">...</div>
  </div>
  <div slot="steps">
    <div data-step="standort">...</div>
    <div data-step="nutzung">...</div>
  </div>
</ScrollNarrative>

Redakteur-Hinweise

Empfehlungen für den redaktionellen Einsatz des ScrollNarrative-Components.

Element Empfehlung Beispiel
Step-Titel 2–8 Worte, aktiv formuliert "Antrag online stellen"
Step-Text 15–60 Worte, eine Aussage pro Step "In 10 Minuten fertig. Kein Papier notwendig."
Anzahl Steps 3–6 Steps ideal Weniger = zu wenig Scroll-Engagement; mehr = ermuedend
Media-Inhalt Immer mit Alt-Text oder aria-hidden Dekorative Illustrationen: aria-hidden="true"

Installation

cp-components add scroll-narrative