Archiv für den Monat: März 2023

Abenteuer bei PHP upgrade 7 -> 8

Der Live-Cycle von PHP 7, dem WordPress-Motor, geht zu Ende. Der Support wird eingestellt. Es ist also Zeit die Webseite(n) auf Vordermann zu bringen, das heisst auf der Plattform des Providers die bereits als „veraltet“ gekennzeichnete PHP-Version anzuheben. Zum Beispiel von 7.3.44 nach 8.1.

Weiterlesen →

Bilder animiert anzeigen

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.