Шаблоны целевых страниц в режиме Лэндинг

Стандартные компоненты юзабилити

 Используя только css:

<style> /* Раскрывающийся тогглер, аккордеон, меню и модальное окно используют один и тот-же css */ .toggleinput:checked + label ~ .toggled { display: inherit; } .toggleinput:checked ~ .close { display:block; } /*Слайдер*/ .slides { will-change: transform; user-select: none; cursor: ew-resize; scroll-snap-type: x mandatory; white-space: nowrap; overflow-x: auto; transition: 0.8s; font-size:0px; } .slides .slide { scroll-snap-align: start; font-size:var(--1s); display: inline-block; white-space: normal; vertical-align: top; } .slides.active { cursor: grabbing; cursor: -webkit-grabbing; } .slide { position:relative; } </style>

Модальное окно

<div class="modal-container"> <label for="vidbox1">Смотреть видео</label> <label for="vidbox1" class="close none fixed z-index1 center left0 top0 right0 pointer">x</label> <input class="toggleinput none" type="checkbox" name="sectoggle" id="vidbox1"> <div class="modal bg toggled none fixed left0 top0 right0 bottom0 fullwidth fullheight"> <video poster="static/templates/inpoint/assets/start-video.png" src="static/templates/inpoint/assets/video.mp4"></video> </div> </div>

Раскрывающийся тогглер

<label class="toggle" for="faq1"> Вопрос </label> <input class="toggleinput none" type="checkbox" name="toggle" id="faq1"> <div class="toggled none"> Ответ </div>

Вкладки (tabs) или Аккордеон

Работает так же как тогглер, но вместо чекбокса используем input type="radio" с одинаковым name. Чтобы был видимым поумолчанию один из блоков, нужно добавить к элементу input атрибут checked

<div> <label for="faqsec1"> Раздел 1 </label> <label for="faqsec2"> Раздел 2 </label> <label for="faqsec3"> Раздел 3 </label> </div> <div> <input class="toggleinput none" type="radio" name="sectoggle" id="faqsec1"> <div class="toggled none"> Содержимое 1 </div> </div> <div> <input class="toggleinput none" type="radio" name="sectoggle" id="faqsec2"> <div class="toggled none"> Содержимое 2 </div> </div> <div> <input class="toggleinput none" type="radio" name="sectoggle" id="faqsec3"> <div class="toggled none"> Содержимое 3 </div> </div>

Блоки контента или секции:

Весь шаблон сначала разбиватеся на секции. В редакторе секции можно сортировать, клонировать

<section class="relative"></section> <section class="scrollsnap relative"></section> <!-- С вертикальной зацепкой -->

Сетка

Разбивает на колонки и строки. (всего 12 ячеек).  Для мобильной версии добавить класс  col-sm-6 (2-е колонки по 6 ячеек в мобильной) col-md-4 ( 3 колонки по 4 ячейки)

<div class="grid"> <div></div> <!-- Если класс не указан. По умолчанию 4 колонки -->
<div></div>
<div></div>
<div></div>
<div class="col-sm-6"></div> <!-- Этот начнется с новой строки и займет 6 ячеек из 12-и на мобильном и десктопе-->
<div class="col-sm-6 col-md-3"></div> 
<div class="col-md-3"></div>
</div> 

В режиме презентации вертикальным движением по секциям или горизонтальным по слайдеру можно управлять свайпом, стрелками на клавиатуре или пультом тв

Слайдер

<div class="slider"> <div class="slides"> <div class="slide relative" data-sort-done="true"></div> <div class="slide relative" data-sort-done="true"></div> <div class="slide relative" data-sort-done="true"></div> </div> <div class="moveleft"></div> <div class="moveright"></div> </div>

При выключенном яваскрипте Слайдер работает только прокруткой или свайпом, кнопки не работают. 

Придется добавить чуток js чтобы заработали кнопки и свайп мышью:

<script> var sliders = document.querySelectorAll('.slider'); if (sliders){ var slider = document.querySelector('.slider'); sliders.forEach(function(slider) { let slides = slider.querySelector('.slides'); let slide = document.querySelectorAll('.slide'); var nextButton = slider.querySelector('.moveright'); var s_i = 0; if(slides) { if (nextButton){ nextButton.addEventListener("click", () => { const slideWidth = slide[s_i].clientWidth; slides.scrollLeft += slideWidth; ++s_i; }); } var prevButton = slider.querySelector('.moveleft'); if (prevButton){ prevButton.addEventListener("click", () => { const slideWidth = slide[s_i].clientWidth; slides.scrollLeft -= slideWidth; --s_i; }); } let isDown = false; let startX; let scrollLeft; slides.addEventListener('mousedown', (e) => { isDown = true; slides.classList.add('active'); startX = e.pageX - slides.offsetLeft; scrollLeft = slides.scrollLeft; }); slides.addEventListener('mouseleave', () => { isDown = false; slides.classList.remove('active'); }); slides.addEventListener('mouseup', () => { isDown = false; slides.classList.remove('active'); }); slides.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slides.offsetLeft; const walk = (x - startX) * 3; slides.scrollLeft = scrollLeft - walk; }); } }); } </script>

Анимация при прокрутке

CSS умеет определять, что находится во вьюпорте при прокрутке страницы,  но пока поддерживается не всеми браузерами. Придется использовать js.

Чтобы активировать анимацию когда объект видно во вьюпорте, надо добавить к элементу атрибут data-inviewport="Название класса с анимацией" и создать этот класс в таблице стилей. Воспроизводиться будет только одна анимация, но можно добавить другие классы, например для задержки воспроизведения или других свойств.

<style> .rotate360 {animation: rotate360 1s linear;} @keyframes rotate360 { 100% { transform:rotate(360deg);}} </style> <p data-inviewport="rotate360 delay03">ВСЁ!</p>