CÓDIGOS PARA TU WEB

EN ESTA PÁGINA SE IRÁN SUBIENDO CÓDIGOS QUE TE PUEDEN GUSTAR PARA TU WEB

CÓDIGO PARA ENLAZAR TU EMAIL A UNA IMAGEN

Copia el código de la caja en un widget HTML/texto

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

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>

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>

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

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

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

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 el cierre de body en BLOGGER

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>

/* 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 de pruebas: Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML justo encima de el cierre de body

// 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 EN LA PESTAÑA DEL NAVEGADOR

Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML justo encima de el cierre de body en BLOGGER WordPress y Jimdo se coloca en el head

Donde dice FREE TUBES SilviaMS digital ARTS Bienvenidos* Cambialo por tu propio mensaje*

INHABILITAR CLIC DERECHO PARA EVITAR COPIA

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

CÓDIGO PARA PONER UNA IMAGEN PERSONALIZADA AL CURSOR EN TU WEB

Copia el código y pégalo en un widget html/texto

La imagen del cursor debe de tener unas medidas de unos 50x50px máximo 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

PONER EL COPYRIGTH DE TU PÁGINA MÁS EL AÑO DE CREACIÓN MÁS EL AÑO ACTUAL SE ACTUALIZA AUTOMÁTICAMENTE CADA AÑO

copia y pega el código en el footer de tu web ejemplo de como se ve en la foto:

PONER UN CUADRO CON ENLACES EN TU BLOG O WEB

Copia este código y cambia mis URLS y títulos por los tuyos

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" style="border: 2px solid rgb(0, 0, 0); height: 300px; padding: 3px; text-align: center; width: 300px;"><a href="http://www.lenagold.ru/" target="_blank"><span style="font-size: x-large;">LENAGOLD</span></a><br />
<a href="https://www.janaly.com/" target="_blank"><span style="font-size: x-large;">JANALY</span></a><br />
  <a href="https://www.janaly.com/MesFiltres/MesFiltres.html/" target="_blank"><span style="font-size: x-large;">FILTROS JANALY</span></a><br />
    <a href="https://onda80bellvitge.jimdofree.com/" target="_blank" ><span style="font-size: x-large;">ONDA80 BELLVITGE JIMDO</span></a><br />
    <a href="https://www.onda80bellvitge.com/" target="_blank" ><span style="font-size: x-large;">ONDA80 BELLVITGE</span></a><br />
    <a href="https://www.fla-shop.com/image-map/" target="_blank" ><span style="font-size: x-large;">IMAGE MAP</span></a><br />
    <a href="https://wayback-api.archive.org/save/" target="_blank" ><span style="font-size: x-large;">WAYBACK MACHINE</span></a><br />
    <a href="https://flvto.click/es/" target="_blank" ><span style="font-size: x-large;">FLVTO</span></a><br />
    <a href="https://lbtubesandmists.blogspot.com/" target="_blank"><span style="font-size: x-large;">LB TUBES & MISTS</span></a>
 </marquee>

Canción actual

Artista

Título

CÓDIGOS PARA TU WEB

EN ESTA PÁGINA SE IRÁN SUBIENDO CÓDIGOS QUE TE PUEDEN GUSTAR PARA TU WEB

CÓDIGO PARA ENLAZAR TU EMAIL A UNA IMAGEN

MAGO MERLIN VOLANDO POR LA PÁGINA

SPARKLES (ESTRELLITAS) QUE SALEN DEL CURSOR

TEXTO QUE SIGUE AL CURSOR

SCROLL//MARQUEE EN LA PESTAÑA DEL NAVEGADOR

Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML justo encima de el cierre de body en BLOGGER WordPress y Jimdo se coloca en el head

Donde dice FREE TUBES SilviaMS digital ARTS Bienvenidos* Cambialo por tu propio mensaje*

INHABILITAR CLIC DERECHO PARA EVITAR COPIA

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

CÓDIGO PARA PONER UNA IMAGEN PERSONALIZADA AL CURSOR EN TU WEB

Copia el código y pégalo en un widget html/texto

La imagen del cursor debe de tener unas medidas de unos 50x50px máximo 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

PONER EL COPYRIGTH DE TU PÁGINA MÁS EL AÑO DE CREACIÓN MÁS EL AÑO ACTUAL SE ACTUALIZA AUTOMÁTICAMENTE CADA AÑO

copia y pega el código en el footer de tu web ejemplo de como se ve en la foto:

PONER UN CUADRO CON ENLACES EN TU BLOG O WEB

Copia este código y cambia mis URLS y títulos por los tuyos

Habilitar clic derecho en páginas 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

Canción actual

Artista

Título

CÓDIGOS PARA TU WEB

EN ESTA PÁGINA SE IRÁN SUBIENDO CÓDIGOS QUE TE PUEDEN GUSTAR PARA TU WEB

CÓDIGO PARA ENLAZAR TU EMAIL A UNA IMAGEN

MAGO MERLIN VOLANDO POR LA PÁGINA

SPARKLES (ESTRELLITAS) QUE SALEN DEL CURSOR

TEXTO QUE SIGUE AL CURSOR

SCROLL//MARQUEE EN LA PESTAÑA DEL NAVEGADOR

*Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML justo encima de el cierre de body* en BLOGGER WordPress y Jimdo se coloca en el head

*Donde dice FREE TUBES SilviaMS digital ARTS ***Bienvenidos*** Cambialo por tu propio mensaje*

INHABILITAR CLIC DERECHO PARA EVITAR COPIA

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

CÓDIGO PARA PONER UNA IMAGEN PERSONALIZADA AL CURSOR EN TU WEB

Copia el código y pégalo en un widget html/texto

*La imagen del cursor debe de tener unas medidas de unos 50x50px máximo 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

PONER EL COPYRIGTH DE TU PÁGINA MÁS EL AÑO DE CREACIÓN MÁS EL AÑO ACTUAL *SE ACTUALIZA AUTOMÁTICAMENTE CADA AÑO*

copia y pega el código en el footer de tu web ejemplo de como se ve en la foto:

PONER UN CUADRO CON ENLACES EN TU BLOG O WEB

Copia este código y cambia mis URLS y títulos por los tuyos

Habilitar clic derecho en páginas 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

Copia y pega el siguiente código javascript en TEMA/PERSONALIZAR/EDICIÓN HTML justo encima de el cierre de body en BLOGGER WordPress y Jimdo se coloca en el head

Donde dice FREE TUBES SilviaMS digital ARTS Bienvenidos* Cambialo por tu propio mensaje*

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

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

PONER EL COPYRIGTH DE TU PÁGINA MÁS EL AÑO DE CREACIÓN MÁS EL AÑO ACTUAL SE ACTUALIZA AUTOMÁTICAMENTE CADA AÑO