Luo WordPress ”ali-teemaasi” (Child Theme) kansio nimeltä ”scripts” ja tallenna kyseiseen kansioon alla oleva koodi esimerkiksi nimellä ”teksti-scroll.js”.
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
const mm = gsap.matchMedia();
// Animaatio desktop
mm.add("(min-width: 769px)", () => {
gsap.to("#scrolled-larger", {
scrollTrigger: {
trigger: "#scrolled-larger",
start: "top 90%",
end: "+=400",
scrub: 0.4
},
scale: 3,
transformOrigin: "top left"
});
});
// Animaatio mobile
mm.add("(max-width: 768px)", () => {
gsap.to("#scrolled-larger", {
scrollTrigger: {
trigger: "#scrolled-larger",
start: "top 90%",
end: "+=250",
scrub: true
},
scale: 1.6,
transformOrigin: "top left"
});
});
ScrollTrigger.refresh();
});
Tämän jälkeen lisää skripti ali-teemasi ”functions-php” tiedostoon seuraavalla tavalla.
function add_own_scripts(){
// The core GSAP library
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js', array(), false, true );
// ScrollTrigger - with gsap.js passed as a dependency
wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js', array('gsap-js'), false, true );
// Your animation code file - with gsap.js passed as a dependency
wp_enqueue_script( 'teksti-scroll', get_stylesheet_directory_uri().'/scripts/teksti-scroll.js', array('gsap-js'), false, true );
add_action( 'wp_enqueue_scripts', 'add_own_scripts' );
Lisää yllä olevalle otsikolle CSS ID ”#scrolled-larger”.
Ota yhteyttä Smilesiin, jos haluat kotisivujesi tekstit animoitua.