Última actualización:

En esta página iré subiendo códigos que te puedan gustar para tu web

CÓDIGO PARA ENLAZAR TU EMAIL A UNA IMAGEN

Copia el código de la caja

<a href="mailto:AQUÍ TU DIRECCIÓN DE CORREO"><img src="URL DE TU IMAGEN"></a>

MAGO MERLIN VOLANDO POR LA PÁGINA

Me he acordado de cuando tenía el LIVE SPACES y que tuve el MAGO MERLIN volando por mi página, es una fricada pero me encanta!!!! Yo misma he hecho la imagen gif y he adaptado un script para que vuele por la página, con 1 clic derecho encima del mago desaparece y cuando das 2 clics derechos vuelve a aparecer! FUNCIONA EN TODAS LAS PÁGINAS, WORDPRESS, JIMDO, BLOGGER... Lo puedes ver en acción aquí en esta página!!! Si lo quieres para tu sitio copia el código y pégalo en un widget/gadget html

 <script> /* TripleFlap adaptado para imagen estatica mago */ var magoWidth = 217; var magoHeight = 181; var magoSpeed = 12; var magoSpaceVertical = 16; var magoSetUp = 2; var neededElems4random = 10; var minElemWidth = Math.round(magoWidth / 3); var scareTheMagoMouseOverTimes = 4; var scareTheMagoTime = 1000; var magoIsFlying = false; var scrollPos = 0; var windowHeight = window.innerHeight || 450; var windowWidth = window.innerWidth || 800; if (windowHeight <= magoHeight + 2 * magoSpaceVertical) windowHeight = magoHeight + 2 * magoSpaceVertical + 1; if (windowWidth <= magoWidth) windowWidth = magoWidth + 1; var magoPosX = Math.round(Math.random() * (windowWidth - magoWidth + 200) - 200); var magoPosY = -2 * magoHeight; var timeoutFlight = false; var scareTheMagoLastTime = 0; var scareTheMagoCount = 0; var cicloHecho = false; var imgVuelo="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFzFQma59aiVmIkQrCf-oJvF6wWITW4RmzmJQqCLli6YP3zbRIA04f9pJtPnznnR5qRAHTFB9_Jw6rVwbbFCo3uvGTsaOTeOAdXO5AB0e-RCZLPToJAtSqL5A9XoNqgWIBpP7E2p5cLTUU0hgwBpVCYLDAfR18iW9Gw0Iw4XmWEyYC9iABfqO58L0Wks/s1600/11bocata.gif" function tripleflapInit() { var theMago = document.createElement("img"); theMago.id = "theBird"; theMago.src = birdSprite; theMago.style.position = "absolute"; theMago.style.left = magoPosX + "px"; theMago.style.top = magoPosY + "px"; theMago.style.width = magoWidth + "px"; theMago.style.height = magoHeight + "px"; theMago.style.zIndex = "9999"; theMago.style.pointerEvents = "auto"; theMago.onmouseover = function () { scareTheMago(); }; document.body.appendChild(theMago); window.onscroll = recheckposition; recheckposition(); } function recheckposition(force) { if (force !== true) force = false; if (magoIsFlying) return false; windowHeight = window.innerHeight; windowWidth = window.innerWidth; if (windowHeight <= magoHeight + 2 * magoSpaceVertical) windowHeight = magoHeight + 2 * magoSpaceVertical + 1; if (windowWidth <= magoWidth) windowWidth = magoWidth + 1; scrollPos = window.pageYOffset; var el = document.getElementById("theBird"); if (!el) return; magoPosY = parseInt(el.style.top); magoPosX = parseInt(el.style.left); if (scrollPos + magoSpaceVertical >= magoPosY || scrollPos + windowHeight - magoHeight < magoPosY || force) { var elemPosis = chooseNewTarget(); var elemTop, elemLeft, elemWidth; if (elemPosis.length < 1) { elemTop = scrollPos + Math.round(Math.random() * (windowHeight - magoHeight)); elemLeft = Math.round(Math.random() * (windowWidth - magoWidth)); elemWidth = 0; } else { var newTarget = elemPosis[Math.floor(Math.random() * elemPosis.length)]; elemTop = newTarget[2]; elemLeft = newTarget[3]; elemWidth = newTarget[4]; } var targetTop = elemTop - magoHeight; var targetLeft = Math.round(elemLeft - magoWidth / 2 + Math.random() * elemWidth); if (targetLeft > windowWidth - magoWidth - 24) targetLeft = windowWidth - magoWidth - 24; else if (targetLeft < 0) targetLeft = 0; magoIsFlying = true; flyFromTo(magoPosX, magoPosY, targetLeft, targetTop, 0); } } function chooseNewTarget() { var elemPosis = []; var upper = scrollPos + magoHeight + magoSpaceVertical; var lower = scrollPos + windowHeight - magoSpaceVertical; for (var ce = 0; ce < targetElems.length; ce++) { var elemType = targetElems[ce]; var sumElem = document.getElementsByTagName(elemType).length; for (var cu = 0; cu < sumElem; cu++) { var el = document.getElementsByTagName(elemType)[cu]; var top = el.offsetTop; var left = el.offsetLeft; var width = el.offsetWidth; if (top <= upper || top >= lower || width < minElemWidth || left < 0) continue; elemPosis.push([elemType, cu, top, left, width]); if (elemPosis.length >= neededElems4random) return elemPosis; } } return elemPosis; } function flyFromTo(startX, startY, targetX, targetY, solved) { solved += (solved > magoSpeed / 2) ? magoSpeed : Math.round((solved === 0) ? magoSpeed / 4 : magoSpeed / 2); var distanceX = targetX - startX; var distanceY = targetY - startY; var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); var solvPerc = Math.abs(1 / distance * solved); var solvDistX = Math.round(distanceX * solvPerc); var solvDistY = Math.round(distanceY * solvPerc); if (Math.abs(solvDistX) >= Math.abs(distanceX) && Math.abs(solvDistY) >= Math.abs(distanceY)) { solvDistX = distanceX; solvDistY = distanceY; magoIsFlying = false; if (!cicloHecho) { cicloHecho = true; cicloGIF(); return; } setTimeout(recheckposition, 500); } else { timeoutFlight = setTimeout(function () { flyFromTo(startX, startY, targetX, targetY, solved); }, 50); } var el = document.getElementById("theBird"); if (!el) return; el.style.left = (startX + solvDistX) + "px"; el.style.top = (startY + solvDistY + magoSetUp) + "px"; } function scareTheMago() { var newTS = Date.now(); if (scareTheMagoLastTime < newTS - scareTheMagoTime) { scareTheMagoCount = 1; scareTheMagoLastTime = newTS; } else { scareTheMagoCount++; if (scareTheMagoCount >= scareTheMagoMouseOverTimes) { scareTheMagoCount = 0; scareTheMagoLastTime = 0; recheckposition(true); } } } </script> <script> var birdSprite='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFzFQma59aiVmIkQrCf-oJvF6wWITW4RmzmJQqCLli6YP3zbRIA04f9pJtPnznnR5qRAHTFB9_Jw6rVwbbFCo3uvGTsaOTeOAdXO5AB0e-RCZLPToJAtSqL5A9XoNqgWIBpP7E2p5cLTUU0hgwBpVCYLDAfR18iW9Gw0Iw4XmWEyYC9iABfqO58L0Wks/s1600/11bocata.gif'; var targetElems = [ 'img','hr','table','td','div','input','textarea','button', 'select','ul','ol','li','h1','h2','h3','h4','p','code', 'object','a','b','strong','span' ]; tripleflapInit(); </script> <style> #theBird { width: 140px; height: 161px; object-fit: fill; background: none; image-rendering: auto; transition: opacity 0.6s ease, transform 0.4s ease; } @keyframes flotarMagoTF { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .mago-flotando-tf { animation: flotarMagoTF 3.5s ease-in-out infinite; } @keyframes gestoMagicoTF { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1) rotate(0deg); } } .mago-gesto-tf { animation: gestoMagicoTF 0.8s ease-out; } </style> <script> var tf_clicksDerecho = 0; var tf_tiempoUltimoClick = 0; function tf_iniciarExtrasMago() { var mago = document.getElementById("theBird"); if (!mago) { setTimeout(tf_iniciarExtrasMago, 300); return; } mago.classList.add("mago-flotando-tf"); mago.addEventListener("mouseover", function() { mago.style.transform = "scale(1.08)"; setTimeout(() => mago.style.transform = "", 250); }); mago.addEventListener("click", function() { mago.classList.add("mago-gesto-tf"); setTimeout(() => mago.classList.remove("mago-gesto-tf"), 800); }); mago.addEventListener("contextmenu", function(e) { e.preventDefault(); var ahora = Date.now(); if (ahora - tf_tiempoUltimoClick < 600) { tf_clicksDerecho++; } else { tf_clicksDerecho = 1; } tf_tiempoUltimoClick = ahora; if (tf_clicksDerecho === 1) { mago.style.opacity = "0"; } if (tf_clicksDerecho === 2) { mago.style.opacity = "1"; tf_clicksDerecho = 0; } return false; }); } document.addEventListener("DOMContentLoaded", tf_iniciarExtrasMago); </script> <script> var tf_idleTimer = null; function tf_animacionesIdle() { var mago = document.getElementById("theBird"); if (!mago) return; /* Quitar animaciones anteriores */ mago.classList.remove("mago-parpadeo-tf"); mago.classList.remove("mago-mirar-tf"); mago.classList.remove("mago-brazos-tf"); /* Elegir animacion aleatoria */ var anim = Math.floor(Math.random() * 3); if (anim === 0) { mago.classList.add("mago-parpadeo-tf"); } else if (anim === 1) { mago.classList.add("mago-mirar-tf"); } else { mago.classList.add("mago-brazos-tf"); } } function tf_observarQuietud() { var mago = document.getElementById("theBird"); if (!mago) { setTimeout(tf_observarQuietud, 300); return; } var observer = new MutationObserver(function() { /* Se ha movido → reiniciar animaciones */ mago.classList.remove("mago-parpadeo-tf"); mago.classList.remove("mago-mirar-tf"); mago.classList.remove("mago-brazos-tf"); clearTimeout(tf_idleTimer); /* Si pasa un rato quieto → animacion */ tf_idleTimer = setTimeout(tf_animacionesIdle, 5000); }); observer.observe(mago, { attributes: true, attributeFilter: ["style"] }); } document.addEventListener("DOMContentLoaded", tf_observarQuietud); function cicloGIF() { var mago = document.getElementById("theBird"); if (!mago) return; mago.src = imgOjosAbiertos; setTimeout(() => { mago.src = imgOjosCerrados; setTimeout(() => { mago.src = imgOjosAbiertos; setTimeout(() => { mostrarBocadillo(() => { mago.src = imgVuelo; setTimeout(recheckposition, 500); }); }, 300); let golpes = 0; let inter = setInterval(() => { mago.src = (golpes % 2 === 0) ? imgPie1 : imgPie2; golpes++; if (golpes >= 6) { clearInterval(inter); mago.src = imgOjosAbiertos; setTimeout(() => { mago.src = imgVuelo; setTimeout(recheckposition, 500); }, 300); } }, 250); }, 200); }, 300); } <div id="bocadillo" style="position: absolute; top: -20px; left: 160px; padding: 8px 12px; background: white; border: 2px solid black; border-radius: 10px; font-size: 14px; display: none; max-width: 180px;"> Con clic derecho desaparezco y con 2 clics derechos vuelvo a aparecer </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { const mago = document.getElementById("mago"); const bocadillo = document.getElementById("bocadillo"); function mostrarBocadillo(callback) { var mago = document.getElementById("theBird"); if (!mago) return callback(); var rect = mago.getBoundingClientRect(); var div = document.createElement("div"); div.style.position = "absolute"; div.style.left = (rect.left + rect.width + 10) + "px"; div.style.top = (rect.top - 10) + "px"; div.style.padding = "8px 12px"; div.style.background = "white"; div.style.border = "2px solid black"; div.style.borderRadius = "10px"; div.style.fontSize = "14px"; div.style.zIndex = "999999"; div.style.maxWidth = "180px"; div.innerText = "Con clic derecho desaparezco y con 2 clics derechos vuelvo a aparecer"; document.body.appendChild(div); setTimeout(() => { div.remove(); callback(); }, 3000); } </script>

Sparkles(estrellitas) que salen del cursor

En el script vienen de color "rainbow" (arco iris) pero podeis cambiar donde dice rainbow por el color que os vaya bien (white, blue, red, green, yelow..)
En esta página os dejo un ejemplo de como quedaría
(El cursor de mariposa lo he hecho yo y es un ejemplo del script más abajo de como poner un cursor personalizado)
*Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML

justo encima de </body>*

<script> //<![CDATA[ document.addEventListener("mousemove", createSparkle); var sparkles = []; var maxSparkles = 80; // más partículas permitidas en pantalla var sparkleColor = "rainbow"; var cantidad = 3; // cuántas estrellitas crea cada movimiento var separacion = 12; // separación horizontal entre estrellitas var caidaLateral = 2; // movimiento lateral var velocidadCaida = 0.7; // caída más lenta var vidaEstrella = 55; // rastro más largo function createSparkle(e) { for (var i = 0; i < cantidad; i++) { var s = document.createElement("div"); s.className = "sparkle"; // Posición inicial s.style.left = (e.pageX + (i * separacion)) + "px"; s.style.top = e.pageY + "px"; // Color if (sparkleColor === "rainbow") { s.style.background = "hsl(" + (Math.random() * 360) + ", 100%, 70%)"; } else { s.style.background = sparkleColor; } // Movimiento lateral aleatorio s.dx = (Math.random() * caidaLateral * 2) - caidaLateral; document.body.appendChild(s); sparkles.push({ el: s, life: vidaEstrella }); } } function animateSparkles() { for (var i = sparkles.length - 1; i >= 0; i--) { var s = sparkles[i]; s.life--; var y = parseFloat(s.el.style.top); var x = parseFloat(s.el.style.left); // Caída lenta + movimiento lateral s.el.style.top = (y + velocidadCaida) + "px"; s.el.style.left = (x + s.el.dx) + "px"; // Desvanecimiento suave s.el.style.opacity = s.life / vidaEstrella; if (s.life <= 0) { s.el.parentNode.removeChild(s.el); sparkles.splice(i, 1); } } requestAnimationFrame(animateSparkles); } animateSparkles(); //]]> </script> <style> .sparkle { position: absolute; width: 10px; height: 10px; pointer-events: none; z-index: 9999; opacity: 1; /* Forma de sparkle ✦ */ clip-path: polygon( 50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40% ); } </style>

Texto que sigue al cursor
En este script hacemos que un texto siga al cursor, el color se puede cambiar por el de tu preferencia, yo lo he puesto de color azul (blue) en el ejemplo, puedes de ver como queda en esta página:

*Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML
justo encima de </body>*

<style> .cursor-letter { position: absolute; font-size: 14px; font-family: Arial, sans-serif; font-weight: bold; color: blue; pointer-events: none; z-index: 9999; top: -50px; left: -50px; } </style> <script> //<![CDATA[ var texto = "TUBES FREE SilviaMS digital ARTS".split(""); var letras = []; var mouseX = 0, mouseY = 0; var salto = 15; // separación entre letras var velocidad = 0.35; // suavidad del movimiento // Crear letras en pantalla for (var i = 0; i < texto.length; i++) { var span = document.createElement("span"); span.className = "cursor-letter"; span.textContent = texto[i]; document.body.appendChild(span); letras.push({ el: span, x: -50, y: -50 }); } // Seguir el ratón document.addEventListener("mousemove", function(e) { mouseX = e.pageX; mouseY = e.pageY; }); // Animación estilo original function animar() { var objetivoX = mouseX; var objetivoY = mouseY; // IMPORTANTE: recorrer de atrás hacia adelante for (var i = letras.length - 1; i >= 0; i--) { var letra = letras[i]; letra.x += (objetivoX - letra.x) * velocidad; letra.y += (objetivoY - letra.y) * velocidad; letra.el.style.left = letra.x + "px"; letra.el.style.top = letra.y + "px"; // La letra anterior sigue a esta objetivoX = letra.x - salto; objetivoY = letra.y; } requestAnimationFrame(animar); } animar(); //]]> </script>

Scroll/Marquee texto en movimiento en la pestaña del navegador:
*Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML
justo encima de </body>

<SCRIPT LANGUAGE='JavaScript'>
var txt=" FREE TUBES SilviaMS digital ARTS ***Bienvenidos*** "
var espera=300;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>

*Cambia lo que está en color rojo por tu propio mensaje*

Inhabilitar clic derecho en tu página para evitar copia:
*Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML
justo encima de </body>*

<script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("Coloca el mensaje aquí.");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("FREE TUBES SilviaMS digital ARTS");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>

*Cambia lo que está en color rojo por tu propio mensaje*

En esta página te explican como habilitar el clic derecho del ratón en páginas "anti-copy"

✅ Cómo habilitar el clic derecho en los sitios web que lo desactivan

En esta página encuentras muchos efectos para el cursor, nieve en la web, corazones San Valentin, efectos en los textos etc Mediante Javascript

✅ RV's free DHTML and JavaScript text and graphic effects for your web-site

Código para poner una imagen personalizada para el cursor en tu página web

<style type="text/css">* {cursor: url(AQUÍ LA URL DE TU IMAGEN CURSOR), url(AQUÍ LA URL DE TU IMAGEN CURSOR), auto !important;}</style>

*La imagen del cursor debe de tener unas medidas de unos 50x50px puede ser gif, png, .cur*

CODIGO PARA PONER UNA IMAGEN DE FONDO Y PONER TU CONTENIDO ENCIMA Se puede usar en las entradas y en widgets html/javascript FUNCIONA EN CUALQUIER WEB

Este es un método antiguo que ya no se usa, pero es el único que me funciona a mi, me deja meter imágenes y escribe directamente encima del fondo

<table width="100%" height="100%" border="0" border color="#000" background="AQUÍ LA URL DE TU IMAGEN DE FONDO" width="100%"> <tr> <td>AQUÍ VA TU CONTENIDO</td> </tr> </table>

Poner el copyright de tu página más el año de creación y el año actual SE ACTUALIZA AUTOMÁTICAMENTE CADA AÑO

ejemplo de como se ve en la foto:

COPIA ESTE CÓDIGO:

<script type="text/javascript">
copyright=new Date();
update=copyright.getFullYear();
document.write("FREE TUBES SilviaMS digital ARTS © 2010 - " + update + " " + "lo que quieras o puedes dejarlo vacío");

</script>

TEMA/PERSONALIZAR/EDICIÓN HTML
justo encima de </body>

Lo que está en color rojo lo sustituyes por los datos de tu página