Wordpress-Webseite mit Animationen

[mtemp]

Hi,
solche eingeblendeten/animierten Elemente beim Herunterscrollen wie zB auf der mit Wordpress erstellten Site https://www.moensheimer-muehle.de/home sind ja derzeit (noch) modern. Ich finds eher nervig – trotzdem gefragt: mit welchen Tools/Frameworks oder Wordpress-Plugins werden diese Animationen erstellt?

Danke!
mtemp

 

[kim88]

Das scheint ein Custom Theme zu sein das extra so für diese Webseite gebaut wurde, sieht man hier: https://www.moensheimer-muehle.de/wp-content/themes/mmuehle/style.css

Daher das wird dort wohl mit CSS (die Animation) und JS (den Trigger) gemacht worden sein. Wenn ich den Quellcode ansehe wurde das AOS-Animate Framework verwendet: https://github.com/michalsnik/aos

Da ich Themes auch von Hand programmiere und keine Frameworks nutze kann ich dir nicht sagen wo es da eine Out-of-Box Lösung gibt. Vielleicht hilft dir dieses Plugin weiter: https://wordpress.org/plugins/animate-on-scroll/

Ich selber kenne und nutze es nicht, aber es verwendet auch AOS. Ansonsten ist es halt Abhängig was für einen "Page Editor" du innterhalb von WordPress verwendest den normalen Gutenberg (den ich bevorzuge) oder DIVI, Elementor, es gibt da so viele und die Lösung wird bei jedem ein bisschen anders sein.

 

[mtemp]

Wunderbare Antwort! Ich habe zwar 2 Daumen, kann jedoch nur einen vergeben ;-)

Danke zB für den AOS-TIpp!

Ergänzung (3. Oktober 2024)

Und weil erst neulich in die Tiefen von GPTs eingestiegen, so antwortet mir hier Copilot ebenfalls mit einem Verweis auf AOS:


Es gibt mehrere Tools und Bibliotheken, die dir helfen können, Elemente auf einer Webseite abhängig vom Viewport zu animieren. Hier sind einige der beliebtesten:

1. ScrollMagic: Diese Bibliothek ermöglicht es dir, Animationen zu erstellen, die durch das Scrollen der Seite ausgelöst werden. Sie ist besonders nützlich für Parallax-Effekte und andere scrollbasierte Animationen1.
2. AOS (Animate On Scroll): Eine einfache und leicht zu verwendende Bibliothek, die Animationen auslöst, wenn Elemente in den Viewport gelangen1.
3. Framer Motion: Ein leistungsstarkes Animations-Framework für React, das auch Viewport-abhängige Animationen unterstützt2.
4. Intersection Observer API: Eine native JavaScript-API, die es ermöglicht, Funktionen auszuführen, wenn ein Element in den Viewport eintritt oder ihn verlässt. Diese API ist sehr flexibel und kann in Kombination mit anderen Animationsbibliotheken verwendet werden1.
5. GSAP ScrollTrigger: Teil der GreenSock Animation Platform (GSAP), diese Erweiterung ermöglicht es dir, Animationen zu erstellen, die durch das Scrollen der Seite ausgelöst werden1.

Diese Tools bieten eine Vielzahl von Möglichkeiten, um deine Webseite dynamischer und interaktiver zu gestalten. Hast du schon eine bestimmte Art von Animation im Sinn, die du umsetzen möchtest?

 

[sh.]

Jeder Site-Builder kann doch diese Effekte per Klick aktivieren. Elementor z.B. kann das schon ewig und Elementor ist der quasi-Standard würde ich mal behaupten wenn es um Wordpress geht.

 

[kim88]

@sh. der Standard ist Gutenberg 🤷‍♂️

 

[mtemp]

Nun etwas off-topic: wie verhälts sich denn Elementor mit Gutenberg. Ersetzt Elementor Gutenberg oder ergänzt es es nur?

 

[kim88]

Elementor und alle anderen alternativen Page-Builder ersetzen Gutenberg.

 

[Guru-Meditation]

solche eingeblendeten/animierten Elemente beim Herunterscrollen

Jedem das Seine...wer sowas nicht mag kann halt JS im Brower standardmässig abstellen und nur für die Seiten aktivieren die er oft besucht.
Was mich mehr ärgert sind so Sachen: du ließt einen Artikel und ließt..und auf einmal popt Werbung mitten auf dem Schirm, klick doch hier klick da, mach das, wie gefällt dir dieses, bewerte dies und jenes..aaaalter....seit ich JS deaktiviert hab, hab ich Ruhe z.B. sehe ich viele solchen Seiten gar nicht mehr weil die wohl aktives JS im Browser voraussetzen...na dann...