Memorias de una bibliófila: Tutoriales

Hola a todas

Como compartir es de guapas iré actualizando esta página con diversos tutoriales de la personalización que tengo en mi blog Widgets y demás, no dudeis en preguntarme si teneis curiosidad por alguno, ¡intentaré explicarlos lo mejor posible!

∘₊✧──────────────────✧₊∘

Tutorial disco giratorio con música:

Aquí está el código:

<img id="cd"

src="TU URL DE IMAGEN" />

▶

</div>

</source></video>

</div>

<style>

.cd-player{

width:190px;

margin:auto;

position:relative;

}

#cd{

width:190px;

display:block;

margin:auto;

animation:spin 10s linear infinite;

}

#centerBtn{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:34px;

height:32px;

border-radius:50%;

background:rgba(255,255,255,.75);

backdrop-filter:blur(3px);

border:3px solid rgba(255,255,255,.6);

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

font-size:26px;

color:#666;

transition:.25s;

}

#centerBtn:hover{

transform:translate(-50%,-50%) scale(1.08);

}

.fast{

animation-duration:5s !important;

}

@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

</style>

const music=document.getElementById("music");

const btn=document.getElementById("centerBtn");

const cd=document.getElementById("cd");

btn.onclick=()=>{

if(music.paused){

music.play();

btn.innerHTML="❚❚";

cd.classList.add("fast");

}else{

music.pause();

btn.innerHTML="▶";

cd.classList.remove("fast");

}

music.onended=()=>{

btn.innerHTML="▶";

cd.classList.remove("fast");

}

</script>

Consejitos para la imagen, es fácil encontrarla en pinterest buscando la serie/película de preferencia + CD.

El fondo de la imagen se puede quitar con una web, yo uso esta: https://www.iloveimg.com/es/eliminar-fondo .

Para meter la URL de la imagen en el código un truco es tener una entrada de tu blog, como borrador, donde coloques todas las imágenes de estos proyectos y como en cualquier otra página en tu editor esa entrada sin publicar, botón derecho sobre la imagen, abrir en una ventana nueva.

Para la URL del MP4, recomiendo descargar el video de youtube y meterlo en una página como esta https://screenapp.io/es/features/video-to-url-link-converter

dentro del código:

.cd-player{

width:190px;

margin:auto;

position:relative;

}

#cd{

width:190px;

display:block;

margin:auto;

animation:spin 10s linear infinite;

Cambia lo elementos subrayados, par aumentar o reducir el tamaño, los dos al mismo número.

Y ya estaría, ¡a disfrutar!

∘₊✧──────────────────✧₊∘

Tutorial de lienzo de dibujo:

<style>

#igariPaint{

width:100%;

max-width:200px;

margin:auto;

border:2px solid #444;

background:#d4d0c8;

font-family:Tahoma,Arial,sans-serif;

box-shadow:4px 4px 0 #777;

overflow:hidden;

}

/* HEADER */

#paintTitle{

background:#733861;

color:#fff;

padding:3px 6px;

display:flex;

justify-content:space-between;

font-size:12px;

font-weight:bold;

}

/* MENU */

#paintMenu{

background:#ece9d8;

padding:3px 6px;

font-size:11px;

border-bottom:2px solid #999;

display:flex;

justify-content:space-between;

}

/* CANVAS */

#canvasWrap{

width:100%;

position:relative;

padding-top:100%;

overflow:hidden;

}

#paintCanvas{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

display:block;

background:#fff;

cursor:crosshair;

touch-action:none;

box-shadow: inset 0 0 0 1px #bbb;

}

/* TOOLBAR */

#toolbar{

background:#d8c2b8 !important;

padding:6px;

text-align:center;

}

/* PALETA */

#palette{

display:none;

text-align:center;

margin-bottom:6px;

}

.palette-row{

display:block;

margin:2px 0;

}

/* 🎨 COLORES REALMENTE MÁS GRANDES (VISIBLE EN BLOGGER) */

.color{

width:25px !important;

height:25px !important;

display:inline-block;

margin:1px;

border:1px solid #555;

box-shadow:

inset 1px 1px #fff,

inset -1px -1px #888;

cursor:pointer;

}

/* 🎚️ SLIDER REALMENTE VISIBLE */

#size{

width:120px;

display:block;

margin:6px auto;

accent-color:#8f1d1d;

background:#f2eee8 !important;

border:1px solid #b8b0a8;

border-radius:10px;

height:10px;

}

#togglePalette{

display:block;

margin:4px auto 0;

}

</style>

<div>🍋 Dibuja</div>

</div>

<button onclick="clearCanvas()">Clear</button>

</div>

</div>

</div>

</div>

</div>

<button id="togglePalette" onclick="togglePalette()">🎨 Paleta</button>

</div>

const c=document.getElementById("paintCanvas");

const x=c.getContext("2d");

function resizeCanvas(){

c.width=c.offsetWidth;

c.height=c.offsetHeight;

x.lineCap="round";

x.lineJoin="round";

}

window.addEventListener("resize",resizeCanvas);

resizeCanvas();

let drawing=false,color="#000",lx=0,ly=0;

function setColor(v){color=v;}

function togglePalette(){

const p=document.getElementById("palette");

p.style.display = (p.style.display==="block") ? "none" : "block";

}

/* CURSOR FIX */

function pos(e){

const rect=c.getBoundingClientRect();

const clientX = e.touches ? e.touches[0].clientX : e.clientX;

const clientY = e.touches ? e.touches[0].clientY : e.clientY;

return {

x:(clientX-rect.left)*(c.width/rect.width),

y:(clientY-rect.top)*(c.height/rect.height)

};

}

c.onmousedown=e=>{drawing=true;let p=pos(e);lx=p.x;ly=p.y};

c.onmouseup=()=>drawing=false;

c.onmouseleave=()=>drawing=false;

c.onmousemove=e=>{

if(!drawing)return;

let p=pos(e);

x.strokeStyle=color;

x.lineWidth=document.getElementById("size").value;

x.beginPath();

x.moveTo(lx,ly);

x.lineTo(p.x,p.y);

x.stroke();

lx=p.x;ly=p.y;

};

c.addEventListener("touchstart",e=>{

drawing=true;let p=pos(e);lx=p.x;ly=p.y;

});

c.addEventListener("touchmove",e=>{

e.preventDefault();

if(!drawing)return;

let p=pos(e);

x.strokeStyle=color;

x.lineWidth=document.getElementById("size").value;

x.beginPath();

x.moveTo(lx,ly);

x.lineTo(p.x,p.y);

x.stroke();

lx=p.x;ly=p.y;

},{passive:false});

c.addEventListener("touchend",()=>drawing=false);

function clearCanvas(){

x.clearRect(0,0,c.width,c.height);

}

function saveCanvas(){

let a=document.createElement("a");

a.href=c.toDataURL("image/png");

a.download="igari-paint.png";

a.click();

}

</script>

∘₊✧──────────────────✧₊∘

Tutorial de contador de tiempo:

∘₊✧──────────────────✧₊∘

Tutorial de Imagen amasable (acariciar conejito):

</div>

<style>

.squish-cat img {

width: 180px;

transition: transform 0.12s ease-out;

transform-origin: center bottom;

cursor: grab;

}

.squish-cat img:active {

cursor: grabbing;

}

</style>

const cat = document.getElementById("catImg");

cat.addEventListener("mousemove", function(e) {

const rect = cat.getBoundingClientRect();

const y = e.clientY - rect.top;

const centerY = rect.height / 2;

const distY = Math.abs(y - centerY) / centerY;

const scaleX = 1 + (distY * 0.15);

const scaleY = 1 - (distY * 0.15);

cat.style.transform = `scale(${scaleX}, ${scaleY})`;

});

cat.addEventListener("mouseleave", function() {

cat.style.transform = "scale(1,1)";

});

</script>

¡Puede ser cualquier imagen sin fondo!

∘₊✧──────────────────✧₊∘

Tutorial de recientes en letterboxd:

Entras a esta página web: https://letterboxd-embed.timcieplowski.com/

Introduces tu usuario de letterboxd en el recuadro blanco.

Te aparecerá una lista con tus películas recientes, copia el primer código y pégalo en tu sección de Widget/HTML

¡Y listo!

El código siempre le puedes retocar para cambiar el color de fondo o incluso que tenga barra para hacer scroll eso ya es personalizarlo a tu gusto.

∘₊✧──────────────────✧₊∘

Memorias de una bibliófila

Páginas

my top reading books

Tutoriales

No hay comentarios:

Publicar un comentario

Título

Páginas

my top reading books

Seremos el Huracán

Iria G. Parente y Selene M. Pascual

Summary

La canción de Aquiles

Madeline Miller

Summary

Orgullo y prejuicio

Jane Austen

Summary

Crepúsculo

Stephenie Meyer

Summary

Donde viven las musas

Marianela Dos Santos

Summary

El dragón rojo

Thomas Harris

Summary

Tutoriales

No hay comentarios:

Publicar un comentario

Título