Pour rendre vos pages attractives rien de tel que les animations. Voici un code javascript facile à mettre en oeuvre pour vos sites WP.

Le code Js

window.onload = function(){ var wrapper = document.querySelectorAll('.site-content .relative,article,.icon_section_box'); for (let i = 0, len = wrapper.length; i < len; i++) { wrapper[i].addEventListener('mousemove',function(e){ //calcul des différences entre contenant et contenu. var layerOne = wrapper[i].querySelectorAll('.entry-title,.logo,a>div'); var contenant = wrapper[i].getBoundingClientRect();//contenant. //vérife si le wrapper est parent d'un autre layer. for (let ii =i, len = layerOne.length+i; ii < len; ii++){ var contenu = layerOne[(ii-i)].getBoundingClientRect();//contenu. var ratioW = contenant.width - contenu.width;//espace disponible sur les cotés. var ratioH = contenant.height - contenu.height;//espace disponible verticalement. var contenant = wrapper[i].getBoundingClientRect();//contenant. var contenu = layerOne[(ii-i)].getBoundingClientRect();//contenu. var ratioW = contenant.width - contenu.width;//espace disponible sur les cotés. var ratioH = contenant.height - contenu.height;//espace disponible verticalement. if(wrapper[i].contains(layerOne[(ii-i)])){ //déterminer la position du curseur par rapport au centre du contenant. var curseurX = ((e.clientX-contenant.x)-contenant.width/2)/100, curseurY = ((e.clientY-contenant.y)-contenant.height/2)/100; layerOne[(ii-i)].style.transition = "none"; layerOne[(ii-i)].style.webkitTransform = 'skewX(' + curseurY + 'deg) skewY(' + curseurX + 'deg) rotateX(' + curseurX*5 + 'deg) rotateY(' + curseurY*5 + 'deg)'; layerOne[(ii-i)].style.transform = 'skewX(' + curseurY + 'deg) skewY(' + curseurX + 'deg) rotateX(' + curseurX*5 + 'deg) rotateY(' + curseurY*5 + 'deg)'; layerOne[(ii-i)].style.transition = "all .2s";}} });} for (let i = 0, len = wrapper.length; i < len; i++) { wrapper[i].addEventListener('mouseout',function(){ var layerOne = wrapper[i].querySelectorAll('.entry-title,.logo,a>div'); var contenant = wrapper[i].getBoundingClientRect();//contenant. console.log("quit"); for (let ii =i, len = layerOne.length+i; ii < len; ii++){ if(wrapper[i].contains(layerOne[(ii-i)])){ //déterminer la position du curseur par rapport au centre du contenant. layerOne[(ii-i)].style.webkitTransform = 'skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg)'; layerOne[(ii-i)].style.transform = 'skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg)'; layerOne[(ii-i)].style.transition = "transform .2s";}} });} }

Et le HOOK WordPress avec WP_ENQUEUE_SCRIPTS

add_action( 'wp_enqueue_scripts', 'parallax_script' ); function parallax_script() { wp_register_script('parallax', get_stylesheet_directory_uri() . '/js/parallax.js','1.1', true); wp_enqueue_script('parallax'); }