Вдохновляющее движение

<!DOCTYPE html> <html class="no-touch is-preload"> <head> <title>Вдохновляющее движение</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/webfront_kia_newvi/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/webfront_kia_newvi/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/webfront_kia_newvi/favicon/favicon-16x16.png"> <link rel="manifest" href="/assets/webfront_kia_newvi/favicon/site.webmanifest"> <link rel="mask-icon" href="/assets/webfront_kia_newvi/favicon/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#374663"> <meta name="theme-color" content="#ffffff"> <link rel="shortcut icon" href="/assets/webfront_kia_newvi/favicon/favicon.ico"> <style> @charset "UTF-8"; @font-face { font-family: 'Kia'; src: url('/assets/webfront_kia_newvi/fonts/DesignKL.woff2') format('woff2'), url('/assets/webfront_kia_newvi/fonts/DesignKL.woff') format('woff'), url('/assets/webfront_kia_newvi/fonts/DesignKL.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Kia'; src: url('/assets/webfront_kia_newvi/fonts/DesignKM.woff2') format('woff2'), url('/assets/webfront_kia_newvi/fonts/DesignKM.woff') format('woff'), url('/assets/webfront_kia_newvi/fonts/DesignKM.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Kia'; src: url('/assets/webfront_kia_newvi/fonts/DesignKB.woff2') format('woff2'), url('/assets/webfront_kia_newvi/fonts/DesignKB.woff') format('woff'), url('/assets/webfront_kia_newvi/fonts/DesignKB.ttf') format('truetype'); font-weight: 700; font-style: normal; } *, ::before, ::after { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Kia, Tahoma, Verdana, Segoe, sans-serif; color: #05141f; font-size: 16px; font-weight: 400; line-height: 1.6; } @media (min-width: 360px) { body { font-size: 17px; } } @media (min-width: 992px) { body { font-size: 26px; } } .c-story { display: block; height: 100%; max-width: 1920px; margin-left: auto; margin-right: auto; } .c-story__section { display: flex; flex-direction: column; justify-content: center; position: relative; min-height: 100%; padding: 110px 0; background-color: #f6f2ed; } .c-story__section--invert { background-color: #05141f; color: #fff; } .c-story__content { position: relative; z-index: 1; max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; } .c-story__content--lg { font-size: 1.0625em; } @media (min-width: 992px) { .c-story__content { text-align: center; } } .c-story__bg { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .c-story__bg::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); content: ""; } @media (min-width: 992px) { .c-story__bg::after { background: rgba(0,0,0,.6); } } .c-story__bg--brown::after { background: linear-gradient(0deg, rgba(57,50,43,.8) 0%, rgba(57,50,43,.8) 1%, rgba(57,50,43,0) 50%, rgba(57,50,43,0) 100%); } .c-story__bg--green::after { background: linear-gradient(0deg, rgba(37,41,31,.8) 0%, rgba(37,41,31,.8) 1%, rgba(37,41,31,0) 50%, rgba(37,41,31,0) 100%); } .c-story__bg--flat::after { content: unset; } .c-story__bg video, .c-story__bg img { position: relative; vertical-align: top; width: 100%; height: 100%; border: 0; object-fit: cover; } .c-story__bg--scaled video, .c-story__bg--scaled img { top: -20%; height: 140%; } .c-story__img { display: flex; align-items: center; justify-content: center; margin: 0; } .c-story__img img { max-width: 100%; } .c-story__head { display: block; margin: 0; font-size: 1.5em; font-weight: 700; } .c-story__head i { font-weight: 400; } .c-story__text { display: block; margin: 1.5em 0; } .c-story__text:first-child { margin-top: 0; } .c-story__text:last-child { margin-bottom: 0; } .c-story__text-light { opacity: 0.8; } .c-story__section--invert .c-story__text-light { opacity: 0.6; } .c-story__play { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; font-weight: 300; outline: none; cursor: pointer; } .c-story__play::after { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; margin: 10px auto 0; border: .03em solid; border-radius: 50%; background: rgba(0,0,0,.75) no-repeat 55% 50% / 0.34em auto; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" class=""></path></svg>'); font-family: inherit; color: #fff; font-size: 50px; font-weight: 300; line-height: 1; text-align: center; content: ""; -webkit-transition: .35s ease -webkit-transform; transition: .35s ease transform; } .c-story__play:hover::after { -webkit-transform: scale(1.1); transform: scale(1.1); } @media (min-width: 992px) { .c-story__play::after { font-size: 70px; } } .c-story__article { display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { .c-story__article { flex-wrap: nowrap; } } .c-story__article-img { display: flex; align-items: center; justify-content: center; max-width: 400px; margin: 0 10% 3.5em 0; } @media (max-width: 991px) { .c-story__article-img { transform: none !important; } } @media (min-width: 992px) { .c-story__article-img { max-width: 700px; margin: 0; } } .c-story__article-img img { max-width: 100%; } .c-story__article-content { padding-left: 28px; padding-right: 28px; } @media (min-width: 992px) { .c-story__article-content { max-width: 600px; padding-left: 60px; } } @media (min-width: 1200px) { .c-story__article-content { padding-left: 110px; } } .c-story__article-box { max-width: 400px; margin: 0 10% 3.5em 0; padding: 68px 28px; background-color: #ece5dd; } @media (min-width: 992px) { .c-story__article-box { max-width: 700px; margin: 0; padding: 110px 150px; } } .c-story__navbar { position: fixed; z-index: 2; top: 0; right: auto; left: auto; width: 100%; max-width: 1920px; padding: 70px 0 20px; border-bottom: 1px solid rgba(255,255,255,.1); background-color: rgba(0,0,0,.85); color: #fff; text-align: center; -webkit-transition: .75s ease -webkit-transform; transition: .75s ease transform; -webkit-transition-property: -webkit-transform, top; transition-property: transform, top; } @media (min-width: 1200px) { .c-story__navbar { padding-top: 30px; } } .c-story__brand { position: absolute; top: 22px; left: 30px; font-size: 0; } .c-story__brand-title { display: none; margin: 0; font-size: 2.25em; font-weight: 700; line-height: 1.3; text-align: center; } .c-story__nav { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; } .c-story__nav .c-nav__item { display: flex; align-items: center; justify-content: center; } .c-story__nav .c-nav__link { display: block; margin: 0 15px; border-bottom: 1px solid transparent; color: inherit; font-size: 0.75em; font-weight: 300; letter-spacing: 0.15em; text-decoration: none; text-transform: uppercase; } .c-story__nav .c-nav__link:hover, .c-story__nav .c-nav__link.is-active { border-bottom-color: rgba(255,255,255,.5); } .c-story__navbar.is-start { top: 100%; padding-top: 0; padding-bottom: 2em; border: 0; background-color: transparent; transform: translateY(-100%); } .c-story__navbar.is-start .c-story__brand { position: static; font-size: inherit; } .c-story__navbar.is-start .c-story__brand-title { display: block; } .c-story__navbar.is-start .c-story__brand-logo { display: none; } .c-story__navbar.is-start .c-story__nav { margin-top: 2.5em; } .c-story__navbar.is-start .c-story__nav .c-nav__item { flex: 1; } .c-story__navbar.is-start .c-story__nav .c-nav__item::before, .c-story__navbar.is-start .c-story__nav .c-nav__item::after { position: relative; display: block; width: 100%; height: 1px; background: rgba(255,255,255,.2); content: ""; } .c-story__navbar.is-start .c-story__nav .c-nav__link { position: relative; border: 0; opacity: 0.2; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active { opacity: 1; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active::before { position: relative; display: block; width: 0.54em; height: 0.54em; margin: 0 auto 0.625em; border-radius: 50%; background-color: #fff; -webkit-animation: blink 1s ease-out infinite; animation: blink 1s ease-out infinite; content: ""; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active::after { position: absolute; top: 100%; left: 50%; width: 1.2em; height: 1.2em; margin: 0.3em 0 0 -0.6em; background: 50% 50% / 100% auto no-repeat; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path></svg>'); -webkit-animation: arrow-down infinite 1.5s; animation: arrow-down infinite 1.5s; content: ""; } @media (min-width: 992px) { .c-story__nav .c-nav__link { font-size: 0.577em; } .c-story__navbar.is-start .c-story__nav .c-nav__link { font-size: 1em; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active::before { display: inline-block; vertical-align: middle; margin: -0.15em 0.75em 0 0; } .c-story__navbar.is-start .c-story__nav .c-nav__wrap { white-space: nowrap; } } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes arrow-down { 0% { transform: translateY(0); } 30% { transform: translateY(50%); } 60% { transform: translateY(0); } } .rgk-modal { position: fixed; z-index: 1001; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow-x: hidden; background-color: rgba(0,0,0,.95); color: #fff; -webkit-overflow-scrolling: touch; } .rgk-modal.is-open { display: block; } .rgk-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; } .rgk-modal__shadow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .rgk-modal__header { padding: 20px 24px 0; } .rgk-modal__body { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .rgk-modal__body iframe { width: 100%; height: 100%; } .rgk-modal__footer { display: flex; padding: 0 24px 20px; } .rgk-modal__title { margin: 0; line-height: 1.2; } .rgk-modal__close { position: absolute; top: 1%; right: 1%; width: 1em; height: 1em; border: 0; background: none; margin: 0; padding: 0; overflow: hidden; color: inherit; font-size: 3em; font-weight: normal; line-height: 1em; text-align: center; text-decoration: none; text-indent: 100%; text-shadow: none; white-space: nowrap; -webkit-transition: all .35s, ease; transition: all .35s, ease; -webkit-transition-property: background-color, color, opacity; transition-property: background-color, color, opacity; } .rgk-modal__close::before, .rgk-modal__close::after { position: absolute; top: 50%; left: 50%; width: 50%; height: 0; margin: -1px 0 0 -25%; border-top: 2px solid; content: ""; } .rgk-modal__close::before { transform: rotate(-45deg); } .rgk-modal__close::after { transform: rotate(45deg); } .rgk-modal__close:hover, .rgk-modal__close:focus { cursor: pointer; opacity: 1; } </style> </head> <body>  <div class="c-story"> <nav class="c-story__navbar is-start"> <h1 class="c-story__brand"> <span class="c-story__brand-title">Вдохновляющее движение</span> <a href="/ru" target="_blank" style="color: inherit;"> <svg class="c-story__brand-logo" viewBox="0 0 100 25" width="100" height="25"> <path fill="currentColor" fill-rule="nonzero" d="M58.02 21.83c0 .19.06.3.17.3.09-.01.17-.05.24-.1L89.6 1.8a3 3 0 011.8-.54h6.85c1.05 0 1.76.7 1.76 1.75v13.08c0 1.58-.35 2.5-1.75 3.34l-8.31 5a.57.57 0 01-.28.1c-.1 0-.2-.08-.2-.37V8.9c0-.18-.05-.3-.17-.3a.47.47 0 00-.24.1L66.28 23.5c-.52.35-1.13.54-1.75.53h-15.1c-1.06 0-1.76-.7-1.76-1.76V3.42c0-.14-.06-.27-.18-.27a.49.49 0 00-.24.1l-15.03 9.02c-.15.1-.19.17-.19.24 0 .06.03.12.13.23L42.9 23.47c.14.14.24.25.24.37 0 .1-.16.18-.35.18h-9.7c-.76 0-1.35-.11-1.76-.52L24.82 17a.28.28 0 00-.2-.1.43.43 0 00-.2.06L13.54 23.5c-.66.4-1.11.51-1.76.51H1.77C.7 24.02 0 23.31 0 22.26V9.43c0-1.59.35-2.5 1.76-3.34l8.36-5.02a.43.43 0 01.22-.07c.13 0 .2.13.2.42V18.6c0 .18.04.26.17.26a.6.6 0 00.25-.1L39.2 1.77c.54-.37 1.2-.55 1.86-.52h15.2c1.05 0 1.76.7 1.76 1.75l-.01 18.83z"/> </svg> </a> </h1> <ul id="storyNav" class="c-story__nav c-nav"> <li class="c-nav__item"> <a href="#pageBrandManifesto" class="c-nav__link">Манифест бренда</a> </li> <li class="c-nav__item"> <a href="#pageBrandStory" class="c-nav__link">История бренда</a> </li> <li class="c-nav__item"> <a href="#pageBrandMindset" class="c-nav__link">Философия бренда</a> </li> </ul> </nav> <section class="c-story__section c-story__section--invert" id="pageBrandManifesto"> <div class="c-story__content"> <button class="c-story__play" type="button" data-video-id="sTPYnHV3SdU" data-modal="show" data-target="#modalVideo">Ознакомтесь с манифестом бренда</button> </div> <div class="c-story__bg"> <video src="/upload/manifesto/unveiling-show.mp4" autoplay muted loop playsinline poster="/upload/manifesto/unveiling-show.jpg"></video> </div> </section> <section class="c-story__section c-story__section--invert"> <div class="c-story__content c-story__content--lg"> <p class="c-story__text">Творчество начинается с движения!</p> <p class="c-story__text"><span class="c-story__text-light">Kia создаёт автомобили и предлагает решения, максимально дружелюбные для окружающей среды. Представляем вдохновляющие</span> новаторские продукты<span class="c-story__text-light">, а также</span> удобные и полезные услуги<span class="c-story__text-light">, которые демонстрируют наши обязательства сохранять самую главную ценность каждого человека - время.</span></p> <p class="c-story__text"><span class="c-story__text-light">С рождения мы попадаем в среду, в которой нас окружает вдохновение, страсть и энтузиазм.</span> Желание расти и совершенствоваться <span class="c-story__text-light">соответствует мировоззрению каждого сотрудника Kia, в какой точке мира он бы не находился.</span> Каждый из них готов ежедневно стремиться к поставленным компанией целям.</p> </div> <div class="c-story__bg c-story__bg--scaled"> <video src="/upload/manifesto/prologue-background-d.mp4" autoplay muted loop playsinline poster="/upload/manifesto/prologue-background-d.jpg"></video> </div> </section> <section class="c-story__section" id="pageBrandStory"> <div class="c-story__content"> </div> <picture class="c-story__bg c-story__bg--brown"> <source srcset="/upload/manifesto/brand-story-cover-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/brand-story-cover-lg.jpg"> <img src="/upload/manifesto/brand-story-cover-sm.jpg" alt=""> </picture> </section> <section class="c-story__section c-story__section--invert" style="background-color: rgba(57,50,43,.8);"> <div class="c-story__content"> <p class="c-story__text"><span class="c-story__text-light">Kia обладает многолетним опытом по производству автомобилей, но в действительности всё в 1944 году началось со сборки велосипедов.</span></p> <p class="c-story__text"><span class="c-story__text-light">Уже 75 лет мы обеспечиваем людей транспортными средствами. С гордостью представляем решения, которые позволяют людям легче передвигаться из одного места в другое, сокращают расстояние, которое их разделяет, и позволяют укреплять взаимные связи.</span></p> <p class="c-story__text">Как уже могли убедиться, движение всегда было в сердце нашей компании, <span class="c-story__text-light">а обеспечение человечества транспортом навсегда останется важной частью нашей деятельности. Вне зависимости от изменений в индустрии, эта установка не изменится.</span></p> </div> </section> <section class="c-story__section" style="background-color: #ece5dd;"> <article class="c-story__article"> <figure class="c-story__article-img"> <img src="/upload/manifesto/brand-story-side.jpg" alt=""> </figure> <div class="c-story__article-content"> <p class="c-story__text"><span class="c-story__text-light">Перемещаясь с места на место, пересекая иногда целые континенты, человечество эволюционировало.</span> Желание и потребность в движении закодированы в генах человека.</p> <p class="c-story__text"><span class="c-story__text-light">Двигаясь мы познаём мир, переживаем новый опыт, встречаем новых людей, находим неожиданные перспективы.</span> Это нас вдохновляет.</p> <p class="c-story__text">Движение связано с постоянными переменами. Место жительства и окружающая нас среда постоянно меняются, <span class="c-story__text-light">а это неизбежно касается и нас.</span></p> <p class="c-story__text"><span class="c-story__text-light">Движение даёт время для размышлений.</span> Движение ускоряет поток мыслей, вдохновляет и поощряет прогресс.</p> </div> </article> </section> <section class="c-story__section c-story__section--invert" style="padding-bottom: 30%;"> <div class="c-story__content c-story__content--lg"> <h3 class="c-story__head">Kia верит, что движение приносит новые идеи. Поэтому мы создаём пространство, которое Вас может вдохновить и предоставить больше времени для превращения идей в реальность.</h3> <p class="c-story__text"><span class="c-story__text-light">Это наша основная цель.</span><p> <p class="c-story__text">Мы стремимся создавать пространства, которые вдохновят наших клиентов. <span class="c-story__text-light">Это должна быть не только наша продукция, но и диллерские салоны, в которых наши клиенты могут подробно с ней ознакомиться.</span></p> <p class="c-story__text">Мы работаем для того, чтобы представить полезные и удобные услуги, которые принесут Вам максимальное вдохновение. <span class="c-story__text-light">Это вместе проведённое время с семьёй и друзьями, путешествия или просто приятные мгновения отдыха.</span></p> </div> <div class="c-story__bg c-story__bg--flat c-story__bg--scaled"> <video src="/upload/manifesto/mission-background-d.mp4" autoplay muted loop playsinline poster="/upload/manifesto/mission-background-d.jpg"></video> </div> </section> <section class="c-story__section"> <div class="c-story__content"> <figure class="c-story__img" style="transform: translateY(-75%); margin-bottom: -35%;"> <img src="/upload/manifesto/our-brand-visual.jpg" alt=""> </figure> <p class="c-story__text">Новая компания Kia будет нечто большим, нежели просто производитель автомобилей. Мы станем торговой маркой, которая олицетворяет мобильность.</p> <p class="c-story__text"><span class="c-story__text-light">Понимая потребности клиентов в мобильности и, кроме своей продукции, также предлагая услуги, можем обеспечить удобные решения, которые спроектированы с уважением к главному ресурсу человека – времени.</span></p> <p class="c-story__text">И это не просто слова. Это – цель, к которой мы стремимся всеми возможными способами.</p> </div> </section> <section class="c-story__section" id="pageBrandMindset"> <div class="c-story__content"> </div> <picture class="c-story__bg c-story__bg--green"> <source srcset="/upload/manifesto/brand-mindset-cover-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/brand-mindset-cover-lg.jpg"> <img src="/upload/manifesto/brand-mindset-cover-sm.jpg" alt=""> </picture> </section> <section class="c-story__section c-story__section--invert" style="background-color: rgba(37,41,31,.8);"> <div class="c-story__content"> <p class="c-story__text"><span class="c-story__text-light">Движение – это часть философии Kia. Оно включает в себя всех наших сотрудников и не оставляет в стороне ни одно направление в организации.</span></p> <p class="c-story__head">Мы хотим постоянно двигаться вперёд, стремиться сделать ещё больше и совершенствоваться <i>– это и есть менталитет компании, которая ориентирована на рост.</i></p> </div> </section> <section class="c-story__section"> <article class="c-story__article"> <figure class="c-story__article-img" style="transform: translateY(-40%);"> <img src="/upload/manifesto/brand-mindset-side.jpg" alt=""> </figure> <div class="c-story__article-content c-story__content--lg"> <p class="c-story__head">Надеемся, что такой взгляд близок и для наших клиентов.</p> <p class="c-story__text"><span class="c-story__text-light">Это прогрессивно думающие, оптимистически настроенные люди, которые сами меняются и адаптируются к жизни в будущем. Вперёд ими движут новые идеи и неиспробованные возможности.</span></p> </div> </article> <picture class="c-story__bg c-story__bg--flat c-story__bg--scaled"> <source srcset="/upload/manifesto/backplate-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/backplate-lg.jpg"> <img src="/upload/manifesto/backplate-sm.jpg" alt=""> </picture> </section> <section class="c-story__section"> <article class="c-story__article"> <div class="c-story__article-box"> <p class="c-story__text">В стремлении к нашим целям нам жизненно важно остаться верным своим ценностям.</p> <p class="c-story__text">Всё начинается с того, что обещания становятся делами, примеры которых видны каждый день.</p> </div> </article> <picture class="c-story__bg c-story__bg--flat c-story__bg--scaled"> <source srcset="/upload/manifesto/brand-mindset-ending-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/brand-mindset-ending-lg.jpg"> <img src="/upload/manifesto/brand-mindset-ending-sm.jpg" alt=""> </picture> </section> </div>   <div id="modalVideo" class="rgk-modal" data-modal="modal"> <div class="rgk-modal__dialog"> <button class="rgk-modal__close" type="button" data-modal="hide">Закрыть окно</button> <div class="rgk-modal__body"> <div id="frameVideo"></div> </div> </div> </div>  <script> function spyScroll(nav) { var spyData = { active: window.location.hash, links: {} }; var spyNav = document.querySelector(nav); var spyLinks = spyNav.querySelectorAll('[href*="#"]'); for (var i = 0; i < spyLinks.length; i++) { var spySection = document.querySelector(spyLinks[i].hash); if (spySection) { spyData.links[spyLinks[i].hash] = { link: spyLinks[i], section: spySection } } } function _update(activeHash) { if (spyData.active) { spyData.links[spyData.active].link.classList.remove('is-active'); spyData.links[spyData.active].section.classList.remove('is-active'); } if (activeHash) { spyData.links[activeHash].link.classList.add('is-active'); spyData.links[activeHash].section.classList.add('is-active'); } } _update(spyData.active || spyLinks[0].hash); document.addEventListener('scroll', function(e) { spyNav.parentNode.classList.toggle('is-start', pageYOffset < 80); if (spyData.active) { var rect = spyData.links[spyData.active].section.getBoundingClientRect(); if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) { return; } } for (let key in spyData.links) { var rect = spyData.links[key].section.getBoundingClientRect(); if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) { _update(key); spyData.active = key; return; } } }, { passive: true }); } document.addEventListener('DOMContentLoaded', function() { spyScroll('#storyNav'); }, false); var YTplayer = { videoId: true }; // Inject YouTube API script function YTinit() { if (!YTplayer.videoId) return; var YTApiTag = document.createElement('script'); YTApiTag.src = 'https://www.youtube.com/player_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(YTApiTag, firstScriptTag); } function onYouTubePlayerAPIReady() { var videoId = YTplayer.videoId; // create the global player from the specific iframe YTplayer = new YT.Player('frameVideo', { width: '820', height: '500', videoId: videoId, playerVars: { 'autoplay': 1 } }); } function YTplay() { if (YTplayer) { YTplayer.playVideo(); } } function YTstop() { if (YTplayer) { YTplayer.pauseVideo(); } } document.querySelector('#modalVideo').addEventListener('show.rgk.modal', function(e) { var videoId = e.detail.relatedTarget.dataset.videoId; if (YTplayer.videoId) { YTplayer.videoId = videoId YTinit(); } else { YTplayer.loadVideoById(videoId); } }); document.querySelector('#modalVideo').addEventListener('hide.rgk.modal', function(e) { YTstop(); }); rgkModal(); function rgkModal(selector, method) { var ModalInit = function() { // global definition of plugin using if (!document.rgk) { document.rgk = { 'modal': false }; } if (!document.rgk.modal) { document.rgk.modal = { active: [], events: { 'click': _ListenerClick } }; document.addEventListener('click', document.rgk.modal.events.click); } }; var ModalAdd = function(el) { var modal = el; // if element already used by plugin if (modal.rgk) { return; } ModalInit(); // mark element as rgk modal.rgk = true; modal.insertAdjacentHTML('beforeend', '<span class="c-modal__shadow" data-modal="hide"></span>'); // trigger ready event var evt = new CustomEvent('ready.rgk.modal'); modal.dispatchEvent(evt); }; var ModalToggle = function(el, trigger, relatedTarget) { var modal = el; // if element not used by plugin if (!modal.rgk) { ModalAdd(modal); } var active = document.rgk.modal.active, index = active.indexOf(modal); // set z-index for currently open modal in multiple case if (trigger) { if (index < 0) { var style = active.length ? window.getComputedStyle(active[active.length - 1]) : false, zindex = style ? style.getPropertyValue('z-index') : 'auto'; if (zindex && zindex != 'auto') { modal.style['z-index'] = zindex*1 + 1; } active.push(modal); } } else { if (index > -1) { modal.style['z-index'] = null; active.splice(index, 1); } } modal.classList.toggle('is-open', trigger); var evtName = trigger ? 'show.rgk.modal' : 'hide.rgk.modal'; // trigger show event var evt = new CustomEvent(evtName, { detail: { relatedTarget: relatedTarget } }); modal.dispatchEvent(evt); }; var ModalDestroy = function() { // global definition of plugin using if (document.rgk.modal) { document.removeEventListener('click', document.rgk.modal.events.click); delete document.rgk.modal; if (!document.rgk.length) { delete document.rgk; } } }; var _ListenerClick = function(e) { var clicked = e.target, trigger = clicked.getAttribute('data-modal'); if (trigger && (trigger == 'show' || trigger == 'hide')) { e.preventDefault(); var target = false, id = clicked.dataset.target || clicked.hash || ''; if (id.trim()) target = document.querySelector(id); if (!target) target = clicked.closest('[data-modal="modal"]'); if (target) { ModalToggle(target, (trigger == 'show' ? true : false), clicked); } else { console.log('no modal selector found'); } return false; } }; var els = null; switch (typeof selector) { case 'string': if (selector == 'init' || selector == 'destroy') { els = ['']; method = selector; } else { els = document.querySelectorAll(selector); } break; case 'object': selector.length ? els = selector : els = [selector]; break; default: els = ['']; break; } if (els === null) { throw new TypeError('Element must not be null!'); } for (var i = 0; i < els.length; i++) { el = els[i]; switch (method) { case 'init': ModalInit(); break; case 'show': ModalToggle(el, true); break; case 'hide': ModalToggle(el, false); break; case 'destroy': ModalDestroy(); break; default: ModalInit(); break; } } }; </script> </body> </html>

CINXE.COM

Вдохновляющее движение