FRASES MOTIVACIONALES
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frases Motivacionales</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
h1 {
font-size: 2.5rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
margin-bottom: 20px;
}
.scroller-container {
border: none;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.8);
padding: 30px;
text-align: center;
width: 80%;
max-width: 600px;
}
.scroller-text {
font-size: 24px;
font-weight: 700;
color: #333;
margin: 0;
opacity: 0;
transition: opacity 1s ease, transform 1s ease;
}
.scroller-text.visible {
opacity: 1;
transform: translateY(0);
}
.buttons {
margin-top: 20px;
}
.buttons button {
font-size: 16px;
padding: 10px 20px;
margin: 0 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.buttons button:hover {
transform: scale(1.1);
}
.pause {
background: #ff6f61;
color: #fff;
}
.resume {
background: #61a0ff;
color: #fff;
}
</style>
</head>
<body>
<h1>Frases Motivacionales</h1>
<div class="scroller-container">
<p id="scroller" class="scroller-text"></p>
<div class="buttons">
<button class="pause" onclick="pauseAnimation()">Pausar</button>
<button class="resume" onclick="resumeAnimation()">Reanudar</button>
</div>
</div>
<script>
const messages = [
"Sé un triunfador en la vida.",
"El objetivo de estudiar no es saber más, sino ignorar menos.",
"Logra el éxito: siembra hoy para cosechar mañana.",
"No esperes el momento perfecto, crea el momento perfecto.",
"La disciplina es el puente entre metas y logros.",
"No te detengas cuando estés cansado, detente cuando hayas terminado.",
"El fracaso es la oportunidad de comenzar de nuevo con más inteligencia.",
"La única manera de hacer un gran trabajo es amar lo que haces."
];
let index = 0;
let isPaused = false;
const scroller = document.getElementById('scroller');
function changeMessage() {
if (isPaused) return;
scroller.classList.remove('visible');
setTimeout(() => {
scroller.textContent = messages[index];
scroller.classList.add('visible');
index = (index + 1) % messages.length;
}, 1000);
setTimeout(changeMessage, 4000); // Cambia cada 4 segundos
}
function pauseAnimation() {
isPaused = true;
}
function resumeAnimation() {
if (isPaused) {
isPaused = false;
changeMessage();
}
}
window.onload = changeMessage;
</script>
</body>
</html>
No hay comentarios.:
Publicar un comentario