Tutorial del libro del hear me out
HOLISSS, Aquí esta el tuto del hear me out para que puedan ponerlo en su blogsito :3. Yo puse 11 imágenes pero se puede poner las que sean. Hay colores cambiables como la portada, la barra por el que querais...
<script src="https://cdn.jsdelivr.net/npm/page-flip@2.0.7/dist/js/page-flip.browser.js"></script>
<style>
/* Estilos de la Portada Rojo con Pegatinas */
.sketchbook-cover-btn {
width: 180px;
height: 240px;
background: #8c001a;
border-left: 12px solid #84b3ce;
border-radius: 6px 14px 14px 6px;
box-shadow: 4px 6px 15px rgba(0,0,0,0.3), inset -2px 0 5px rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 20px auto;
position: relative;
user-select: none;
overflow: hidden;
}
.sketchbook-cover-btn:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 6px 10px 20px rgba(0,0,0,0.4);
}
.sketchbook-title {
color: #ffffff;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 1rem;
letter-spacing: 1px;
text-align: center;
border: 2px dashed #a0714f;
padding: 8px 12px;
border-radius: 8px;
background: rgba(43, 26, 14, 0.4);
z-index: 2;
}
/* Pegatinas decorativas */
.sticker {
position: absolute;
z-index: 1;
pointer-events: none;
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.3));
}
.sticker-top-left { top: 10px; left: 15px; font-size: 22px; transform: rotate(-15deg); }
.sticker-top-right { top: 15px; right: 12px; font-size: 26px; transform: rotate(12deg); }
.sticker-bottom-left { bottom: 12px; left: 18px; font-size: 24px; transform: rotate(20deg); }
.sticker-bottom-right { bottom: 10px; right: 10px; font-size: 22px; transform: rotate(-10deg); }
.sticker-center-top { top: 48px; left: 50%; transform: translateX(-50%) rotate(-5deg); font-size: 18px; }
/* Modal a Pantalla Completa */
.sb-modal-overlay {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(20, 15, 12, 0.92);
backdrop-filter: blur(5px);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.sb-modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
/* Botón de Cerrar */
.sb-close-btn {
position: absolute;
top: 25px; right: 30px;
background: #ff758c;
color: #ffffff;
border: none;
font-size: 16px;
font-weight: bold;
padding: 8px 18px;
border-radius: 20px;
cursor: pointer;
z-index: 100000;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
font-family: sans-serif;
}
/* Contenedor e Interior de las Páginas */
.flipbook-container {
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.page-node {
background-color: #fdfaf6;
background-image: radial-gradient(#e5d9cc 1px, transparent 1px);
background-size: 16px 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px;
box-sizing: border-box;
border: 1px solid #e0d5c8;
}
.page-node img {
max-width: 100%;
max-height: 80%;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.caption-text {
font-family: 'Courier New', monospace;
font-size: 13px;
color: #4a3b32;
margin-top: 10px;
text-align: center;
}
/* Página Final */
.social-page {
text-align: center;
font-family: 'Courier New', monospace, sans-serif;
color: #4a3b32;
padding: 20px;
}
.social-page h3 { font-size: 1.2rem; margin-bottom: 10px; color: #ff6b81; }
.social-page p { font-size: 0.85rem; margin-bottom: 20px; line-height: 1.4; color: #555; }
.social-btn-insta {
display: block;
background: #ff758c;
color: #fff !important;
text-decoration: none;
padding: 10px 15px;
border-radius: 20px;
font-weight: bold;
font-size: 0.85rem;
box-shadow: 0 3px 8px rgba(255, 117, 140, 0.4);
transition: transform 0.2s, background 0.2s;
}
.social-btn-insta:hover {
background: #ff5277;
transform: scale(1.03);
}
</style>
<div class="sketchbook-cover-btn" onclick="openSketchbook()">
<span class="sticker sticker-top-left">🍓</span>
<span class="sticker sticker-top-right">🐰</span>
<span class="sticker sticker-bottom-left">💖</span>
<span class="sticker sticker-bottom-right">🦄</span>
<span class="sticker sticker-center-top">🎀</span>
<div class="sketchbook-title">
HEAR ME OUT<br/>
<span style="font-size:9px; font-weight:normal; color:#ffd1dc;">Haz clic aquí</span>
</div>
</div>
<div id="sketchbookModal" class="sb-modal-overlay">
<button class="sb-close-btn" onclick="closeSketchbook()">✕ Cerrar</button>
<div id="bookContainer" class="flipbook-container">
<div class="page-node" style="background:#5c3a21; color:#f7e1d7; justify-content:center;">
<h2 style="font-family:'Courier New', monospace; letter-spacing:2px; text-align:center;">MY HEAR ME OUT LIST 👀</h2>
<p style="font-size:12px; opacity:0.8;">Desliza para ver ➔</p>
</div>
<div class="page-node">
<img src="URL DE LA IMAGEN" alt="Chico 1" />
<p class="caption-text">1. NOMBRE / DeTALLESt</p>
</div>
<div class="page-node">
<img src="URL DE LA IMAGEN" alt="Chico 2" />
<p class="caption-text">2. NOMBRE / DETALLES</p>
</div>
<div class="page-node">
<img src="URL DE LA IMAGEN" alt="Chico 3" />
<p class="caption-text">3. NOMBRE / DETALLES"</p>
</div>
<div class="page-node">
<img src="URL DE LA IMAGEN" alt="Chico 4" />
<p class="caption-text">4. NOMBRE / DETALLES</p>
</div>
<div class="page-node">
<img src="URL DE LA IMAGEN alt="Chico 5" />
<p class="caption-text">5. NOMBRE / DETALLES</p>
</div>
<div class="page-node social-page">
<h3>¿Concuerdas con alguno? </h3>
<p>Déjame saber tu opinión o dime quiénes son tus "Hear me out":</p>
<div style="width: 100%;">
<a href="URL DE TU INSTAGRAM" target="_blank" class="social-btn-insta">📸 Mi Instagram</a>
</div>
</div>
<div class="page-node" style="background:#5c3a21; color:#f7e1d7; justify-content:center;">
<p style="font-family:'Courier New', monospace; font-size:12px; opacity:0.7;">~ Fin ~</p>
</div>
</div>
</div>
<script>
let pageFlip = null;
function openSketchbook() {
const modal = document.getElementById('sketchbookModal');
modal.classList.add('active');
if (!pageFlip) {
let pWidth = window.innerWidth < 600 ? window.innerWidth * 0.42 : 320;
let pHeight = window.innerWidth < 600 ? pWidth * 1.35 : 440;
pageFlip = new St.PageFlip(document.getElementById('bookContainer'), {
width: pWidth,
height: pHeight,
size: "fixed",
minWidth: 200,
maxWidth: 500,
minHeight: 300,
maxHeight: 700,
maxShadowOpacity: 0.5,
showCover: true,
mobileScrollSupport: false
});
pageFlip.loadFromHTML(document.querySelectorAll('.page-node'));
}
}
function closeSketchbook() {
document.getElementById('sketchbookModal').classList.remove('active');
}
</script>
Vale para empezar, las partes en amarillo son los colores de la portada y la barra lateral, se pueden cambiar los colores de dentro de la página como las fuentes.Al poner las URL de las imágenes es preferible que sea larga verticalmente como un folio y solo copiar la dirección de imagen para tener directamente en enlace sin descargar nada, solo puse 5 huecos pero se pueden poner poner los que sea copiando debajo esto:
<div class="page-node">
<img src="URL DE LA IMAGEN" alt="Chico -" />
<p class="caption-text">0. NOMBRE / DETALLES</p>
</div>
Lo que si es obligatorio esq tienen que ser al final un número impar de imágenes para que se ponga doble, por ejemplo yo tengo 11 imágenes pero son 14 páginas, es par. Porque está la portada, las imágenes, la última página del final y la parte de atrás.
Por último, la parte de Instagram no es obligatoria, simplemente habria que quitarla del Html.
Eso es todo el tuto, nos vemosss!!!
No hay comentarios:
Publicar un comentario