Добавлен анимационный ролик - Буба учит цвета
This commit is contained in:
parent
413b64acdf
commit
f8bec73dec
651
episode1.html
Normal file
651
episode1.html
Normal file
@ -0,0 +1,651 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Буба учит цвета — Эпизод 1</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Comic Sans MS', 'Arial', sans-serif;
|
||||
overflow: hidden;
|
||||
background: #87CEEB;
|
||||
}
|
||||
|
||||
.scene {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Небо */
|
||||
.sky {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60%;
|
||||
background: linear-gradient(to bottom, #87CEEB 0%, #B0E0F6 100%);
|
||||
}
|
||||
|
||||
/* Солнце */
|
||||
.sun {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #FFD700;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 60px #FFD700, 0 0 100px #FFA500;
|
||||
animation: sunPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes sunPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
/* Облака */
|
||||
.cloud {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50px;
|
||||
animation: cloudMove 20s linear infinite;
|
||||
}
|
||||
|
||||
.cloud::before, .cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cloud1 { width: 120px; height: 50px; top: 60px; left: -120px; }
|
||||
.cloud1::before { width: 60px; height: 60px; top: -30px; left: 20px; }
|
||||
.cloud1::after { width: 50px; height: 50px; top: -20px; left: 50px; }
|
||||
|
||||
.cloud2 { width: 100px; height: 40px; top: 120px; left: -100px; animation-delay: 8s; }
|
||||
.cloud2::before { width: 50px; height: 50px; top: -25px; left: 15px; }
|
||||
.cloud2::after { width: 40px; height: 40px; top: -15px; left: 40px; }
|
||||
|
||||
@keyframes cloudMove {
|
||||
0% { left: -150px; }
|
||||
100% { left: 100vw; }
|
||||
}
|
||||
|
||||
/* Земля */
|
||||
.ground {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
background: linear-gradient(to bottom, #90EE90 0%, #228B22 100%);
|
||||
border-radius: 50% 50% 0 0 / 20% 20% 0 0;
|
||||
}
|
||||
|
||||
/* Дерево */
|
||||
.tree {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.tree-trunk {
|
||||
width: 30px;
|
||||
height: 80px;
|
||||
background: #8B4513;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tree-top {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #228B22;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
animation: treeSway 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes treeSway {
|
||||
0%, 100% { transform: rotate(-5deg); }
|
||||
50% { transform: rotate(5deg); }
|
||||
}
|
||||
|
||||
/* Река */
|
||||
.river {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
width: 250px;
|
||||
height: 80px;
|
||||
background: linear-gradient(to right, #4169E1, #87CEEB);
|
||||
border-radius: 50%;
|
||||
animation: riverFlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes riverFlow {
|
||||
0%, 100% { transform: scaleX(1); }
|
||||
50% { transform: scaleX(1.05); }
|
||||
}
|
||||
|
||||
/* Персонаж - Буба (медвежонок) */
|
||||
.buba {
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.buba-body {
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
background: #8B4513;
|
||||
border-radius: 50% 50% 45% 45%;
|
||||
position: relative;
|
||||
animation: bubaBounce 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bubaBounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.buba-head {
|
||||
width: 90px;
|
||||
height: 85px;
|
||||
background: #8B4513;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -70px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.buba-ear {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #8B4513;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.buba-ear.left { left: 5px; }
|
||||
.buba-ear.right { right: 5px; }
|
||||
|
||||
.buba-ear-inner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #DEB887;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.buba-eye {
|
||||
width: 18px;
|
||||
height: 22px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
animation: blink 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.buba-eye.left { left: 20px; }
|
||||
.buba-eye.right { right: 20px; }
|
||||
|
||||
@keyframes blink {
|
||||
0%, 45%, 55%, 100% { transform: scaleY(1); }
|
||||
50% { transform: scaleY(0.1); }
|
||||
}
|
||||
|
||||
.buba-pupil {
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
background: #2D2D44;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.buba-snout {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: #DEB887;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.buba-nose {
|
||||
width: 20px;
|
||||
height: 15px;
|
||||
background: #2D2D44;
|
||||
border-radius: 50% 50% 40% 40%;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.buba-mouth {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 3px solid #2D2D44;
|
||||
border-color: transparent transparent #2D2D44 transparent;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.buba-arm {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
background: #8B4513;
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.buba-arm.left { left: -15px; transform: rotate(20deg); }
|
||||
.buba-arm.right { right: -15px; transform: rotate(-20deg); }
|
||||
|
||||
.buba-leg {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: #8B4513;
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
.buba-leg.left { left: 15px; }
|
||||
.buba-leg.right { right: 15px; }
|
||||
|
||||
/* Объекты для цветов */
|
||||
.object {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.object.show {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Яблоко - красное */
|
||||
.apple {
|
||||
bottom: 150px;
|
||||
left: 200px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: radial-gradient(circle at 30% 30%, #FF6B6B, #C41E3A);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.apple::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 25px;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
background: #8B4513;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.apple::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 30px;
|
||||
width: 25px;
|
||||
height: 15px;
|
||||
background: #228B22;
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
/* Солнце жёлтое (дополнительное) */
|
||||
.sun-small {
|
||||
bottom: 200px;
|
||||
right: 350px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: radial-gradient(circle at 30% 30%, #FFFF99, #FFD700);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 30px #FFD700;
|
||||
}
|
||||
|
||||
/* Трава - зелёная */
|
||||
.grass {
|
||||
bottom: 80px;
|
||||
left: 30%;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
background: linear-gradient(to bottom, #32CD32, #228B22);
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
/* Река - синяя */
|
||||
.river-blue {
|
||||
bottom: 60px;
|
||||
right: 100px;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right, #1E90FF, #4169E1, #1E90FF);
|
||||
border-radius: 50%;
|
||||
animation: wave 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0%, 100% { transform: scaleY(1); }
|
||||
50% { transform: scaleY(1.2); }
|
||||
}
|
||||
|
||||
/* Текст песни */
|
||||
.song-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-shadow: 3px 3px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.song-text.show {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Контролы */
|
||||
.controls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 25px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: scale(1.1);
|
||||
background: #FFD700;
|
||||
}
|
||||
|
||||
.btn-play {
|
||||
background: #FF6B9D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Прогресс бар */
|
||||
.progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #FF6B9D, #FFD700, #32CD32, #4169E1);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Финальная сцена */
|
||||
.dance-mode .buba {
|
||||
animation: dance 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes dance {
|
||||
0%, 100% { transform: translateX(-50%) rotate(-10deg); }
|
||||
50% { transform: translateX(-50%) rotate(10deg); }
|
||||
}
|
||||
|
||||
.dance-mode .object {
|
||||
animation: bounce 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
.final-text {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(0);
|
||||
font-size: 56px;
|
||||
font-weight: bold;
|
||||
color: #FFD700;
|
||||
text-shadow: 3px 3px 0 #FF6B9D;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.final-text.show {
|
||||
transform: translateX(-50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scene" id="scene">
|
||||
<!-- Небо -->
|
||||
<div class="sky"></div>
|
||||
|
||||
<!-- Солнце -->
|
||||
<div class="sun"></div>
|
||||
|
||||
<!-- Облака -->
|
||||
<div class="cloud cloud1"></div>
|
||||
<div class="cloud cloud2"></div>
|
||||
|
||||
<!-- Земля -->
|
||||
<div class="ground"></div>
|
||||
|
||||
<!-- Дерево -->
|
||||
<div class="tree">
|
||||
<div class="tree-top"></div>
|
||||
<div class="tree-trunk"></div>
|
||||
</div>
|
||||
|
||||
<!-- Река -->
|
||||
<div class="river"></div>
|
||||
|
||||
<!-- Буба -->
|
||||
<div class="buba" id="buba">
|
||||
<div class="buba-body">
|
||||
<div class="buba-head">
|
||||
<div class="buba-ear left"><div class="buba-ear-inner"></div></div>
|
||||
<div class="buba-ear right"><div class="buba-ear-inner"></div></div>
|
||||
<div class="buba-eye left"><div class="buba-pupil"></div></div>
|
||||
<div class="buba-eye right"><div class="buba-pupil"></div></div>
|
||||
<div class="buba-snout">
|
||||
<div class="buba-nose"></div>
|
||||
<div class="buba-mouth"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buba-arm left"></div>
|
||||
<div class="buba-arm right"></div>
|
||||
<div class="buba-leg left"></div>
|
||||
<div class="buba-leg right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Объекты -->
|
||||
<div class="object apple" id="apple"></div>
|
||||
<div class="object sun-small" id="sunSmall"></div>
|
||||
<div class="object grass" id="grass"></div>
|
||||
<div class="object river-blue" id="riverBlue"></div>
|
||||
|
||||
<!-- Текст песни -->
|
||||
<div class="song-text" id="songText"></div>
|
||||
|
||||
<!-- Финальный текст -->
|
||||
<div class="final-text" id="finalText">🎉 Молодцы! 🎉</div>
|
||||
|
||||
<!-- Прогресс -->
|
||||
<div class="progress">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
</div>
|
||||
|
||||
<!-- Контролы -->
|
||||
<div class="controls">
|
||||
<button class="btn btn-play" onclick="playEpisode()">▶ Играть</button>
|
||||
<button class="btn" onclick="resetEpisode()">↺ Заново</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentStep = 0;
|
||||
let isPlaying = false;
|
||||
|
||||
const steps = [
|
||||
{
|
||||
object: 'apple',
|
||||
text: '🔴 Красный, красный — яблочко!',
|
||||
color: '#C41E3A'
|
||||
},
|
||||
{
|
||||
object: 'sunSmall',
|
||||
text: '🟡 Жёлтый — солнышко!',
|
||||
color: '#FFD700'
|
||||
},
|
||||
{
|
||||
object: 'grass',
|
||||
text: '🟢 Зелёный — травушка!',
|
||||
color: '#32CD32'
|
||||
},
|
||||
{
|
||||
object: 'riverBlue',
|
||||
text: '🔵 Синий — речушка!',
|
||||
color: '#4169E1'
|
||||
}
|
||||
];
|
||||
|
||||
function showStep(stepIndex) {
|
||||
const step = steps[stepIndex];
|
||||
const obj = document.getElementById(step.object);
|
||||
const text = document.getElementById('songText');
|
||||
|
||||
// Показать объект
|
||||
obj.classList.add('show');
|
||||
|
||||
// Показать текст
|
||||
text.textContent = step.text;
|
||||
text.style.color = step.color;
|
||||
text.style.textShadow = `3px 3px 0 ${step.color}, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333`;
|
||||
text.classList.add('show');
|
||||
|
||||
// Обновить прогресс
|
||||
const progress = ((stepIndex + 1) / steps.length) * 100;
|
||||
document.getElementById('progressBar').style.width = progress + '%';
|
||||
|
||||
// Скрыть текст через 2.5 секунды
|
||||
setTimeout(() => {
|
||||
text.classList.remove('show');
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
function playEpisode() {
|
||||
if (isPlaying) return;
|
||||
isPlaying = true;
|
||||
|
||||
const playBtn = document.querySelector('.btn-play');
|
||||
playBtn.textContent = '⏸ Играет...';
|
||||
playBtn.disabled = true;
|
||||
|
||||
let step = 0;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (step < steps.length) {
|
||||
showStep(step);
|
||||
step++;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
finishEpisode();
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function finishEpisode() {
|
||||
const scene = document.getElementById('scene');
|
||||
const finalText = document.getElementById('finalText');
|
||||
|
||||
scene.classList.add('dance-mode');
|
||||
finalText.classList.add('show');
|
||||
|
||||
const playBtn = document.querySelector('.btn-play');
|
||||
playBtn.textContent = '✅ Сыграно';
|
||||
playBtn.disabled = false;
|
||||
}
|
||||
|
||||
function resetEpisode() {
|
||||
currentStep = 0;
|
||||
isPlaying = false;
|
||||
|
||||
// Скрыть все объекты
|
||||
document.querySelectorAll('.object').forEach(obj => {
|
||||
obj.classList.remove('show');
|
||||
});
|
||||
|
||||
// Скрыть тексты
|
||||
document.getElementById('songText').classList.remove('show');
|
||||
document.getElementById('finalText').classList.remove('show');
|
||||
|
||||
// Убрать танец
|
||||
document.getElementById('scene').classList.remove('dance-mode');
|
||||
|
||||
// Сбросить прогресс
|
||||
document.getElementById('progressBar').style.width = '0%';
|
||||
|
||||
const playBtn = document.querySelector('.btn-play');
|
||||
playBtn.textContent = '▶ Играть';
|
||||
playBtn.disabled = false;
|
||||
}
|
||||
|
||||
// Автовоспроизведение при загрузке
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(playEpisode, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user