Возможности HTML-Редактора
<div class="text" data-hidden="mobile">
Hidden on Mobile
</div>
<div class="text" data-hidden="desktop">
Hidden on Desktop
</div>
<a href="#about">Перейти к блоку "О нас"</a>
<a href="#form">Открыть окно с формой</a>
<a href="#cart">Открыть корзину</a>
ACTION_NAME | Цель | Доп. атрибуты | Описание |
---|---|---|---|
link По умолчанию | link_open | href="URL" — Адрес ссылки target="_blank" — Открывать в новой вкладке | Открытие ссылки / Открытие окна / Открытие корзины / Переход к якорю |
cart | add_to_cart | data-product-image="/img/2000018200_600.jpg" — Путь до изображения товара data-product-name="Название товара" — Название товара data-product-price="1000" — Цена за единицу товара data-product-count="1" — Количество товаров для добавления | Добавление в корзину |
file | file_load | href="URL" — Путь к файлу download — Принудительно скачивать файлы, которые могут быть открыты в браузере (PDF, изображения) | Скачивание файла |
modal | modal_open form_open done_open product_show quiz_start | data-modal-id="MODAL_ID" – ID окна для открытия | Открытие окна |
close | modal_close | – | Закрытие окна (только для окон) |
none | – | – | Не обрабатывать |
<a
data-action="cart"
data-product-image="/img/9512942_1150.webp"
data-product-name="Чёрный свитшот"
data-product-price="15990"
>
Добавить товар в корзину
</a>
<a
data-action="modal"
data-modal-id="form567"
>
Показать форму
</a>
<a
data-action="none"
data-goal="my_custom_goal"
href="#anchor"
>
Перейти по якорю и выполнить цель my_custom_goal
</a>
<div class="lightbox-container">
<img
alt="Изображение #1"
src="/img/2000018199_600.jpg"
data-lightbox="/img/2000018199_1920.jpg"
>
<img
alt="Изображение #2"
src="/img/2000018200_600.jpg"
data-lightbox="/img/2000018200_1920.jpg"
>
</div>
<div data-lazy-bg="/img/2000018199_%optimalWidth%.jpg"></div>
<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">
<div data-inline-bg="/img/2000018199_%optimalWidth%.jpg"></div>
<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">
:scope {
color: red;
&:hover {
color: blue;
}
}
color: red;
&:hover {
color: blue;
}
:scope {
/* Стили текущего элемента */
}
/* Стили всей страницы */
:root {
z-index: 2147483647;
}
className | Описание |
---|---|
adaptive-desktop | Текущий режим отображения сайта - ПК |
adaptive-mobile | Текущий режим отображения сайта - Мобильный |
is-touch | Устройство с сенсорным экраном |
is-pointer | Устройство с курсором |
is-ios | iOS устройства (iPhone, iPad) |
is-android | Android устройства |
is-safari | Браузер Safari |
is-chrome | Браузер Chrome |
is-edge | Браузер Edge |
is-firefox | Браузер Firefox |
// В браузере Chrome на iPhone элемент красного цвета
body.adaptive-mobile.is-ios.is-chrome {
:scope {
background: red;
}
}
Переменная | Расшифровка |
---|---|
var(--currentColor) | Текущий цвет текста |
var(--contrastColor) | Контрастный к текущему цвету текста |
var(--bgContrast) | Контрастный к текущему цвету фона (отличается от --currentColor в случае если цвет текста не "Авто") |
var(--lightColor) | Светлый цвет |
var(--darkColor) | Тёмный цвет |
var(--100vw) | 100% ширины экрана |
var(--100vh) | 100% высоты экрана |
var(--coverHeight) | Высота для полноэкранных секций (не меняется при небольшом изменении высоты окна) |
var(--scrollbarWidth) | Ширина скролбара на текущем устройстве |
var(--containerWidth) | Ширина контейнера контента (1150px) |
var(--containerMaxWidth) | Максимальная ширина контейнера контента (100%) |
function main() {
console.log('THREE.js loaded', THREE);
}
require(
['https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'],
main
);
Поле объекта | Описание |
---|---|
id | Уникальный ID секции |
is | Тип элемента (block, modal, element) |
content | DOM элемент контейнера контента секции. |
area | DOM элемент секции. Рекомендуем использовать content вместо этого. |
inBeside / wasBeside | Секция рядом с экраном / Находилась рядом с экраном |
inScreen / wasScreen | Секция на экране / была на экране |
inView / wasView | Секция видимая более чем на 25% / была видимая на 25% |
inFocus / wasFocus | Секция в центре экрана / была в центре экрана |
isVisible / wasVisible | Секция видимая или скрытая сейчас / была видимая хотя бы раз |
function triggerOnScreen() {
const images = elementApi.content.querySelectorAll('img');
console.log('Элемент на экране, изображения внутри:', images);
}
// Если элемент уже на экране при загрузке страницы
if (elementApi.inScreen) {
triggerOnScreen();
}
// Подписываемся на событие появления на экране
elementApi.on('screen', ({ state }) => {
if (state) {
triggerOnScreen();
}
});
Название события | Описание |
---|---|
beside | Секция скоро появится на экране |
screen | > 1px секции виден на экране |
view | > 25% секции видно на экране |
focus | Секция пересекает центр экрана |
visible | Секция становится видимой или скрытой (смена состояний display: none -> display: block). Применимо для модалов, элементов внутри табов и т.д |
resize | Размеры элемента изменились |
open | Открытие окна |
close | Закрытие окна |
elementApi.on('screen', ({ state, first }) => {
console.log('Элемент появился или исчез с экрана', { state, first });
});
sectionApi.on('resize', () => {
console.log('У секции изменилась ширина или высота');
});
Переменная | Расшифровка |
---|---|
%id% | Уникальный идентификатор изображения |
%size% | Ширина изображения. Если оригинальный размер меньше этого значения — изображение будет сгенерировано в оригинальном размере |
%quality% | Качество изображения. Оптимальное значение в диапазоне 65-85 в зависимости от формата изображения. |
%extension% | Формат изображения (avif, webp, jpg, png, gif) |