Como añadir a tu web un efecto explosivo

  • Para añadir un efecto explosivo al título de tu post, solo tendrás que copiar este código en el footer.php de tu tema.
  • Comprueba que clase tienen los títulos de tu plantilla,por si tienes que cambiar titles[i].getElementsByClassName(«entry-title») por tu nombre de clase
  • Ejemplo:
    titles[i].getElementsByClassName(«EL_NOMBRE_DE_TU_CLASE»)
  • Si quieres probar el efecto pulsa sobre el título de la entrada, para ello tienes que estar dentro de la entrada, no funcionará si te encuentras en la página  principal de está web.
<script>
var explosion = (new Image()).src = "http://www.gifmania.com/Gif-Animados-Paisajes/Imagenes-Elementos-Naturales/Fuego/Explosiones/Explosion-Fuego-57367.gif";
 
window.onload = loadFunction;
 
function loadFunction() {
 
	var titles = document.getElementsByTagName("h1");
	for ( i = 0 ; i < titles.length ; i++ ) {
		var title = titles[i].getElementsByClassName("entry-title");
 
		if ( titles[i].innerHTML.substring(0,1) != '<' ) {
			var text = titles[i].innerHTML;
			titles[i].innerHTML = "";
			for (  i1 = 0; i1 < text.length ; i1++ ) {
				titles[i].innerHTML += '<span class="shot">' + text.charAt(i1) + "</span>";
			}
 
		}
	}
 
	var shots = document.getElementsByClassName('shot');
	for ( i=0 ; i<shots.length; i++) {
		shots[i].onclick=shot;
	}
}
 
function shot()
{	
	var audio = new Audio('http://www.sonidosmp3gratis.com/sounds/000961863_prev.mp3');
 
	audio.load();
	audio.play();
 
	this.innerHTML="<img src='"+ explosion+"'/>";
	var that = this;
 
	setTimeout(function() {
		that.innerHTML='';
	}, 1800);
}
</script>

Deja un comentario

Tu dirección de correo electrónico no será publicada.