Шаблоны целевых страниц в режиме Лэндинг
Редактирование Мета
Если объекту не назначен шаблон, после создания объекта, открывается страница с выбором шаблона, после выбора шаблона, открывается редактирование контента.
Как создавать шаблоны для ЮАИ
Для каждого шаблона необходимо дополнительно создать миниатюру (thumb.png) и скриншот полной страницы во всю высоту (fullpage.png).
/static/templates/templatename/index.html
/static/templates/templatename/assets/ - для файлов шаблона
В шаблоне можно изменять текст, изображения, видео. Эти элементы обозначены атрибутом data-e="text", data-e="image", data-e="video", data-e="svg", data-e="audio", data-e="form" .
Для контейнеров (например сетки) во избежание проблем с версткой, у родителя (например: row) необходимо отключить редактирование data-e="false", а у колонок (например: col-md-4) включить data-e="true" .
Стандартные компоненты юзабилити
Основных компонентов для большинства лэндингов или целевых страниц оказывается совсем ничего. Это Тогглеры или меню, Вкладки или Аккордеоны да и Слайдеры. Существует множество фреймворков на js, но как это сделать с минимальным количеством кода, а лучше вообще без js используя только 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>Слайдер
<div class="slider">
<div class="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<div class="moveleft"></div>
<div class="moveright"></div>
</div>Блоки контента или секции:
<section></section>
<section class="scrollsnap"></section> // С вертикальной зацепкой В режиме презентации вертикальным движением по секциям или горизонтальным по слайдеру можно управлять свайпом, стрелками на клавиатуре или пультом тв
При выключенном яваскрипте Слайдер работает только прокруткой или свайпом, кнопки не работают.
Придется добавить чуток 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>