
<p>Pour rendre vos pages attractives rien de tel que les animations. Voici un code javascript facile &agrave; mettre en oeuvre pour vos sites WP.</p>
<h2>Le code Js</h2>
<pre class="line-numbers"><code class="language-javascript">window.onload = function(){
	var wrapper = document.querySelectorAll('.site-content .relative,article,.icon_section_box');
		
for (let i = 0, len = wrapper.length; i &lt; len; i++) {

	wrapper[i].addEventListener('mousemove',function(e){
	//calcul des diff&eacute;rences entre contenant et contenu.
	var layerOne = wrapper[i].querySelectorAll('.entry-title,.logo,a&gt;div');
	var contenant = wrapper[i].getBoundingClientRect();//contenant.

	
	//v&eacute;rife si le wrapper est parent d'un autre layer.
	
	for (let ii =i, len = layerOne.length+i; ii &lt; len; ii++){
		var contenu = layerOne[(ii-i)].getBoundingClientRect();//contenu.
	var ratioW = contenant.width - contenu.width;//espace disponible sur les cot&eacute;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&eacute;s.
			var ratioH = contenant.height - contenu.height;//espace disponible verticalement.
		if(wrapper[i].contains(layerOne[(ii-i)])){
					//d&eacute;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 &lt; len; i++) {
wrapper[i].addEventListener('mouseout',function(){
	var layerOne = wrapper[i].querySelectorAll('.entry-title,.logo,a&gt;div');
	var contenant = wrapper[i].getBoundingClientRect();//contenant.
console.log("quit");
	for (let ii =i, len = layerOne.length+i; ii &lt; len; ii++){
		if(wrapper[i].contains(layerOne[(ii-i)])){
					//d&eacute;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";}}
});}

}</code></pre>
<h2>Et le HOOK WordPress avec WP_ENQUEUE_SCRIPTS</h2>
<pre class="line-numbers"><code class="language-php">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');
}</code></pre>
<p>&nbsp;</p>
<div class='rp4wp-related-posts'>
<h3>Articles Liés</h3>
<ul>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/javascript/javascript/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Javascript code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-150x150.jpg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-300x300.jpg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-1160x1160.jpg 1160w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/javascript/javascript/'>JavaScript</a><p>Le JavaScript est un langage de programmation destiné au HTML.…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/validation-formulaire-pure-js/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2018/02/code_1518036616-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="code sur différent écran" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2018/02/code_1518036616-150x150.png 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2018/02/code_1518036616-300x300.png 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/validation-formulaire-pure-js/'>Validation formulaire pure-JS</a><p>Le référencement est une tâche complexe, il faut surveiller différents…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/formation/fin-de-la-semaine-javascript/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Javascript code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-150x150.jpg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-300x300.jpg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Javascript_code-1160x1160.jpg 1160w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/formation/fin-de-la-semaine-javascript/'>Fin de la semaine JavaScript</a><p>Fin de la semaine de formation Js, comme pour les…</p></div>
</li>
</ul>
</div>


Effet Js sur titre

Développeur

Réduisez les temps de chargement de vos pages, pour améliorer l&#8217;expérience utilisateur.