Effet Js sur titre

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');
}

 

A lire  Validation formulaire pure-JS
© 2018 Occitaweb formation WordPress et média sociaux