Ein Bild animiert anzuzeigen, sobald es auf dem Bildschirm erscheint – also wenn Seite geladen wird oder Benutzer nach unten scrollt – gibt der Seite eine gewisse Leichtigkeit.
Dies kann auf verschiedenste Arten erreicht werde. Ich habe mich für die Library von Green Socks entschieden.
Damit die gewünschten Dateien lokal installiert werden können, können sie dort ge-downloaded werden. Ich lege sie dann ab in einem Unterverzeichnis „/js“meines Theme-Ordners.
Für diese Webseite verwende ich gsap.min.js und ScrollTrigger.min.js.
Damit diese Dateien eingebunden werden, müssen diese Dateien der Webseite bekannt gemacht werden, z.B. in der functions.php:
// GSAP lokal einbinden (ab ../themes/mychildtheme/js/)
function theme_gsap_script(){
// The core GSAP library
wp_enqueue_script( 'gsap-js', get_stylesheet_directory_uri() . '/js/gsap.min.js', array(), false, true );
// ScrollTrigger - with gsap.js passed as a dependency
wp_enqueue_script( 'gsap-st', get_stylesheet_directory_uri() . '/js/ScrollTrigger.min.js', array('gsap-js'), false, true );
// Your animation code file - with gsap.js passed as a dependency
wp_enqueue_script( 'gsap-js2', get_stylesheet_directory_uri() . '/js/woodyapp.js', array('gsap-js'), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
Die zugehörigen Javascript Anweisungen habe ich im selben Verzeichnis in der Datei woodyapp.js abgelegt:
// Bilder im Content hinein-faden und Grösse 0.85 -> 1
const boxes = gsap.utils.toArray(".entry-content figure.wp-block-image, .entry-content .wp-block-image figure, .entry-content .wp-caption, .woody-icon");
gsap.set(".entry-content figure.wp-block-image, .entry-content .wp-block-image figure, .entry-content .wp-caption, .woody-icon", {scale: 0.85, opacity: 0}) /* nur Seite Zimbabwe-b */
// .entry-content figure.wp-block-image -> für Gutenberg-Bildblock
// .entry-content .wp-caption -> für clasic-Block-Bild (alte Bweiträge)
boxes.forEach(box => {
gsap.to(box, {
scale: 1,
opacity: 1,
duration: 1,
scrollTrigger: {
//markers: true,
trigger: box,
start: 'top 80%',
end: 'top 50%',
onLeaveBack: self => self.disable() // nur 1x
}
})
});
Mit den obigen Anweisungen wird erreicht, dass die Animation auf alle Bilder (nur 1x) wirkt, wenn sie sich im content-Bereich befinden.
Das wärs schon.