esantis.org

test3

Ja — klar, auch die anderen Animationen gehen prima!

Wenn das Bild zoomt, heißt das: AOS ist korrekt eingebunden und funktioniert. Jetzt kannst du andere Effekte genauso nutzen. Ich gebe dir Beispiele & Tipps, wie du weitere Animationstypen machst:

🎯 Andere AOS-Animationen mit Beispielen

Stell dir vor, du willst Texte, Karten oder Kacheln animieren. So geht’s:

<div data-aos="fade-up">
  Inhalt erscheint von unten.
</div>

<div data-aos="fade-right" data-aos-delay="200">
  Inhalt erscheint von rechts mit Verzögerung von 200 ms.
</div>

<div data-aos="zoom-out" data-aos-duration="900">
  Inhalt zoomt heraus über 900 ms.
</div>

<div data-aos="flip-left">
  Inhalt dreht sich von links.
</div>

<div data-aos="slide-up" data-aos-offset="150">
  Inhalt gleitet nach oben, beginnt Animation bei 150px früher.
</div>

🧩 Anwendung auf deine Elemente

Du kannst also z. B. deine Bild-Kacheln so machen:

<figure class="img-tile" data-aos="zoom-in">
  <img src="..." alt="…">
  <figcaption>…</figcaption>
</figure>

Und deine Sektionen:

<section class="esan-sec" data-aos="fade-up">
  … Inhalt …
</section>

Oder deine Karten:

<div class="card" data-aos="flip-up">
  … Inhalt …
</div>

🔧 Hinweis zur Steuerung & Feinjustierung

  • Mit data-aos-delay="X" kannst du verzögerte Abläufe erzeugen — gut für Staffelung.
  • Mit data-aos-duration="X" steuerst du, wie lange die Animation dauert.
  • data-aos-offset="X" gibt an, wann (wie weit vorher) die Animation beginnt.
  • data-aos-easing="..." kannst du nutzen, um die Animations-Kurve sanfter oder dynamischer zu machen.

Wenn du willst, kann ich ein Set von passenden Animationen für deine Website zusammenstellen (z. B. welche Animation für Bild, Text, Karte, Kachel, Zitat, etc.), passend zum Stil von Esantis, und dir das als Beispiel-HTML liefern.

f

ds

af

sd

sf

ds

fds

dsfd

sd

sffds

afds

Fade Up – erscheint beim Scrollen von unten.
Fade Right – 150ms Verzögerung.
Zoom In – 900ms Dauer, 300ms Delay.

2

…

3

Atem & Vagus
Selbstregulation

4

5

Wesentlich werden – Körper. Geist. Tiefe.

Wissen, das sich verkörpert…

6

Fasten Vagus & Atem Zwischen uns Stille & Wort Selbstregulation

7

Fasten – gemeinsam leichter

…

Fastenkreise ansehen

8

Themen

Stress & Selbstregulation

…

Beziehung & Dialog

…

Glaube & Tiefe

…

9

Stille & Wort
Schlaf & Regeneration
Ernährung

10

„Gemeinschaft ist der Raum, in dem Wissen zu Leben wird.“

– Esantis

11

Häufige Fragen

Wie laufen die 7-Tage-Kreise ab?

…

Was kostet die Teilnahme?

…

Gibt es ärztliche Begleitung?

…

12

Stimmen

„Zum ersten Mal…“

– M.

„Der Atemkreis…“

– M.K.

„Endlich nicht allein…“

– M.S.

13

0
Tage Impuls
0
Kreise
0
Übungen
0
Du

14

Bereit für deinen nächsten Schritt?

15

16

17