Files
Olapka-ru/html/portfolio.html
T
2026-11-09 00:04:27 +03:00

508 lines
35 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&amp;family=Caveat:wght@500;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<title>Примеры мультфильмов и рекламной анимации — О’ляпка</title>
<meta name="description" content="Посмотрите примеры ИИ-анимации студии О’ляпка: рекламные ролики, детские сказки и персональные подарки. Выберите идею для своего мультфильма.">
<link rel="canonical" href="https://olapka.ru/portfolio">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta property="og:type" content="website">
<meta property="og:title" content="Примеры мультфильмов и рекламной анимации — О’ляпка">
<meta property="og:description" content="Посмотрите примеры ИИ-анимации студии О’ляпка: рекламные ролики, детские сказки и персональные подарки. Выберите идею для своего мультфильма.">
<meta property="og:url" content="https://olapka.ru/portfolio">
<meta property="og:image" content="https://olapka.ru/img/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="О’ляпка — мультфильмы на заказ">
<meta property="og:site_name" content="Студия О’ляпка">
<meta property="og:locale" content="ru_RU">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://olapka.ru/img/og-cover.jpg">
<link rel="describedby" type="text/plain" href="/llms.txt">
<link rel="alternate" type="text/markdown" href="/portfolio.md" title="Примеры работ и отзывы — Markdown">
<script type="application/ld+json">{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://olapka.ru/#organization",
"name": "Студия мультфильмов О’ляпка",
"url": "https://olapka.ru/",
"logo": "https://olapka.ru/img/favicon.svg",
"telephone": "+79160957383",
"sameAs": [
"https://t.me/YuliaAnimation",
"https://www.instagram.com/olapka_animatioh",
"https://vk.com/club240204788"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+79160957383",
"contactType": "customer service",
"availableLanguage": "ru",
"url": "https://olapka.ru/contacts"
}
},
{
"@type": "WebSite",
"@id": "https://olapka.ru/#website",
"url": "https://olapka.ru/",
"name": "Студия О’ляпка",
"inLanguage": "ru",
"publisher": {
"@id": "https://olapka.ru/#organization"
}
},
{
"@type": "CollectionPage",
"@id": "https://olapka.ru/portfolio#webpage",
"url": "https://olapka.ru/portfolio",
"name": "Примеры мультфильмов и рекламной анимации — О’ляпка",
"description": "Посмотрите примеры ИИ-анимации студии О’ляпка: рекламные ролики, детские сказки и персональные подарки. Выберите идею для своего мультфильма.",
"inLanguage": "ru",
"isPartOf": {
"@id": "https://olapka.ru/#website"
},
"about": {
"@id": "https://olapka.ru/#organization"
},
"breadcrumb": {
"@id": "https://olapka.ru/portfolio#breadcrumbs"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://olapka.ru/portfolio#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://olapka.ru/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Работы",
"item": "https://olapka.ru/portfolio"
}
]
},
{
"@type": "ItemList",
"name": "Примеры работ",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Новогодний экспресс",
"url": "https://olapka.ru/portfolio#work-8"
},
{
"@type": "ListItem",
"position": 2,
"name": "Новогодняя сказка",
"url": "https://olapka.ru/portfolio#work-7"
},
{
"@type": "ListItem",
"position": 3,
"name": "Реклама детского лофта",
"url": "https://olapka.ru/portfolio#work-1"
},
{
"@type": "ListItem",
"position": 4,
"name": "Детский музей мозга",
"url": "https://olapka.ru/portfolio#work-2"
},
{
"@type": "ListItem",
"position": 5,
"name": "Приключение Саши в Звёздном саду",
"url": "https://olapka.ru/portfolio#work-3"
},
{
"@type": "ListItem",
"position": 6,
"name": "Сюрприз для подруги",
"url": "https://olapka.ru/portfolio#work-4"
},
{
"@type": "ListItem",
"position": 7,
"name": "Артём и секрет настоящей победы",
"url": "https://olapka.ru/portfolio#work-5"
},
{
"@type": "ListItem",
"position": 8,
"name": "Продакт-плейсмент к сезону отключения горячей воды",
"url": "https://olapka.ru/portfolio#work-6"
}
]
}
]
}</script>
<link rel="stylesheet" href="/css/new-year.css">
</head>
<body>
<a class="skip-link" href="#main-content">Перейти к содержимому</a><div class="cookie-banner" id="cookieBanner" role="region" aria-label="Настройки аналитики" hidden>
<div class="cookie-text">Разрешить аналитику для улучшения сайта? <a href="/legal#cookies">Подробнее</a>
</div>
<div class="cookie-actions">
<button class="cookie-btn" id="cookieAccept" type="button">Разрешить</button><button class="cookie-btn cookie-decline" id="cookieDecline" type="button">Отклонить</button>
</div>
</div>
<header class="header">
<div class="container header-inner">
<a href="/" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<nav class="nav" id="nav" aria-label="Основная навигация">
<a href="/" class="nav-link">Главная</a>
<a href="/#new-year" class="nav-link ny-nav">Новый год · 2027</a>
<a href="/services" class="nav-link">Услуги</a>
<a href="/portfolio" class="nav-link active" aria-current="page">Работы</a>
<a href="/contacts" class="nav-link">Контакты</a>
</nav>
<a href="/contacts" class="btn btn-primary" data-goal="order_header">Заказать</a>
<button class="burger" id="burger" aria-label="Меню" type="button" aria-expanded="false" aria-controls="nav"><span></span><span></span><span></span></button>
</div>
</header>
<main id="main-content" tabindex="-1">
<nav class="container breadcrumbs" aria-label="Хлебные крошки"><ol>
<li><a href="/">Главная</a></li>
<li><span aria-current="page">Работы</span></li>
</ol></nav><section class="page-hero">
<div class="container">
<h1 class="page-title">Примеры мультфильмов и рекламной анимации</h1>
<p class="page-subtitle">Каждый мультик — это уникальная история. Смотрите примеры и вдохновляйтесь.</p>
</div>
</section>
<!-- Примеры работ -->
<section class="section">
<div class="container">
<h2 class="section-title">Мультфильмы и рекламные ролики</h2>
<div class="portfolio-grid">
<article class="work-card ny-work" id="work-8">
<div class="work-media"><button class="work-video" type="button" data-video="/video/video-8.webm" data-title="Новогодний экспресс" data-goal="video_open" aria-label="Смотреть видео: Новогодний экспресс">
<img class="work-video-preview" src="/img/posters/video-8.jpg" width="960" height="1705" alt="" aria-hidden="true" loading="lazy" decoding="async">
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"></path></svg></span><span class="work-video-label">Смотреть пример · 1:18</span></button></div>
<div class="work-info"><span class="work-tag">Новогоднее поздравление</span><h3>Новогодний экспресс</h3><p>Готовая новогодняя история с персонализацией для ребёнка. Посмотрите пример мультпоздравления.</p></div>
<noscript><p><a href="/video/video-8.webm">Смотреть «Новогодний экспресс»</a></p></noscript>
</article>
<article class="work-card ny-work" id="work-7">
<div class="work-media"><button class="work-video" type="button" data-video="/video/video-7.webm" data-title="Новогодняя сказка" data-goal="video_open" aria-label="Смотреть видео: Новогодняя сказка">
<img class="work-video-preview" src="/img/posters/video-7.jpg" width="960" height="540" alt="" aria-hidden="true" loading="lazy" decoding="async">
<span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"></path></svg></span><span class="work-video-label">Смотреть пример · 2:45</span></button></div>
<div class="work-info"><span class="work-tag">Базовый пакет</span><h3>Новогодняя сказка</h3><p>Свежий пример ролика базового пакета «Новогодняя сказка».</p></div>
<noscript><p><a href="/video/video-7.webm">Смотреть «Новогодняя сказка»</a></p></noscript>
</article>
<article class="work-card" id="work-1">
<div class="work-media">
<button class="work-video" type="button" data-video="/video/video-1.webm" data-title="Реклама к открытию детского лофта" data-goal="video_open" aria-label="Смотреть видео: Реклама к открытию детского лофта">
<img class="work-video-preview" src="/img/posters/video-1.jpg" width="640" height="360" alt="" aria-hidden="true" loading="lazy" decoding="async"><span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
</svg></span>
<span class="work-video-label">Реклама</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🎉 Для бизнеса</span>
<h3>Реклама детского лофта</h3>
<p>Знакомит с сотрудниками и пространством лофта, помогая родителям представить праздник для
ребёнка. 3D-анимация в стилистике Pixar, где персонажи созданы по образам сотрудников.
</p>
<div class="work-meta">
<span>Тариф: «История»</span>
<span>4 500 ₽</span>
</div>
</div>
<noscript><p><a href="/video/video-1.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-2">
<div class="work-media">
<button class="work-video" type="button" data-video="/video/video-6.webm" data-title="Рекламный ролик для Детского Музея Мозга " data-goal="video_open" aria-label="Смотреть видео: Рекламный ролик для Детского Музея Мозга">
<img class="work-video-preview" src="/img/posters/video-6.jpg" width="640" height="360" alt="" aria-hidden="true" loading="lazy" decoding="async"><span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
</svg></span>
<span class="work-video-label">Мультсериал</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🚀 Для бизнеса</span>
<h3>Детский музей мозга</h3>
<p>Серия мультсериала для интерактивного музея. Показывает, как работает мозг, сохраняя
научную достоверность и интерес детей. 2D-анимация с персонажами по референсам
заказчика.</p>
<div class="work-meta">
<span>Тариф: пакет «Контент-месяц»</span>
<span>13 500 ₽</span>
</div>
</div>
<noscript><p><a href="/video/video-6.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-3">
<div class="work-media">
<button class="work-video" type="button" data-video="/video/video-2.webm" data-title="Приключение Саши в Звёздном саду" data-goal="video_open" aria-label="Смотреть видео: Приключение девочки Саши в Звёздном саду">
<img class="work-video-preview" src="/img/posters/video-2.jpg" width="640" height="360" alt="" aria-hidden="true" loading="lazy" decoding="async"><span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
</svg></span>
<span class="work-video-label">Сказка для Саши</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🧸 Детская сказка</span>
<h3>Приключение Саши в Звёздном саду</h3>
<p>Сказка о приключениях девочки и её любимой игрушки — персональный подарок на день
рождения. 3D-анимация в стилистике Pixar.</p>
<div class="work-meta">
<span>Тариф: «История»</span>
<span>4 500 ₽</span>
</div>
</div>
<noscript><p><a href="/video/video-2.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-4">
<div class="work-media">
<button class="work-video" type="button" data-video="/video/video-4.webm" data-title="Сюрприз для подруги" data-goal="video_open" aria-label="Смотреть видео: Сюрприз для подруги">
<img class="work-video-preview" src="/img/posters/video-4.jpg" width="640" height="360" alt="" aria-hidden="true" loading="lazy" decoding="async"><span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
</svg></span>
<span class="work-video-label">Сюрприз для подруги</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">💖 Личное</span>
<h3>Сюрприз для подруги</h3>
<p>Мультфильм о встрече подруг после долгой разлуки в любимом стиле получательницы — аниме.
По задумке финал совпадает с настоящим стуком в дверь.</p>
<div class="work-meta">
<span>Тариф: «Искры»</span>
<span>3 300 ₽</span>
</div>
</div>
<noscript><p><a href="/video/video-4.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-5">
<div class="work-media">
<button class="work-video" type="button" data-video="/video/video-5.webm" data-title="Артём и секрет настоящей победы" data-goal="video_open" aria-label="Смотреть видео: Артём и секрет настоящей победы">
<img class="work-video-preview" src="/img/posters/video-5.jpg" width="640" height="360" alt="" aria-hidden="true" loading="lazy" decoding="async"><span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
</svg></span>
<span class="work-video-label">Детская сказка</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🥹 Детская сказка</span>
<h3>Артём и секрет настоящей победы</h3>
<p>Сказка для мальчика, который хочет всегда быть первым. История помогает поговорить о
проигрышах, чувствах и дружбе. Главные герои — сам ребёнок, его родители и друзья.</p>
<div class="work-meta">
<span>Тариф: «Сказка»</span>
<span>7 000 ₽</span>
</div>
</div>
<noscript><p><a href="/video/video-5.webm">Открыть видео</a></p></noscript></article>
<article class="work-card" id="work-6">
<div class="work-media">
<button class="work-video" type="button" data-video="/video/video-3.webm" data-title="Продакт-плейсмент к сезону отключения горячей воды" data-goal="video_open" aria-label="Смотреть видео: Продакт-плейсмент к сезону отключения горячей воды">
<img class="work-video-preview" src="/img/posters/video-3.jpg" width="640" height="360" alt="" aria-hidden="true" loading="lazy" decoding="async"><span class="work-play" aria-hidden="true"><svg viewbox="0 0 24 24" width="28" height="28">
<path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
</svg></span>
<span class="work-video-label">Для соцсетей</span>
</button>
</div>
<div class="work-info">
<span class="work-tag">🚿 Для соцсетей</span>
<h3>Продакт-плейсмент к сезону отключения горячей воды</h3>
<p>Юмористический мультфильм, в котором зритель узнаёт знакомую проблему и видит её решение
с помощью товара. Контент для продвижения в соцсетях и на маркетплейсах.</p>
<div class="work-meta">
<span>Тариф: «История»</span>
<span>4 500 ₽</span>
</div>
</div>
<noscript><p><a href="/video/video-3.webm">Открыть видео</a></p></noscript></article>
</div>
</div>
</section>
<!-- Отзывы -->
<section class="section reviews">
<div class="container">
<h2 class="section-title">Что говорят <span class="accent">клиенты</span>
</h2>
<div class="reviews-grid">
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">Долго сомневалась, нужен ли нам мультфильм, но решила попробовать.
Сделали всего за день после согласования сценария — даже раньше обещанного! Наш лофт
передали один в один: окна, горку, администратора и фотографа. Выложили ролик в районные
чаты, и теперь новые клиенты говорят: «Видели ваш мультик, поэтому зашли».</p>
<div class="review-author">
<h3 class="review-name">Кристина К.</h3>
<div class="review-role">Руководитель детского лофта</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">Саша пересмотрела мультик уже раз двадцать! Увидеть на экране себя и
любимого кота Котю — полный восторг. История про Звёздный сад с нашими семейными
воспоминаниями тронула до слёз даже бабушек. Всё так похоже на нашу жизнь! А Саша теперь ещё
больше верит, что ночью игрушки оживают. Лучший подарок на день рождения, спасибо!</p>
<div class="review-author">
<h3 class="review-name">Мария К.</h3>
<div class="review-role">Мама девочки Саши</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">Перед сезоном отключения горячей воды заказал юмористический ролик с
ненавязчивой рекламой товара. И не прогадал! Люди смотрели, а не пролистывали, делились друг
с другом. Продажи на маркетплейсах ощутимо выросли. Обязательно обращусь ещё для продвижения
других товаров!</p>
<div class="review-author">
<h3 class="review-name">Дмитрий О.</h3>
<div class="review-role">Селлер WB</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Заказывали мультик на годовщину свадьбы. Муж был в полном восторге!
Пересматриваем уже раз десять. Спасибо за вашу работу и душу, которую вы вкладываете!»</p>
<div class="review-author">
<h3 class="review-name">Анна К.</h3>
<div class="review-role">Love Story</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">Хотела удивить подругу, с которой мы не виделись год. По сюжету две
подруги потеряли друг друга, а в финале раздаётся стук в дверь — и на пороге появляюсь я. В
жизни подстроила всё точно так же! Подруга была в шоке и восторге. Спасибо «Оляпке» за
воплощение моей задумки и внимание к деталям. Сюрприз удался!</p>
<div class="review-author">
<h3 class="review-name">Марина К.</h3>
<div class="review-role">Сюрприз</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Рекламный ролик для нашей студии массажа превзошёл ожидания. Клиенты
пишут, что именно этот мультик убедил их прийти. Охваты в Instagram выросли в 3 раза!»</p>
<div class="review-author">
<h3 class="review-name">Елена М.</h3>
<div class="review-role">Студия детского массажа</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Сын смотрел мультик про себя и не мог оторваться. Спросил: "Мама, это я
настоящий в мультике?" Сердце растаяло. Спасибо за волшебство!»</p>
<div class="review-author">
<h3 class="review-name">Ольга В.</h3>
<div class="review-role">Сказка для ребёнка</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">«Заказали контент-пакет на месяц. Теперь у нас не болит голова "что
постить завтра". Аудитория ждёт новые серии, сохранения бьют рекорды.»</p>
<div class="review-author">
<h3 class="review-name">Марина Д.</h3>
<div class="review-role">Эксперт по детскому сну</div>
</div>
</article>
<article class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">Очень точно передали интерьер студии и внешность массажисток! Теперь
клиенты просятся «к девушке из мультика». После первого ролика заказали ещё три для рекламы
онлайн-курсов. За две недели публикаций продажи выросли на 20%. Отдельное спасибо за
терпение к правкам — всё получилось так, как я представляла!</p>
<div class="review-author">
<h3 class="review-name">Светлана И.</h3>
<div class="review-role">Студия детского массажа</div>
</div>
</article>
</div>
<div class="cta-inline">
<h3>Хотите так же?</h3>
<p>Расскажите нам о своей идее — и мы создадим мультик, который влюбит в себя.</p>
<a href="/contacts" class="btn btn-primary btn-lg" data-goal="order_portfolio">Заказать
мультик</a>
</div>
</div>
</section>
<p class="container privacy-settings"><button type="button" id="cookieSettings">Настройки аналитики</button></p></main>
<footer class="footer">
<div class="container footer-inner">
<div class="footer-col">
<a href="/" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
<p class="footer-about">Студия авторских ИИ-мультиков.</p>
</div>
<div class="footer-col">
<h2>Навигация</h2>
<a href="/">Главная</a>
<a href="/services">Услуги</a>
<a href="/portfolio">Работы</a>
<a href="/contacts">Контакты</a>
</div>
<div class="footer-col">
<h2>Документы</h2>
<a href="/legal">Политика cookies</a>
<a href="/legal#agreement">Пользовательское соглашение</a>
</div>
<div class="footer-col">
<h2>Связаться</h2>
<a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
<a href="https://www.instagram.com/olapka_animatioh?utm_source=site" target="_blank" rel="noopener">Instagram</a>
<a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
</div>
</div>
<div class="footer-bottom">
<div class="container">© 2026 Студия мультфильмов О'ляпка</div>
</div>
</footer>
<!-- Видео-лайтбокс -->
<div class="video-modal" id="videoModal" role="dialog" aria-modal="true" aria-labelledby="videoModalTitle" aria-hidden="true">
<div class="video-modal-backdrop" data-video-close></div>
<div class="video-modal-dialog">
<div class="video-modal-bar">
<span class="video-modal-title" id="videoModalTitle"></span>
<div class="video-modal-actions">
<button class="video-modal-btn" type="button" id="videoModalFullscreen" aria-label="На весь экран" title="На весь экран">
<svg viewbox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<button class="video-modal-btn" type="button" data-video-close aria-label="Закрыть" title="Закрыть (Esc)">
<svg viewbox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
</div>
</div>
<div class="video-modal-stage">
<video id="videoModalPlayer" controls playsinline preload="none" tabindex="0" aria-label="Просмотр выбранного мультфильма"></video>
</div>
</div>
</div>
<script src="/js/main.js" defer></script>
<script src="/js/new-year.js" defer></script>
</body>
</html>