Добавлен анимационный ролик - Буба учит цвета
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