Руководство по Zero Block

Как создать собственный дизайн для сайта на Тильде

Zero Block — встроенный редактор для веб-дизайна внутри Тильды. Позволяет с чистого листа нарисовать собственное оформление сайта или изменить существующие блоки. Если вы профессиональный дизайнер, вы можете создавать сайты на заказ, дополняя их своим уникальным дизайном.
Содержание

Что хорошего в Zero Block:

Контроль каждого элемента. Вы можете контролировать каждую деталь блока (текст, изображения, кнопки, плашки): в каком месте, какого размера и на экранах с каким разрешением она будет находиться.

Слои. Удобный инструмент для создания глубины на странице с помощью наложения элементов друг на друга и теней.

Привязка к краям экрана или сетки.
Каждый элемент сайта можно позиционировать относительно сетки или экрана.

Сложная типографика.
У дизайнеров есть полная свобода в создании нестандартных типографических решений.

Прозрачность. Задавайте прозрачность элементам и теням под ними. Индивидуальная настройка адаптивности. Меняйте все в зависимости от разрешения экрана: композицию, набор видимых элементов.

Плашки. Добавляйте цветные плашки, карточки для контента или загружайте изображения внутрь геометрических форм.
Видео. Добавляйте на⦁сайт видео из⦁youtube или vimeo. В⦁Zero Bock вы⦁сможете регулировать его пропорции и⦁положение на⦁странице.

Вставка HTML. Добавляйте любые элементы в⦁Zero Block при помощи вставки HTML кода и⦁настраивайте позиционирование этих элементов на⦁каждом экране.

Tooltip. Используйте этот интерактивный инструмент, чтобы добавить всплывающие подсказки. Вы⦁можете настроить цвет, тень, размер, выбрать или загрузить иконку, которая будет отображаться внутри кружка, а⦁также загрузить изображение, которое будет всплывать при наведении.

Форма обратной связи. Вы можете добавить поля для ввода, подключить сервисы приема данных, задать стиль формы и применить к ней анимацию.


Анимация появления элементов. Добавляйте анимацию при появлении элементов: через прозрачность, увеличение, появление снизу, сверху, справа или слева экрана.

Пошаговая анимация. Используйте пошаговую анимацию, чтобы сделать страницу интереснее и динамичнее. Анимацию можно добавить по клику, по скроллу, при наведении на элемент и при появлении элемента на экране.

Параллакс. Применяйте к⦁элементам параллакс при скролле и⦁параллакс при движении курсора мышки.

Фиксация при скролле. Применяйте к элементам фиксацию во время скролла. Вы можете задать расстояние, в течение которого элемент будет зафиксирован, и его расположение.

В каких случаях стоит использовать Zero Block

Zero Block — удобный многофункциональный инструмент, но, прежде, чем браться за его использование, определите, какие задачи вы хотите с его помощью решить.
1. Вы нарисовали макет в графическом редакторе и хотите в точности перенести его на страницу
Если вы привыкли рисовать макет сначала в графических редакторах, то с помощью Zero Block вы сможете легко перенести его на сайт в том виде, в котором задумали. Для этого в Zero Block есть сетка в 12 колонок и индивидуальные параметры у каждого элемента: координаты, размеры, позиционирование относительно сетки (или краев экрана), параметры прозрачности и тень. Благодаря этим инструментам, вы можете воссоздать ваш макет в Zero Block.

Интерфейс Zero Block похож на интерфейс графических редакторов, вам нужно будет добавить необходимые элементы и задать им соответствующие координаты. А если вы все это уже сделали ранее, повторить это в Zero Block не составит труда. Используйте Zero Block, чтобы быстро перенести вашу задумку из графического редактора на сайт без программирования.
2. Обычных блоков не хватает, чтобы создать сайт
Если вы создаете страницу сайта или лендинг и не можете найти подходящий блок в библиотеке Тильды, используйте Zero Block. Разберем на конкретных примерах.
1. Нестандартная композиция
Сайты, созданные на Тильде, чаще всего имеют блочную структуру, предлагая посетителю скроллить вниз раздел за разделом. Это тренд унификации в веб-дизайне. На первый план выходит контент, а не дизайн.

Если вы хотите изменить подход к чтению и вести читателя другими путями, Zero Block — отличный инструмент.
Сайт Фотобукфеста оформлен колонками. Отделить контент друг от друга помогает деление страницы на зоны с помощью линий. Если разобрать эту страницу на функциональные блоки, то это обложка, меню и «о проекте», расположенные не друг за другом, а в единой композиции. Взгляд посетителя тоже считывает эти блоки последовательно, но уже не снизу вверх, а по заданному дизайнером сценарию.
На сайте интенсива по дизайну «Прорыв» программа обучения сделана как изображения с подписями. Zero Block позволяет компоновать подписи не строго под изображениями, а со смещениями и добавлять дополнительные элементы навигации, например, тонкие линии.
На сайте интенсива по веб-дизайну W.D.i рассказ о том, как проходит курс сделан с помощью колонок. Цифра является одновременно и текстом и иллюстрацией.
2. Сложные формы
Zero Block удобно использовать, чтобы собрать элементы со сложным краем в единую композицию, сделав все расстояния визуально одинаковыми.
Zero Block позволяет собрать в одну композицию и прямоугольные фотографии и вырезанные изображения. Как в блоге Fy:r Clothes.
Zero Block позволяет собрать композицию из фигур и типографики, регулируя расстояния между ними, как будто вы создаете плакат.
Обложка сайта wdi.design сделана с помощью Zero Block, чтобы расположить кнопки и ссылки в нестандартных местах и контролировать размещение сложной формы на фоне.
3. Слои
В Zero Block удобно работать со слоями — заезжать одними изображениями на другие, а также текстом на плашки, кнопками на фотографии. Используйте наложение нескольких элементов друг на друга. Каждый из них вы можете позиционировать по разным параметрам, создавая дополнительные эффекты.
На лонгриде проекта Platforma о 20-ти годах моды в Украине три слоя: фотография, текст и фотография поверх.
На сайте магазина пасты «Pasta Naturale» активно используются слои, а в сочетании с тенью под карточками, это создает глубину в пространстве страницы.
Чтобы не запутаться в большом количестве элементов, используйте инструмент «Слои» (Layers). Там вы можете управлять всеми элементами в блоке: менять местами, скрывать и ставить замок.

Чтобы открыть слои, нажмите горячие клавиши ⌘+ L или Cntrl + L для Mac, для Windows — Cntrl + L.
4. Много элементов вместе
Zero Block позволяет собирать сложные композиции из множества элементов — текста, изображений, линий, плашек, кнопок.
С помощью Zero Block на обложку сайта с иконками добавили крупные цифры, подписи к ним, описание, большое количество иконок и неровный край.
С помощью Zero Block на сайте проекта «Do and Go» собраны вместе и линии и фактура и текст.
На лендинге новых шрифтов на Тильде блок про каждый шрифт состоит из множества элементов.
5. Ховер
Ховер (изменение внешнего вида элемента при наведении) можно использовать как дополнительный элемент оформления или как функциональную часть статьи или инфографики.
Чтобы нагляднее показать анатомию лонгрида, на странице использованы ховеры. При нажатии на каждый из них, читатель попадает в соответствующих раздел.

3. Необходимо немного изменить стандартный блок Тильды

Когда хочется изменить что-то в обычном блоке и это нельзя сделать с помощью настроек.

Если вы выбрали стандартный блок Тильды и хотите его немного изменить или что-то добавить, а нужных параметров нет в настройках, воспользуйтесь функцией «Конвертировать в Zero Block». Тогда выбранный блок можно будет редактировать как Zero Block. Эта функция доступна для большинства блоков Тильды.

Разберем по этапам. Например, изменим блок с тарифами: вынесем иконки за пределы карточки с информацией.
1
Добавим нужный нам блок на страницу сайта.
2
Переведем его в Zero Block, нажав в настройках «Конвертировать в Zero Block».
3
Нажмем «Редактировать блок»
4
Внесем нужные изменения. В данном случае нужно обрезать плашку до середины иконок — это и есть цель перевода в Zero Block.
5
Теперь расстояние от заголовка до тарифов стало визуально больше. Выделим все карточки с тарифами и поднимем их ближе в заголовку. Также уменьшим высоту всего блока, чтобы отступ снизу оставался таким же.
6
Добавим свой контент: иконки и тексты.
7
Количество текста изменилось, теперь надо выровнять отступы и длину карточек, чтобы блок смотрелся гармонично.
8
После того, как вы внесли изменения на самом большом экране, расположение элементов на остальных экранах останется прежним. Изменится только добавленный вами контент. Так вы можете управлять всеми деталями самостоятельно и создавать совершенно разные композиции на всех экранах.

Настраиваем отображение для остальных размеров экрана от большего к меньшему.

Помните, что если вы впоследствии измените текст, нужно проверить отображение на всех экранах еще раз.
Примеры других блоков, конвертированных в Zero Block:
На сайте интенсива «Прорыв» перевели блок с тарифами в Zero Block и добавили иллюстрации и плашку на фон.
Блок «О проекте» на сайте веб-студии «Wave» перевели в зеро, чтобы добавить рамку со смещением к фотографии и фигуру на фон.
В блоке с тарифами на сайте веб-студии «Wave» изменили плашку с тенью на обводку и вынесли кнопку за пределы рамки.

Когда Zero Block не нужен

1. Если можно добиться того же результата обычными блоками
Стандартные блоки Тильды имеют много настроек. Добавьте максимально подходящий вам блок из библиотеки и, открыв вкладку «настройки», посмотрите, можно ли с помощью них добиться нужного вам результата. Возможно, Zero Block вам не понадобится.

Приведенные ниже примеры созданы из стандартных блоков Тильды.
Блок TM301 на сайте агентства InShow. Вместо фотографии вставлены целые композиции. Такие композиции можно создать в Zero Block или добавить отдельно изображением в обычный блок.
Блок FR201 на сайте проекта Forsix, где вместо иконок добавлены целые композиции, каждая из которых содержит белый круг, цифру и иллюстрации.
2. Чтобы создать адаптивные отступы для мобильной версии
В Тильде есть функция, позволяющая задавать отдельно отступы для компьютеров и мобильных устройств.
3. Если нужно изменить расстояния в обычных блоках, когда Zero Block блок сделан не по сетке
Обычные блоки Тильды располагаются по сетке из 12 колонок. Так каждому заголовку можно задать отступы, равные любому количеству колонок. Если вы создали композицию в Zero Block без учета сетки, то обычные блоки невозможно будет поставить на те же отступы без перевода в Zero Block. Например, вы создаете сайт, чередуя обычные блоки и Zero Block. При этом, если в Zero Block вы расставляете элементы без учета сетки, то элементы в обычных блоках не получится разместить на те же расстояния, что и в Zero Block. Помните, что обычные блоки Тильды можно расположить только по сетке.

При создании дизайна в Zero Block, мы советуем использовать сетку и располагать основные элементы, учитывая оси. Так Zero Block можно будет легко сочетать с остальными блоками Тильды.

Как использовать Zero Block

Рассмотрим основные возможности Zero Block.
Какие элементы можно добавить
Помимо текста, изображения, плашек и кнопок в Zero Block можно добавлять еще несколько более сложных элементов.
Видео
В Zero Block есть возможность добавить и настроить видео из YouTube и Vimeo. Можно менять размер и соотношение сторон видео, его прозрачность, задавать тень и применять анимацию.

В настройках видео можно задать автоматическое воспроизведение, включение и отключение зацикливания, задание времени начала и завершения и загрузить свою обложку.
Видео в Zero Block
Вставка HTML
В Zero Block вы можете добавить любые элементы при помощи вставки HTML кода. Например: интерактивные элементы, онлайн-запись, музыкальные плееры, календари, калькуляторы, посты из соцсетей. Можно настроить позиционирование этих элементов на каждом экране.
Tooltip
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом или изображением. Он может быть полезен, когда вы, например, рассказываете про какой-то сложный предмет и хотите на фото описать его составные части. Или вы продаете дома в строящемся поселке — можно нарисовать схему и отметить на ней каждый участок.

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

Не забудьте после распределения всех элементов в блоке и использования тултипа проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась сверху или снизу блока или по его краям.
Использование тултипа для того, чтобы показать характеристики товара. Фото: SPERA.de
Форма обратной связи
Вы можете добавить горизонтальную или вертикальную форму в нулевой блок и применить все необходимые настройки: добавить поля для ввода, подключить сервисы приема данных, задать сообщения об успехе и ошибках. Также вы можете задать стиль формы и применить к ней анимацию.
Форма в нулевом блоке в блоге Tilda Publishing
Как располагать элементы
У каждого элемента можно задать координаты относительно четырех сторон экрана или сетки, изменить параметры прозрачности, тени, можно повернуть элемент, а также задать ему ссылку при нажатии.
Как задавать размеры элементов
Каждому элементу можно задать размер в пикселях или в процентах от экрана. Например, вы хотите создать элемент, который вне зависимости от размера экрана всегда будет занимать его половину. В таком случае его ширину и высоту стоит задать не в px, а в %.
Какие эффекты можно применить
Zero Block таит в себе много неочевидных возможностей. Вот некоторые эффекты, которые вы можете использовать на своем сайте.
Ховеры
Для ховера (эффекта при наведении) в Zero Block используйте кнопку. Вы можете сделать ее любого размера, а, настроив параметры скругления, превратить в круг. Если вы хотите сделать ее видимой только при наведении, сделайте ее бесцветной, а для ховера выберите прозрачность 30 и любой цвет.
Расположите такую кнопку поверх элементов, на которых вы хотите настроить ховер. Это могут быть и изображения, и текст. Если нужно, задайте кнопке ссылку.
На странице Формула Landing Page цифры в кружках — черные кнопки с текстом и оранжевом цветом при наведении, а эффект на схеме — несколько прямоугольных кнопок поверх изображения.
Фиксация фонового изображения при скролле
Для того, чтобы сделать фиксацию при скролле, задайте изображению Behavior — Fixed. Эта функция доступна для изображения на фоне и для изображения внутри шейпа. Если применить этот параметр для изображения внутри плашки, то размер изображения растянется на весь экран, но его будет видно только в области шейпа. Если использовать несколько таких шейпов в блоке, то изображение в них будет продолжением одного и того же. Помните, что фиксация при скролле доступна не для всех разрешений экрана, поэтому важно проверить адаптивность страницы перед публикацией.
Вы можете сочетать фиксированные изображения и статичные для создания дополнительного эффекта и необычных сочетаний.
Лонгрид проекта Platforma о 20-ти годах моды в Украине
Длинный скролл
Чтобы создать длинный скролл, задайте высоту блока (Window container height) в процентах от высоты экрана. Например, если вы хотите, чтобы блок был высотой в две высоты экрана, поставьте значение 200.

Задайте фоновому изображению позицию fixed.

Если вы хотите, чтобы текст и другие элементы поверх изображения появлялись на странице не сразу, а в нижней части, задайте каждому элементу Container — Window container и Axis Y — Bottom. Теперь расположение элементов ориентировано на нижнюю границу изображения. Поднимите каждый из них на столько, на сколько хотите сделать их выше этой границы.
Чтобы создать длинный скролл, задайте высоту блока (Window container height) в процентах от высоты экрана. Например, если вы хотите, чтобы блок был высотой в две высоты экрана, поставьте значение 200.
Задайте фоновому изображению позицию fixed.
Если вы хотите, чтобы текст и другие элементы поверх изображения появлялись на странице не сразу, а в нижней части, задайте каждому элементу Container — Window container и Axis Y — Bottom. Теперь расположение элементов ориентировано на нижнюю границу изображения. Поднимите каждый из них на столько, на сколько хотите сделать их выше этой границы.
Отображение элементов за пределами Zero Block
Если вы хотите, чтобы какие-то элементы в нулевом блоке выходили за его пределы и накладывались на соседние блоки, вы можете использовать опцию Overflow. Она находится в настройках блока.
Когда такая опция может быть полезна:
1
Когда вы хотите наложить какой-то элемент на стандартный блок. Таким образом вы сэкономите время — не нужно будет переводить стандартный блок в нулевой и настраивать его адаптивность.

Чтобы наложить элемент на соседний блок, создайте рядом с ним узкий нулевой блок, расположите элемент в нужном месте так, чтобы он выходил за пределы белой области, включите опцию Overflow. Не забудьте проверить отображение элемента в мобильной версии.
2
Когда вы хотите, чтобы элемент был зафиксирован за пределами нулевого блока. Tакая опция может особенно пригодиться при работе с пошаговой анимацией.

Как настроить адаптивность

Мы предусмотрели адаптацию для пяти основных видов экранов. С помощью нее ваш блок на любом устройстве будет выглядеть хорошо.

Создавая Zero Block, важно проверить, как выглядит сайт на всех экранах. Сделать это можно прямо в Zero Block, нажав на изображение соответствующего устройства.
Zero Block устроен так, что каждый элемент на каждом экране можно настроить индивидуально, поэтому, меняя композицию или контент на одном из них, на экранах с меньшим разрешением блок может выглядеть по-другому из-за разницы в длине строки или размере элементов.

Создавая Zero Block с нуля, адаптивность нужно настраивать самостоятельно. Важно помнить об этом перед публикацией сайта.

Если весь ваш сайт предполагает дизайн в Zero Block, то удобнее разбивать его на отдельные блоки. Так вы сможете отключать блоки для экранов с маленьким разрешением или временно выключать их для всего сайта.

Если на большом экране вы используете множество деталей, то, для удобства восприятия, на экранах с меньшим разрешением вы можете сделать все проще и лаконичнее.
Пример, где убраны декоративные элементы на экранах с меньшим разрешением.
Пример индивидуальной композиции на каждом экране:

Анимация в нулевом блоке

В нулевом блоке можно применить несколько видов анимации: анимацию при появлении, по шагам, а так же параллакс и фиксацию элементов при скролле.
Анимация появления элементов
Появление каждого элемента в Zero Block можно анимировать. Мы предусмотрели шесть видов анимации:
Fade In — появление через прозрачность.
Fade In Up — появление через прозрачность снизу.
Fade In Down — появление через прозрачность сверху.
Fade In Left — появление через прозрачность справа.
Fade In Right — появление через прозрачность слева.
Zoom In — появление через увеличение или уменьшение.
У каждого вида анимации есть параметры. Разберем, что они означают.

Duration — длительность анимации в секундах. Чем больше значение, тем медленнее анимация.
Distance — расстояние от исходной точки анимации до конечного местоположения объекта. Указывается только для тех видов анимации, где объекты появляются с какой-либо стороны.
Scale — Размер элемента в начале анимации в процентах от исходного размера. Этот параметр задается при появлении через увеличение или уменьшение. Если значение больше 100 — объект изначально больше и уменьшается до основных параметров, если меньше 100 — наоборот, объект увеличивается до исходного значения.
Delay — задержка воспроизведения анимации в секундах. Если значение нулевое, анимация начнется сразу, как только блок появится на странице.
Когда может быть полезна задержка? Если значимый объект перекрывается или зачеркивается другим объектом. Если на одном экране несколько объектов с анимацией, то, чтобы она не появлялась вся сразу, поставьте каждому элементу разную задержку. Так вы сможете управлять взглядом зрителя, ведя его от одного элемента к другому.
Trigger Offset — расстояние в пикселях от нижнего края экрана, при котором элемент появляется на странице. По умолчанию анимация элемента начинается, как только он пересечет нижний край экрана. Чтобы анимация началась позже, когда объект будет в зоне видимости для зрителя, а не в самом низу, задайте расстояние от нижнего края окна, при котором начнется анимация. Если объект изначально находится на меньшем расстоянии, чем значение этого параметра, то его не будет видно, пока пользователь не проскроллит дальше.
Применение Trigger Offset к элементу в статье «10 причин дизайнеру отправиться в Хельсинки»
Когда вы задали необходимые параметры, проверьте как выглядит анимация, не выходя из редактора. Сделав активным объект, которому вы задали анимацию, нажмите «Play element» для воспроизведения анимации этого элемента и «Play all», если вы анимировали несколько объектов и хотите посмотреть, как они сочетаются.
Анимация появления элементов на обложке итогов 2017 года Tilda Publishing
Пошаговая анимация (Step-by-step animation)
C помощью пошаговой анимации любому элементу страницы можно назначать последовательные шаги трансформаций и дать возможность пользователю взаимодействовать с элементами.

Чтобы в нулевом блоке добавить элементу пошаговую анимацию выделите его, зайдите в настройки и перейдите в раздел пошаговой анимации (находится в конце настроек элемента).

Пошаговая анимация начинает происходить по какому-либо событию — действию пользователя на странице. В нулевом блоке предусмотрено 4 события, по которым воспроизводятся шаги анимации:

  • Анимация по скроллу (on Scroll)
  • Анимация при появлении элемента (on Screen)
  • Анимация при наведении на элемент (on Hover)
  • Анимация по клику (on Click)

Пошаговая анимация начинает происходить по какому-либо событию — действию пользователя на странице. В нулевом блоке предусмотрено 4 события, по которым воспроизводятся шаги анимации:

  • Анимация по скроллу (on Scroll)
  • Анимация при появлении элемента (on Screen)
  • Анимация при наведении на элемент (on Hover)
  • Анимация по клику (on Click)
Анимация по скроллу (on Scroll)
При анимации такого типа элемент проходит шаги анимации во время скролла страницы.
* Чтобы посмотреть пример пошаговой анимации в нулевом блоке, пожалуйста, откройте статью на экране больше 1200 px
Примеры анимации по скроллу:

Все примеры анимации вы можете добавить к себе и использовать в личных проектах.
Анимация при появлении элемента
Такая анимация начинает воспроизводиться, когда элемент появляется на экране.
* Чтобы посмотреть пример пошаговой анимации в нулевом блоке, пожалуйста, откройте статью на экране больше 1200 px
Элемент на экране (element on Screen) — анимация начинает воспроизводиться, когда элемент пересекает нижнюю границу браузера и появляется на странице.

Блок на экране (block on Screen) — анимация воспроизводится, когда нулевой блок, в котором находится элемент, пересекает нижнюю границу браузера и появляется на странице.
Примеры анимации при появлении элемента на экране:
Анимация при наведении на элемент (on Hover)
При таком событии анимация воспроизводится по ховеру — когда пользователь наводит курсор на элемент.
Наведите на элементы курсором
* Чтобы посмотреть пример пошаговой анимации в нулевом блоке, пожалуйста, откройте статью на экране больше 1200 px
Пример анимации при появлении элемента на экране:
Анимация по клику (on Click)
При таком событии анимация воспроизведется, когда пользователь кликнет на элемент.
Кликните на элемент
* Чтобы посмотреть пример пошаговой анимации в нулевом блоке, пожалуйста, откройте статью на экране больше 1200 px
У каждого вида анимации есть дополнительные настройки:

Тригер начала анимации (Start Trigger) — к чему будет привязано начало анимации. Есть выбор из трех областей — верхней границы (on Window Top), центра экрана (on Window Center) и нижней границы (on Window Bottom).

По умолчанию задан тригер нижней границы экрана — анимация на странице начинает воспроизводится, как только пересекает нижнюю границу браузера.

Смещение начала анимации (Trigger Offset) — расстояние в пикселях от выбранного тригера, через которое воспроизводится анимация.

Зацикливание анимации (Loop) — параметр, который позволяет повторять заданные шаги бесконечно.


Вы можете протестировать получившуюся анимацию с помощью кнопок Play Element (проиграть анимацию этого элемента)/ Play All (проиграть анимацию всех элементов в блоке). Такая опция доступна для всех видов анимации кроме анимации по скроллу.

Для удобства работы над анимацией вы можете работать в двух вкладках браузера: в одной редактировать нулевой блок, а во второй открыть предпросмотр страницы. Так вы можете оперативно проверять получившийся результат, не выходя из нулевого блока. Перед тестированием результата не забывайте сохранять изменения в нулевом блоке и обновлять страницу предпросмотра.
Шаги анимации (Steps)
Когда вы выбрали вид пошаговой анимации, вы можете добавить шаги и настроить свойства каждого шага, при которых будут изменяться параметры выбранного элемента. Из нескольких шагов можно составить необходимую траекторию движения и действие элемента на странице.
У каждого шага есть своя длительность — период, во время которого воспроизводятся параметры этого шага.

Чем меньше длительность шага, тем выше скорость изменения параметров элемента.

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

Чем меньше длительность шага, тем выше скорость изменения параметров элемента.

В анимации по скроллу длина шага измеряется в пикселях. В остальных типах анимации каждый шаг измеряется в секундах.
Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд либо 0 пикселей, если это анимация про скроллу.
Параметры шагов анимации (Properties)
С помощью настроек шага можно изменять свойства элемента, к которому применена анимация.

Вы можете задать положение (Move), размер (Scale), прозрачность (Opacity) элемента и угол поворота элемента (Rotate).
Также можно задать настройку фиксации (Fix) элемента во время данного шага. При такой настройке элемент будет зафиксирован во время скролла страницы.

Как и в анимации появления каждому шагу можно задать задержку воспроизведения параметров шага (Delay).
Также можно задать настройку фиксации (Fix) элемента во время данного шага. При такой настройке элемент будет зафиксирован во время скролла страницы.

Как и в анимации появления каждому шагу можно задать задержку воспроизведения параметров шага (Delay).
Параллакс
Параллакс при скролле. Когда вы применяете к элементу эту анимацию, скорость его движения будет отличаться от скорости остальных элементов во время скролла страницы. В настройках вы можете задать скорость его движения — при маленькой скорости от 0 до 100 он будет двигаться медленнее скролла, при высокой от 100 до 200 он будет двигаться значительно быстрее.
Параллакс элементов при скролле в статье «10 причин дизайнеру отправиться в Хельсинки»
Параллакс при движении курсора мыши. Элемент, у которого задан такой вид анимации двигается в противоположную сторону относительно движения курсора. Область его движения по вертикали и горизонтали можно задать в настройках.
Параллакс элемента при движении курсора мыши в статье «10 причин дизайнеру отправиться в Хельсинки»
Фиксация при скролле
Этот тип анимации позволяет зафиксировать элемент во время скролла. Вы можете задать в настройках расстояние, в течение которого элемент будет зафиксирован (фиксация действует в пределах блока). Расстояние задается в пикселях. После скролла на указанную дистанцию элемент перестанет быть фиксированным и продолжит скроллиться вместе со всей страницей.

Также в настройках есть возможность задать, что будет являться триггером для фиксации: верхний край окна, нижний или центр. «Trigger Offset» позволяет контролировать отступ от края окна, чтобы элемент не прилипал к нему вплотную. Также он полезен, когда хочется зафиксировать несколько элементов одновременно на определенном расстоянии друг от друга.
Фиксация элементов при скролле
При использовании анимации в своем проекте не перегружайте страницу большим количеством анимации, анимировать 20–30 % контента достаточно. Излишнее количество анимации выглядит навязчиво и раздражающе, к тому что понижает скорость загрузки страницы.

Частые ошибки в использовании Zero Block

1. Не обращать внимание на адаптивность
Если вы создаете блок с нуля в зеро, то для начала стоит создать всю страницу, чтобы посмотреть, как этот блок сочетается с остальными. Но после этого не забудьте настроить его адаптивность. Если вы переводите в Zero Block и просто меняете текст, даже если на первом экране все выглядит отлично, проверьте адаптивность. Из-за разного кегля и длины строки текст на остальных экранах может выглядеть по-разному.
2. Разное позиционирование у элементов, которые находятся вместе
Если вы хотите, чтобы два элемента постоянно находились в одном положении относительно друг друга, задавайте им позиционирование относительно одних и тех же сторон либо Grid Container, либо Window Container.

Подробнее о том, как настроить позиционирование элементов, читайте в Справочном центре:
Заголовок имеет позиционирование относительно края экрана. Расстояние слева останется таким при любом размере браузера. Подзаголовок позиционируется относительно сетки. Поэтому оба текста будут каждый раз располагаться по-разному относительно друг друга.
3. Контейнер с текстом выходит за область сетки
Если вы позиционируете текст относительно сетки и хотите, чтобы он всегда оставался в пределах экрана, следите за тем, чтобы его контейнер не выходил за область сетки. Эта полезная привычка создания аккуратного макета избавит вас от неожиданностей в отображении блока.
Используйте Zero Block для создания впечатляющих сайтов и нестандартных типографических ходов. Он станет полезным инструментом для дизайнерских решений ваших проектов. Добавляйте индивидуальности сайту с помощью эффектов, типографики и непривычной композиции. Все в ваших руках!

Текст, дизайн, иллюстрации и верстка: Маша Белая
Редактура: Варя Гурова, Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также: