J'ai suivi le tuto graphikart sur le défilement d'une page avec une animation.
Je veux utiliser les animations sur un site WordPress sur mesure que j'ai créé.
J'ai constaté que si je met l'animation sur une image mise en avant, la page se recharge mal et les autres élèments qui doivent s'animer juste en-dessous du scroll sont déjà animé.
J'ai fais plusieurs recherches et j'ai constaté que la function que j'utilise dans mon functions.php pour supprimer les attributs de taille donnée par WordPress nativement et aussi pour que le responsif se fasse bien créé un conflit avec le JS.
J'ai testé en supprimant la fonction l'animation fonctionne bien et si je remet la fonction galère...
Dans inspection d'élément mes images sont avec loading=lazy
Functions.php
function respon_image ( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
add_filter( 'post_thumbnail_html', 'respon_image', 10 );
add_filter( 'image_send_to_editor', 'respon_image', 10 );
add_filter( 'wp_get_attachment_link', 'respon_image', 10 );
anim.js
const ratio = .1
const options = {
root: null,
rootMargin: '0px',
threshold: ratio
}
const handleIntersect = function(entries, observer){
entries.forEach(function(entry){
if(entry.intersectionRatio > ratio){
entry.target.classList.add('reveal-visible')
observer.unobserve(entry.target)
}
})
}
var observer = new IntersectionObserver(handleIntersect, options)
document.querySelectorAll('[class*="reveal-"]').forEach(function (r){
observer.observe(r)
})
Ce que je veux
Trouver une solution pour éviter ce conflit
Ce que j'obtiens
Reload de ma page en supprimant le cache. L'image n'a pas d'animation (alors que normalement oui), l'élèment juste en-dessous (texte, image ou tite etc...) l'animatrion ne se fait pas. Puis les autres éléments fonctionnent.
webtc