Melhor ferramenta criar livros online.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Livro Folheado</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
}
.book {
width: 500px;
height: 400px;
border: 5px solid pink;
position: relative;
overflow: hidden;
}
.page {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 20px;
display: none;
}
.controls {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
button {
margin: 0 10px;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="book">
<div class="page" id="page1">Valer é criar,<br>Ser amor no amar.<br><img src="https://www.litprichal.ru/upload/300/12129118a59d87d2548b69a4843e917e.gif"width="40%"></div>
<div class="page" id="page2">A verdade de mim mesmo.<br><img src="https://avatars.mds.yandex.net/i?id=ad0050d3609762892ae3d188e521147fd3e34abf-9875416-images-thumbs&n=13"width="40%"></div>
<!-- Adicione mais páginas conforme necessário -->
<div class="controls">
<button onclick="previousPage()">Anterior</button>
<span id="currentPage">1</span>/<span id="totalPages">10</span>
<button onclick="nextPage()">Próxima</button>
</div>
</div>
<script>
let currentPage = 1;
const totalPages = 10; // Altere conforme necessário
function showPage(pageNumber) {
const pages = document.querySelectorAll('.page');
pages.forEach(page => page.style.display = 'none');
document.getElementById(`page${pageNumber}`).style.display = 'block';
document.getElementById('currentPage').innerText = pageNumber;
}
function nextPage() {
if (currentPage < totalPages) {
currentPage++;
showPage(currentPage);
}
}
function previousPage() {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
}
}
document.addEventListener("DOMContentLoaded", function() {
showPage(currentPage);
});
</script>
</body>
</html>
Ferramenta criar boneco!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boneco em JavaScript</title>
</head>
<body>
<canvas id="bonecoCanvas" width="200" height="300"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById("bonecoCanvas");
const ctx = canvas.getContext("2d");
// Desenha o corpo
ctx.beginPath();
ctx.arc(100, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
// Desenha os olhos
ctx.beginPath();
ctx.arc(80, 140, 5, 0, Math.PI * 2);
ctx.arc(120, 140, 5, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
// Desenha a boca
ctx.beginPath();
ctx.arc(100, 160, 20, 0, Math.PI);
ctx.lineWidth = 3;
ctx.strokeStyle = "pink";
ctx.stroke();
ctx.closePath();
// Adiciona a frase
ctx.font = "14px Arial";
ctx.fillStyle = "red";
ctx.fillText("Espírito Poesia", 50, 200);
});
</script>
</body>
</html>
Ferramenta codigo criar desenho animado!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boneco Animado</title>
</head>
<body>
<canvas id="bonecoCanvas" width="400" height="400"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById("bonecoCanvas");
const ctx = canvas.getContext("2d");
let yPosition = 0;
function animate() {
// Limpa o canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Desenha o boneco
drawBoneco(200, 200 + yPosition);
// Adiciona a frase
ctx.font = "20px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Seja feliz, por favor", 50, 350);
// Move o boneco para cima e para baixo
yPosition += 2;
if (yPosition > 50) {
yPosition = -50;
}
// Solicita a próxima animação
requestAnimationFrame(animate);
}
// Função para desenhar o boneco
function drawBoneco(x, y) {
// Desenha o corpo
ctx.beginPath();
ctx.arc(x, y, 30, 0, Math.PI * 2);
ctx.fillStyle = "pink";
ctx.fill();
ctx.closePath();
// Desenha os olhos
ctx.beginPath();
ctx.arc(x - 10, y - 5, 4, 0, Math.PI * 2);
ctx.arc(x + 10, y - 5, 4, 0, Math.PI * 2);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
// Desenha a boca
ctx.beginPath();
ctx.arc(x, y + 5, 10, 0, Math.PI);
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.stroke();
ctx.closePath();
}
// Inicia a animação
animate();
});
</script>
</body>
</html>