CÓDIGOS PARA WEB

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 y pégalo en un widget html

<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>

<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..)

<a href="https://exempols.blogspot.com/" target="_blank">En esta página os dejo un ejemplo de como quedaría</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, <a href="https://silviamsdigitalarts.blogspot.com/" target="_blank">puedes de ver como queda en esta página:</a>

*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> cambia mi texto por el tuyo ***Puedes verlo en la pestaña de este sitio***

<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>

INHABILITAR CLIC DERECHO EN TU PÁGINA PARA EVITAR COPIAS

Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML

justo encima de </body> Cambia mi texto por el tuyo

<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>

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

Entra aquí

PONER UNA IMAGEN PERSONALIZADA EN EL CURSOR

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

PÉGALO EN UN WIDGET HTML

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

PONER EL COPYRIGHT DE TU SITIO MÁS EL AÑO DE CREACIÓN MÁS EL AÑO ACTUAL, SE ACTUALIZA AUTOMÁTICAMENTE CADA AÑO

TEMA/PERSONALIZAR/EDICIÓN HTML

justo encima de </footer>

<script type="text/javascript">

copyright=new Date();

update=copyright.getFullYear();

</script>