<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="robots" content="index, follow" />
<!-- Meta теги -->
<meta charset="utf-8">
<meta name="robots" content="index, follow" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Проекты команды Creozavr. Творчество как искусство познания. Создание и анимация миров и персонажей..">
<!-- // Meta теги -->
<meta property="og:url" content="https://creozavr.com">
<meta property="og:title" content="Проекты команды Creozavr"/>
<meta property="og:site_name" content="Creozavr">
<meta property="og:type" content="website">
<meta property="og:image" content="/images/misc/logo.png">
<meta property="og:description" content="Проекты команды Creozavr. Творчество как искусство познания. Создание и анимация миров и персонажей.."/>
<link rel="icon" href="/images/misc/favicon.png" type="image/png">
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<!--<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> Подвисает что-то-->
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<link href="css/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css"><!--Локальный Swiper-->
<title>Проекты команды Creozavr</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BW9BES4VPK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BW9BES4VPK');
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<!-- Логотип -->
<a class="navbar-brand" href="/">
<img src="/images/misc/logo.png" width="157" height="45" class="d-inline-block align-top" alt="Creozavr">
</a>
<!-- Кнопка для мобильных устройств -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Меню -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#epicsection">Эпические Богатыри</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mortal-underwater">Mortal Underwater</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kioria1">Kioria</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/bo.html">Брутальный остров</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<!-- Секция Эпические Богатыри. Главная сцена -->
<section id="epicsection">
<div style="background-color:#030406;">
<div class="container overflow-hidden" id="epic">
<div class="epic-help-container">
<img
src="/images/misc/about-epic.png"
width="77"
height="77"
alt="Об Эпических Богатырях"
class="epic-help-icon"
id="epicHelpTrigger">
</div>
<div class="epic-title">
<video id="epic-title-video" autoplay muted playsinline>
<source src="/images/projects/epic/common/epictitle-v1.webm" type="video/webm">
<img class="epic-title-fallback" src="/images/projects/epic/common/epictitle-v1.png" alt="Эпические Богатыри">
</video>
</div>
<script>
const video = document.getElementById('epic-title-video');
video.addEventListener('ended', () => {
setTimeout(() => video.play(), 3000);
});
</script>
<div class="epicwrap">
<div class="animation-box-krushedub krushedub"></div>
<div class="animation-box-razuhab razuhab">
<div class="drum"><img src="/images/projects/epic/razuhab/drum.png" width="135px" height="65px" alt="Drum"></div>
</div>
<div class="animation-box-burelom burelom"></div>
</div>
<div class="smoke-effect"> <img src="/images/effects/smoke-light.png" class="smoke-layer-1"> <img src="/images/effects/smoke-heavy.png" class="smoke-layer-2"> </div>
</div>
</div>
<div class="swiper-section" style="background-color: #030406; padding: 50px 0 40px 0;">
<div class="container"><h2 class="music-epic">Музыкальная деятельность Эпических Богатырей:</h2></div>
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/epic/mobile/way-mobile.jpg 1x,
/images/slides/epic/mobile/way-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/epic/desktop/way-desktop.jpg 1x,
/images/slides/epic/desktop/way-desktop@2x.jpg 2x">
<img
src="/images/slides/epic/desktop/way.jpg"
alt="Путь в дорогу. Эпические Богатыри"
class="slide-image"
loading="lazy">
</picture>
<div class="slide-caption">
<h3 class="song-title" itemscope itemtype="http://schema.org/MusicRecording">Путь в дорогу</h3>
</div>
<div class="video-overlay"
data-video-desktop="/videos/epic/desktop/way-hd.mp4"
data-video-mobile="/videos/epic/mobile/way-vertical.mp4"
data-poster-desktop="/images/video-posters/epic/desktop/way-desktop.jpg"
data-poster-mobile="/images/video-posters/epic/mobile/way-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
<div class="swiper-slide">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/epic/mobile/steel-mobile.jpg 1x,
/images/slides/epic/mobile/steel-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/epic/desktop/steel-desktop.jpg 1x,
/images/slides/epic/desktop/steel-desktop@2x.jpg 2x">
<img
src="/images/slides/epic/desktop/steel.jpg"
alt="Сталь. Эпические Богатыри"
class="slide-image"
loading="lazy">
</picture>
<div class="slide-caption">
<h3 class="song-title" itemscope itemtype="http://schema.org/MusicRecording">Так закалялись Богатыри</h3>
</div>
<div class="video-overlay"
data-video-desktop="/videos/epic/desktop/steel-hd.mp4"
data-video-mobile="/videos/epic/mobile/steel-vertical.mp4"
data-poster-desktop="/images/video-posters/epic/desktop/steel-desktop.jpg"
data-poster-mobile="/images/video-posters/epic/mobile/steel-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
<div class="swiper-slide">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/epic/mobile/vasilisa-mobile.jpg 1x,
/images/slides/epic/mobile/vasilisa-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/epic/desktop/vasilisa-desktop.jpg 1x,
/images/slides/epic/desktop/vasilisa-desktop@2x.jpg 2x">
<img
src="/images/slides/epic/desktop/vasilisa.jpg"
alt="Василиса. Эпические Богатыри"
class="slide-image"
loading="lazy">
</picture>
<div class="slide-caption">
<h3 class="song-title" itemscope itemtype="http://schema.org/MusicRecording">Шлягер, посвященный Василисе</h3>
</div>
<div class="video-overlay"
data-video-desktop="/videos/epic/desktop/vasilisa-hd.mp4"
data-video-mobile="/videos/epic/mobile/vasilisa-vertical.mp4"
data-poster-desktop="/images/video-posters/epic/desktop/vasilisa-desktop.jpg"
data-poster-mobile="/images/video-posters/epic/mobile/vasilisa-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
<div class="swiper-slide">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/epic/mobile/storm-mobile.jpg 1x,
/images/slides/epic/mobile/storm-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/epic/desktop/storm-desktop.jpg 1x,
/images/slides/epic/desktop/storm-desktop@2x.jpg 2x">
<img
src="/images/slides/epic/desktop/storm.jpg"
alt="Шторм. Эпические Богатыри"
class="slide-image"
loading="lazy">
</picture>
<div class="slide-caption">
<h3 class="song-title" itemscope itemtype="http://schema.org/MusicRecording">Шторм</h3>
</div>
<div class="video-overlay"
data-video-desktop="/videos/epic/desktop/storm-hd.mp4"
data-video-mobile="/videos/epic/mobile/storm-vertical.mp4"
data-poster-desktop="/images/video-posters/epic/desktop/storm-desktop.jpg"
data-poster-mobile="/images/video-posters/epic/mobile/storm-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
<div class="swiper-slide">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/epic/mobile/duma-mobile.jpg 1x,
/images/slides/epic/mobile/duma-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/epic/desktop/duma-desktop.jpg 1x,
/images/slides/epic/desktop/duma-desktop@2x.jpg 2x">
<img
src="/images/slides/epic/desktop/duma.jpg"
alt="Былое и Дума. Эпические Богатыри"
class="slide-image"
loading="lazy">
</picture>
<div class="slide-caption">
<h3 class="song-title" itemscope itemtype="http://schema.org/MusicRecording">Былое и Дума</h3>
</div>
<div class="video-overlay"
data-video-desktop="/videos/epic/desktop/duma-hd.mp4"
data-video-mobile="/videos/epic/mobile/duma-vertical.mp4"
data-poster-desktop="/images/video-posters/epic/desktop/duma-desktop.jpg"
data-poster-mobile="/images/video-posters/epic/mobile/duma-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
<div class="swiper-slide">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/epic/mobile/salary-mobile.jpg 1x,
/images/slides/epic/mobile/salary-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/epic/desktop/salary-desktop.jpg 1x,
/images/slides/epic/desktop/salary-desktop@2x.jpg 2x">
<img
src="/images/slides/epic/desktop/salary.jpg"
alt="Песня о зарплате. Эпические Богатыри"
class="slide-image"
loading="lazy">
</picture>
<div class="slide-caption">
<h3 class="song-title" itemscope itemtype="http://schema.org/MusicRecording">Песня о работе и зарплате</h3>
</div>
<div class="video-overlay"
data-video-desktop="/videos/epic/desktop/salary-hd.mp4"
data-video-mobile="/videos/epic/mobile/salary-vertical.mp4"
data-poster-desktop="/images/video-posters/epic/desktop/salary-desktop.jpg"
data-poster-mobile="/images/video-posters/epic/mobile/salary-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-epic"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<div class="epic-help-popup" id="epicHelpPopup">
<div class="popup-content">
<button class="popup-close">×</button>
<div class="popup-body">
<p>Приключения легендарных Эпических Богатырей на просторах колхозной Земли Русской.. В состав группы входит:<br />Бурелом - фронтмэн, в музыкальном арсенале классическая гитара и свирель..
<br />Крушедуб - электрогитара </p>
</div>
</div>
</div>
</section>
<!-- Конец секции Эпические Богатыри -->
<!-- Video Modal для всех видео. Логика выстраивается через JS -->
<div id="videoModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="plyr-container">
<video id="plyr-video" playsinline controls data-poster="/images/video-posters/default.jpg">
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
<!-- Секция Mortal Underwater -->
<section id="mortal-underwater">
<div class="m-u">
<div class="mortal-underwater-title"><img src="images/projects/mortal-underwater/title/TitleIntro0001.png" alt="Mortal Underwater" /></div>
<div class="caustics-overlay"></div>
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00);max-width: 1280px; max-height: 720px;">
<canvas id="canvas" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);max-width: 1280px;"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</div>
<!--Второй свайпер mortal-underwater-->
<div class="swiper-section" style="padding: 0 0 40px 0;">
<div class="container">
<div class="swiper-container-mortal">
<div class="swiper-wrapper-mortal">
<div class="swiper-slide-mortal">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/mortal-underwater/mobile/ep3-mobile.jpg 1x,
/images/slides/mortal-underwater/mobile/ep3-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/mortal-underwater/desktop/ep3-desktop.jpg 1x,
/images/slides/mortal-underwater/desktop/ep3-desktop@2x.jpg 2x">
<img
src="/images/slides/mortal-underwater/desktop/ep3.jpg"
alt="Mortal Underwater. Episode 3"
class="slide-image"
loading="lazy">
</picture>
<div class="video-overlay"
data-video-desktop="/videos/mortal-underwater/desktop/ep3-hd.mp4"
data-video-mobile="/videos/mortal-underwater/desktop/ep3-hd.mp4"
data-poster-desktop="/images/video-posters/mortal-underwater/desktop/ep3-desktop.jpg"
data-poster-mobile="/images/video-posters/mortal-underwater/mobile/ep3-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
<div class="swiper-slide-mortal">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/mortal-underwater/mobile/ep1-mobile.jpg 1x,
/images/slides/mortal-underwater/mobile/ep1-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/mortal-underwater/desktop/ep1-desktop.jpg 1x,
/images/slides/mortal-underwater/desktop/ep1-desktop@2x.jpg 2x">
<img
src="/images/slides/mortal-underwater/desktop/ep1.jpg"
alt="Mortal Underwater. Episode 1"
class="slide-image"
loading="lazy">
</picture>
<div class="video-overlay"
data-video-desktop="/videos/mortal-underwater/desktop/ep1-hd.mp4"
data-video-mobile="/videos/mortal-underwater/desktop/ep1-hd.mp4"
data-poster-desktop="/images/video-posters/mortal-underwater/desktop/ep1-desktop.jpg"
data-poster-mobile="/images/video-posters/mortal-underwater/mobile/ep1-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
<div class="swiper-slide-mortal">
<picture>
<source
media="(max-width: 767px)"
srcset="/images/slides/mortal-underwater/mobile/ep2-mobile.jpg 1x,
/images/slides/mortal-underwater/mobile/ep2-mobile@2x.jpg 2x">
<source
media="(min-width: 768px)"
srcset="/images/slides/mortal-underwater/desktop/ep2-desktop.jpg 1x,
/images/slides/mortal-underwater/desktop/ep2-desktop@2x.jpg 2x">
<img
src="/images/slides/mortal-underwater/desktop/ep2.jpg"
alt="Mortal Underwater. Episode 2"
class="slide-image"
loading="lazy">
</picture>
<div class="video-overlay"
data-video-desktop="/videos/mortal-underwater/desktop/ep2-hd.mp4"
data-video-mobile="/videos/mortal-underwater/desktop/ep2-hd.mp4"
data-poster-desktop="/images/video-posters/mortal-underwater/desktop/ep2-desktop.jpg"
data-poster-mobile="/images/video-posters/mortal-underwater/mobile/ep2-mobile.jpg">
<img
src="/images/misc/play-button.png"
alt="Play"
class="play-button"
width="80"
height="80">
</div>
</div>
</div>
<div class="swiper-pagination-mortal"></div>
<div class="swiper-button-prev-mortal"></div>
<div class="swiper-button-next-mortal"></div>
</div>
</div>
</div>
</section>
<!--Конец Секция Mortal Underwater -->
<!-- Kioria 1 -->
<section id="kioria1">
<div class="kioria-wrap">
<div class="kioria-game-iframe"><div class="loading-kioria">Игра загружается <span class="loader"></span></div>
<iframe data-src="/projects/kioria1/index.html"
allowfullscreen
allow="autoplay; fullscreen"
frameborder="0"
scrolling="no"
tabindex="-1"></iframe>
</div>
</div>
</section>
<!-- Конец секции Kioria 1 -->
</main>
<footer style="background: linear-gradient(to right, #3a4a6b, #6b7b9b); padding: 30px 0; text-align: center; color: white;">
<div class="container">
<p>
Творчество как искусство познания | <span id="current-year"></span><br />
Последний оплот добра, что свет не обойдёт стороной
</p>
<a href="https://youtube.com/creozavr" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
</svg>
</a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Подключаю остальные скрипты на главной -->
<!--<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> Подвисает. Нужно разобраться-->
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="/js/swiper/swiper-bundle.min.js"></script> <!--Локальный Swiper-->
<!--<script src="/projects/mortal-underwater/Joe/joe.js"></script> Первый вариант Canvas Mortal Underwater -->
<script src="/projects/mortal-underwater/mainpage/mu_v2.js"></script>
<script src="/js/main.js" defer></script>
<script src="/js/swiper-init.js" defer></script>
<script src="/js/video-modal.js" defer></script>
<script src="/js/canvas-animation.js"></script>
<script src="/js/kioria-loader.js" defer></script>
</body>
</html>